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

refactor: Simplify cloud rendering to use fewer random squares

Browse Source
This commit is contained in:
Kacper Kostka (aider) 2025-04-05 17:50:51 +02:00
parent 03b192ae0a
commit 288c4a8772
1 changed files with 11 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
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 (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);
}
}