diff --git a/js/render.js b/js/render.js index 7d76af1..c57ba4c 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 (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 - const squareCount = 8; // Fewer squares for simpler clouds + // Create larger clouds with more squares + 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 - 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 + // Use deterministic values for consistent cloud shapes but much more spread out + const offsetX = ((((j * seed) % 200) / 100) - 1) * 120; // Wider spread on X 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 noiseY = ((((j * seed + 321) % 100) / 100) - 0.5) * 20; + const noiseX = ((((j * seed + 123) % 100) / 100) - 0.5) * 40; + const noiseY = ((((j * seed + 321) % 100) / 100) - 0.5) * 25; - // Vary square sizes - const squareSize = 3 + ((j * seed) % 12); // Slightly smaller squares + // Vary square sizes more dramatically + 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