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

feat: Enhance cloud rendering with more detailed, larger fluffy clouds

Browse Source
This commit is contained in:
Kacper Kostka (aider) 2025-04-05 17:46:22 +02:00
parent 853da1a61d
commit da895b11df
1 changed files with 34 additions and 7 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 (smaller white circles with varying opacity)
// Add some clouds (bigger clouds made of more, smaller circles)
const cloudCount = 5;
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
@ -133,14 +133,41 @@ function renderSky() {
// Use animation time to move clouds slowly across the sky
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 = 30 + (i % 3) * 20; // Smaller cloud size
const cloudSize = 40 + (i % 3) * 25; // Bigger overall cloud size
// Draw cloud (group of overlapping smaller circles)
for (let j = 0; j < 5; j++) {
const offsetX = (j % 3) * cloudSize * 0.3;
const offsetY = Math.floor(j / 3) * cloudSize * 0.2;
// Draw cloud (group of many overlapping smaller circles)
// Create a more complex cloud shape with more circles
const circleCount = 12; // More circles for more detail
// Main cloud body (center)
ctx.beginPath();
ctx.arc(cloudX, cloudY, cloudSize * 0.25, 0, Math.PI * 2);
ctx.fill();
// Surrounding smaller circles to create fluffy edges
for (let j = 0; j < circleCount; j++) {
// Calculate position around the main circle
const angle = (j / circleCount) * Math.PI * 2;
const distance = cloudSize * 0.4; // Distance from center
const offsetX = Math.cos(angle) * distance;
const offsetY = Math.sin(angle) * distance * 0.6; // Flatten vertically
// Vary the size of each circle
const circleSize = cloudSize * (0.15 + Math.random() * 0.1);
ctx.beginPath();
ctx.arc(cloudX + offsetX, cloudY + offsetY, cloudSize * 0.3, 0, Math.PI * 2); // Smaller radius
ctx.arc(cloudX + offsetX, cloudY + offsetY, circleSize, 0, Math.PI * 2);
ctx.fill();
}
// Add some random smaller circles for extra fluffiness
for (let j = 0; j < 8; j++) {
const offsetX = (Math.random() - 0.5) * cloudSize * 1.2;
const offsetY = (Math.random() - 0.5) * cloudSize * 0.6;
const circleSize = cloudSize * (0.1 + Math.random() * 0.1);
ctx.beginPath();
ctx.arc(cloudX + offsetX, cloudY + offsetY, circleSize, 0, Math.PI * 2);
ctx.fill();
}
}