feat: Enhance cloud rendering with more spread and noise

js/render.js

@@ -142,15 +142,19 @@ function renderSky() {
         const squareCount = 8; // Fewer squares for simpler clouds
         
         for (let j = 0; j < squareCount; j++) {
-            // Use deterministic values for consistent cloud shapes
-            const offsetX = ((((j * seed) % 200) / 100) - 1) * 40;
-            const offsetY = ((((j * seed + 50) % 200) / 100) - 1) * 20;
+            // Use deterministic values for consistent cloud shapes but more spread out
+            const offsetX = ((((j * seed) % 200) / 100) - 1) * 80; // Doubled spread on X axis
+            const offsetY = ((((j * seed + 50) % 200) / 100) - 1) * 40; // Doubled spread on Y axis
+            
+            // Add some additional noise to the position
+            const noiseX = ((((j * seed + 123) % 100) / 100) - 0.5) * 30;
+            const noiseY = ((((j * seed + 321) % 100) / 100) - 0.5) * 20;
             
             // Vary square sizes
-            const squareSize = 5 + ((j * seed) % 15);
+            const squareSize = 3 + ((j * seed) % 12); // Slightly smaller squares
             
-            // Draw a simple square
-            drawPixelSquare(cloudX + offsetX, cloudY + offsetY, squareSize);
+            // Draw a simple square with the noisy position
+            drawPixelSquare(cloudX + offsetX + noiseX, cloudY + offsetY + noiseY, squareSize);
         }
     }