From 288c4a8772509b0eeba1de50133a618769c59175 Mon Sep 17 00:00:00 2001
From: "Kacper Kostka (aider)" <kacper.kostka08@gmail.com>
Date: Sat, 5 Apr 2025 17:50:51 +0200
Subject: [PATCH] refactor: Simplify cloud rendering to use fewer random
 squares

---
 js/render.js | 41 +++++++++++------------------------------
 1 file changed, 11 insertions(+), 30 deletions(-)

diff --git a/js/render.js b/js/render.js
index 31a410d..7ef863a 100644
--- a/js/render.js
+++ b/js/render.js
@@ -125,7 +125,7 @@ function renderSky() {
     ctx.fillStyle = gradient;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
     
-    // Add some clouds (made of pixel squares instead of circles)
+    // Add some clouds (just a few random squares)
     const cloudCount = 5;
     ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
     
@@ -134,41 +134,22 @@ function renderSky() {
         // Only the position is animated, not the shape
         const cloudX = ((i * canvas.width / cloudCount) + (skyAnimationTime * canvas.width * 2)) % (canvas.width * 1.5) - canvas.width * 0.25;
         const cloudY = canvas.height * (0.1 + (i % 3) * 0.1);
-        const cloudSize = 40 + (i % 3) * 25; // Overall cloud size
         
-        // Use a deterministic pattern for each cloud based on its index
-        // This ensures the cloud shape doesn't change every frame
-        const seed = i * 1000; // Different seed for each cloud
+        // Use a deterministic seed for each cloud
+        const seed = i * 1000;
         
-        // Create a pixelated cloud shape
-        // Main cloud body (center)
-        const centerSize = Math.floor(cloudSize * 0.25);
-        drawPixelSquare(cloudX, cloudY, centerSize);
-        
-        // Create a pixelated cloud pattern with squares
-        // Use fixed positions based on cloud index instead of random values
-        const squareCount = 24; // More squares for more detail
+        // Just draw a few simple squares for each cloud
+        const squareCount = 8; // Fewer squares for simpler clouds
         
         for (let j = 0; j < squareCount; j++) {
-            // Use deterministic values based on j and seed
-            const angle = (j / squareCount) * Math.PI * 2;
-            const distance = cloudSize * 0.4;
-            const offsetX = Math.cos(angle) * distance;
-            const offsetY = Math.sin(angle) * distance * 0.6; // Flatten vertically
+            // Use deterministic values for consistent cloud shapes
+            const offsetX = ((((j * seed) % 200) / 100) - 1) * 40;
+            const offsetY = ((((j * seed + 50) % 200) / 100) - 1) * 20;
             
-            // Size is deterministic based on position in the cloud
-            const squareSize = Math.floor(cloudSize * (0.15 + (((j * seed) % 100) / 1000)));
-            
-            drawPixelSquare(cloudX + offsetX, cloudY + offsetY, squareSize);
-        }
-        
-        // Add some additional squares for extra fluffiness
-        for (let j = 0; j < 12; j++) {
-            // Use deterministic offsets based on j and seed
-            const offsetX = ((((j * seed) % 200) / 100) - 1) * cloudSize * 0.8;
-            const offsetY = ((((j * seed + 50) % 200) / 100) - 1) * cloudSize * 0.4;
-            const squareSize = Math.floor(cloudSize * (0.1 + (((j * seed + 100) % 100) / 1000)));
+            // Vary square sizes
+            const squareSize = 5 + ((j * seed) % 15);
             
+            // Draw a simple square
             drawPixelSquare(cloudX + offsetX, cloudY + offsetY, squareSize);
         }
     }