kacperks/sandsim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Kacper Kostka (aider) 2025-04-05 17:53:55 +02:00
parent 724c5907a1
commit f0b00c3ccb
1 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
js/render.js
View File

@ -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