diff --git a/src/solar-quartet.js b/src/solar-quartet.js index 7bbd07a..319eb9b 100644 --- a/src/solar-quartet.js +++ b/src/solar-quartet.js @@ -49,16 +49,19 @@ export default function drawFrame (canvas, ctx, width, height, grCanvas, grCtx, // Paint the sky const skyGradient = ctx.createLinearGradient(0, 0, 0, height) - if (sunY > -25) { // night - skyGradient.addColorStop(0, '#001') // slight blue hue - skyGradient.addColorStop(.7, '#004') // but mainly black - } else if (sunY < -70) { // day - skyGradient.addColorStop(0, '#79F') // blue with a light gradient - skyGradient.addColorStop(.7, '#33A') // into more blue - } else { // dawn / sunset + const skyHue = 360 + sunY + const skySaturation = 100 + sunY + const skyLightness = Math.min(sunY * -1 - 10, 55) + const skyHSLTop = `hsl(220, 70%, ${skyLightness}%)` + const skyHSLBottom = `hsl(${skyHue}, ${skySaturation}%, ${skyLightness}%)` + skyGradient.addColorStop(0, skyHSLTop) + skyGradient.addColorStop(.7, skyHSLBottom) + + /* skyGradient.addColorStop(0, '#2a3e55') // Blueish at the top. skyGradient.addColorStop(.7, '#8d4835') // Reddish at the bottom. } + */ ctx.fillStyle = skyGradient ctx.fillRect(0, 0, width, height) @@ -73,8 +76,8 @@ export default function drawFrame (canvas, ctx, width, height, grCanvas, grCtx, // Draw 4 layers of mountains. for(let i = 0; i < 4; i++) { - // Set the main canvas fillStyle to a shade of brown with variable lightness - // (darker at the front) + // Set the main canvas fillStyle to a shade of green-brown with variable lightness + // depending on sunY and depth if (sunY > -25) { // night ctx.fillStyle = `hsl(5, 23%, ${4-i}%)` } else if (sunY < -70) { // day (TODO)