From 28c45c9475d2064112b5ab87964a74e0b6799df1 Mon Sep 17 00:00:00 2001
From: Amy <minds10@hotmail.com>
Date: Thu, 26 Aug 2021 21:09:52 -0400
Subject: [PATCH] Add comments and constants

---
 components/ShapesBackground.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/ShapesBackground.tsx b/components/ShapesBackground.tsx
index bea5480b..34b94032 100644
--- a/components/ShapesBackground.tsx
+++ b/components/ShapesBackground.tsx
@@ -24,6 +24,7 @@ export function ShapesBackground({ getConfig }: Props) {
     const containerWidth = shapesContainerRef.current?.offsetWidth;
     const containerHeight = shapesContainerRef.current?.offsetHeight;
 
+    // In general, rerun getShapesConfig() if the screen size changes from desktop to mobile (or vice versa)
     if (
       containerWidth == null ||
       containerHeight == null ||
@@ -187,17 +188,19 @@ export const defaultGetShapesConfig = ((pageWidth, pageHeight) => {
 
   const defaultConfig: ShapesConfig = {};
   const gap = 20;
-  const boxWidth = Math.max(150, (pageWidth - 800 - 2 * gap) / 2);
+  const minBoxWidth = 150;
+  const boxWidth = Math.max(minBoxWidth, (pageWidth - 800 - 2 * gap) / 2);
   const boxHeight = 400;
+  const shapeGenerationProbability = 0.85;
 
   for (let y = 0; y + boxHeight <= pageHeight; y += gap + boxHeight) {
     for (let x = 0; x <= 1; ++x) {
-      if (Math.random() < 0.3) {
+      if (Math.random() > shapeGenerationProbability) {
         continue;
       }
 
       const size =
-        boxWidth > 150 && (y == 0 || y + 2 * boxHeight > pageHeight)
+        boxWidth > minBoxWidth && (y == 0 || y + 2 * boxHeight > pageHeight)
           ? "big"
           : "small";
       const shape: ShapeType = getRandomShape(size);