smooth sky color transition

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)