feat: Enhance cloud rendering with larger, more spread-out groups of squares

js/render.js

@@ -125,7 +125,7 @@ function renderSky() {
     ctx.fillStyle = gradient;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
     
-    // Add some clouds (just a few random squares)
+    // Add some clouds (groups of random squares)
     const cloudCount = 5;
     ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
     
@@ -138,24 +138,42 @@ function renderSky() {
         // Use a deterministic seed for each cloud
         const seed = i * 1000;
         
-        // Just draw a few simple squares for each cloud
+        // Create larger clouds with more squares
-        const squareCount = 8; // Fewer squares for simpler clouds
+        const squareCount = 15 + (i % 5); // Between 15-19 squares per cloud
         
         for (let j = 0; j < squareCount; j++) {
-            // Use deterministic values for consistent cloud shapes but more spread out
+            // Use deterministic values for consistent cloud shapes but much more spread out
-            const offsetX = ((((j * seed) % 200) / 100) - 1) * 80; // Doubled spread on X axis
+            const offsetX = ((((j * seed) % 200) / 100) - 1) * 120; // Wider spread on X axis
-            const offsetY = ((((j * seed + 50) % 200) / 100) - 1) * 40; // Doubled spread on Y axis
+            const offsetY = ((((j * seed + 50) % 200) / 100) - 1) * 60; // Wider spread on Y axis
             
             // Add some additional noise to the position
-            const noiseX = ((((j * seed + 123) % 100) / 100) - 0.5) * 30;
+            const noiseX = ((((j * seed + 123) % 100) / 100) - 0.5) * 40;
-            const noiseY = ((((j * seed + 321) % 100) / 100) - 0.5) * 20;
+            const noiseY = ((((j * seed + 321) % 100) / 100) - 0.5) * 25;
             
-            // Vary square sizes
+            // Vary square sizes more dramatically
-            const squareSize = 3 + ((j * seed) % 12); // Slightly smaller squares
+            const squareSize = 4 + ((j * seed) % 15); // Larger squares
             
             // Draw a simple square with the noisy position
             drawPixelSquare(cloudX + offsetX + noiseX, cloudY + offsetY + noiseY, squareSize);
         }
+        
+        // Add a second layer of smaller squares for more density in the center
+        const centerSquareCount = 8 + (i % 3);
+        for (let j = 0; j < centerSquareCount; j++) {
+            // These squares will be more concentrated in the center
+            const offsetX = ((((j * seed + 789) % 200) / 100) - 1) * 60;
+            const offsetY = ((((j * seed + 456) % 200) / 100) - 1) * 30;
+            
+            // Less noise for center squares
+            const noiseX = ((((j * seed + 234) % 100) / 100) - 0.5) * 20;
+            const noiseY = ((((j * seed + 567) % 100) / 100) - 0.5) * 15;
+            
+            // Smaller squares for detail
+            const squareSize = 2 + ((j * seed + 111) % 8);
+            
+            // Draw the center detail squares
+            drawPixelSquare(cloudX + offsetX + noiseX, cloudY + offsetY + noiseY, squareSize);
+        }
     }
     
     // Helper function to draw a pixelated square