Add comments and constants

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);