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

feat: Brighten sky, reduce cloud size, and remove color animation

Browse Source
This commit is contained in:
Kacper Kostka (aider) 2025-04-05 17:44:58 +02:00
parent d2a4927577
commit 853da1a61d
2 changed files with 15 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
js/main.js
View File

@ -7,13 +7,12 @@ let debugMode = false;
// Sky background variables // Sky background variables
const SKY_COLORS = [ const SKY_COLORS = [
'#1a2980', // Deep blue '#4a90e2', // Brighter blue
'#2980b9', // Medium blue '#74b9ff', // Light blue
'#6dd5fa', // Light blue '#81ecec', // Very light blue/cyan
'#2980b9', // Medium blue
]; ];
let skyAnimationTime = 0; let skyAnimationTime = 0;
let skyAnimationSpeed = 0.0005; // Controls how fast the sky animates let skyAnimationSpeed = 0.0005; // Controls how fast the sky position animates (not color)
// Initialize the simulation // Initialize the simulation
window.onload = function() { window.onload = function() {

30
js/render.js
View File

@ -66,7 +66,7 @@ function render() {
// Reset world moved flag after rendering // Reset world moved flag after rendering
worldMoved = false; worldMoved = false;
// Update sky animation // Update cloud position animation only (not colors)
skyAnimationTime += skyAnimationSpeed; skyAnimationTime += skyAnimationSpeed;
if (skyAnimationTime > 1) skyAnimationTime -= 1; if (skyAnimationTime > 1) skyAnimationTime -= 1;
@ -113,42 +113,34 @@ function render() {
// Render the animated sky background // Render the animated sky background
function renderSky() { function renderSky() {
// Create a gradient that cycles through sky colors // Create a gradient with fixed colors (no animation of colors)
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height); const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
// Calculate color indices based on animation time // Use fixed color positions for a brighter, static sky
const colorIndex1 = Math.floor(skyAnimationTime * SKY_COLORS.length) % SKY_COLORS.length; gradient.addColorStop(0, SKY_COLORS[0]);
const colorIndex2 = (colorIndex1 + 1) % SKY_COLORS.length; gradient.addColorStop(0.5, SKY_COLORS[1]);
const colorIndex3 = (colorIndex2 + 1) % SKY_COLORS.length; gradient.addColorStop(1, SKY_COLORS[2]);
// Calculate blend factor between colors
const blendFactor = (skyAnimationTime * SKY_COLORS.length) % 1;
// Add color stops to create a smooth transition
gradient.addColorStop(0, SKY_COLORS[colorIndex1]);
gradient.addColorStop(0.5, SKY_COLORS[colorIndex2]);
gradient.addColorStop(1, SKY_COLORS[colorIndex3]);
// Fill the background with the gradient // Fill the background with the gradient
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 (simple white circles with varying opacity) // Add some clouds (smaller white circles with varying opacity)
const cloudCount = 5; const cloudCount = 5;
ctx.fillStyle = 'rgba(255, 255, 255, 0.4)'; ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
for (let i = 0; i < cloudCount; i++) { for (let i = 0; i < cloudCount; i++) {
// Use animation time to move clouds slowly across the sky // 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 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 = 50 + (i % 3) * 30; const cloudSize = 30 + (i % 3) * 20; // Smaller cloud size
// Draw cloud (group of overlapping circles) // Draw cloud (group of overlapping smaller circles)
for (let j = 0; j < 5; j++) { for (let j = 0; j < 5; j++) {
const offsetX = (j % 3) * cloudSize * 0.3; const offsetX = (j % 3) * cloudSize * 0.3;
const offsetY = Math.floor(j / 3) * cloudSize * 0.2; const offsetY = Math.floor(j / 3) * cloudSize * 0.2;
ctx.beginPath(); ctx.beginPath();
ctx.arc(cloudX + offsetX, cloudY + offsetY, cloudSize * 0.5, 0, Math.PI * 2); ctx.arc(cloudX + offsetX, cloudY + offsetY, cloudSize * 0.3, 0, Math.PI * 2); // Smaller radius
ctx.fill(); ctx.fill();
} }
} }