From da895b11dfeafb0d7f4fd44f4e64462fe8a4d65e Mon Sep 17 00:00:00 2001
From: "Kacper Kostka (aider)" <kacper.kostka08@gmail.com>
Date: Sat, 5 Apr 2025 17:46:22 +0200
Subject: [PATCH] feat: Enhance cloud rendering with more detailed, larger
 fluffy clouds

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

diff --git a/js/render.js b/js/render.js
index 9257c3a..3b269e0 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 (smaller white circles with varying opacity)
+    // Add some clouds (bigger clouds made of more, smaller circles)
     const cloudCount = 5;
     ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
     
@@ -133,14 +133,41 @@ function renderSky() {
         // Use animation time to move clouds slowly across the sky
         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 = 30 + (i % 3) * 20; // Smaller cloud size
+        const cloudSize = 40 + (i % 3) * 25; // Bigger overall cloud size
         
-        // Draw cloud (group of overlapping smaller circles)
-        for (let j = 0; j < 5; j++) {
-            const offsetX = (j % 3) * cloudSize * 0.3;
-            const offsetY = Math.floor(j / 3) * cloudSize * 0.2;
+        // Draw cloud (group of many overlapping smaller circles)
+        // Create a more complex cloud shape with more circles
+        const circleCount = 12; // More circles for more detail
+        
+        // Main cloud body (center)
+        ctx.beginPath();
+        ctx.arc(cloudX, cloudY, cloudSize * 0.25, 0, Math.PI * 2);
+        ctx.fill();
+        
+        // Surrounding smaller circles to create fluffy edges
+        for (let j = 0; j < circleCount; j++) {
+            // Calculate position around the main circle
+            const angle = (j / circleCount) * Math.PI * 2;
+            const distance = cloudSize * 0.4; // Distance from center
+            const offsetX = Math.cos(angle) * distance;
+            const offsetY = Math.sin(angle) * distance * 0.6; // Flatten vertically
+            
+            // Vary the size of each circle
+            const circleSize = cloudSize * (0.15 + Math.random() * 0.1);
+            
             ctx.beginPath();
-            ctx.arc(cloudX + offsetX, cloudY + offsetY, cloudSize * 0.3, 0, Math.PI * 2); // Smaller radius
+            ctx.arc(cloudX + offsetX, cloudY + offsetY, circleSize, 0, Math.PI * 2);
+            ctx.fill();
+        }
+        
+        // Add some random smaller circles for extra fluffiness
+        for (let j = 0; j < 8; j++) {
+            const offsetX = (Math.random() - 0.5) * cloudSize * 1.2;
+            const offsetY = (Math.random() - 0.5) * cloudSize * 0.6;
+            const circleSize = cloudSize * (0.1 + Math.random() * 0.1);
+            
+            ctx.beginPath();
+            ctx.arc(cloudX + offsetX, cloudY + offsetY, circleSize, 0, Math.PI * 2);
             ctx.fill();
         }
     }