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

refactor: Remove cloud rendering from sky function

Browse Source
This commit is contained in:
Kacper Kostka (aider) 2025-04-05 17:54:50 +02:00
parent f0b00c3ccb
commit d86baa8f99
1 changed files with 0 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
js/render.js
View File

@ -125,72 +125,6 @@ function renderSky() {
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Add some clouds (groups of random squares)
const cloudCount = 5;
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
for (let i = 0; i < cloudCount; i++) {
// Use animation time to move clouds slowly across the sky
// 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);
// Use a deterministic seed for each cloud
const seed = i * 1000;
// 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 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) * 40;
const noiseY = ((((j * seed + 321) % 100) / 100) - 0.5) * 25;
// 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
function drawPixelSquare(x, y, size) {
// Round to nearest pixel to avoid sub-pixel rendering
const pixelX = Math.round(x);
const pixelY = Math.round(y);
const pixelSize = Math.max(1, Math.round(size));
ctx.fillRect(
pixelX - Math.floor(pixelSize/2),
pixelY - Math.floor(pixelSize/2),
pixelSize,
pixelSize
);
}
// Add a subtle horizon line to separate sky from world
const horizonGradient = ctx.createLinearGradient(0, canvas.height * 0.4, 0, canvas.height * 0.6);
horizonGradient.addColorStop(0, 'rgba(255, 255, 255, 0)');