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.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height); 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; const cloudCount = 5;
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'; ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
@ -134,41 +134,22 @@ function renderSky() {
// Only the position is animated, not the shape // 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 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 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 // Use a deterministic seed for each cloud
// This ensures the cloud shape doesn't change every frame const seed = i * 1000;
const seed = i * 1000; // Different seed for each cloud
// Create a pixelated cloud shape // Just draw a few simple squares for each cloud
// Main cloud body (center) const squareCount = 8; // Fewer squares for simpler clouds
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
for (let j = 0; j < squareCount; j++) { for (let j = 0; j < squareCount; j++) {
// Use deterministic values based on j and seed // Use deterministic values for consistent cloud shapes
const angle = (j / squareCount) * Math.PI * 2; const offsetX = ((((j * seed) % 200) / 100) - 1) * 40;
const distance = cloudSize * 0.4; const offsetY = ((((j * seed + 50) % 200) / 100) - 1) * 20;
const offsetX = Math.cos(angle) * distance;
const offsetY = Math.sin(angle) * distance * 0.6; // Flatten vertically
// Size is deterministic based on position in the cloud // Vary square sizes
const squareSize = Math.floor(cloudSize * (0.15 + (((j * seed) % 100) / 1000))); const squareSize = 5 + ((j * seed) % 15);
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)));
// Draw a simple square
drawPixelSquare(cloudX + offsetX, cloudY + offsetY, squareSize); drawPixelSquare(cloudX + offsetX, cloudY + offsetY, squareSize);
} }
} }