day night cycle

src/Background.vue

@@ -16,6 +16,10 @@ export default {
       redraw: null
     }
   },
+  watch: {
+    // x () { this.refresh() },
+    time () { this.refresh() }
+  },
   mounted () {
     const canvasSize = 512
     const godraysSize = 128
@@ -33,6 +37,15 @@ export default {
     this.refresh()
   },
   computed: {
+    /* time value to sun position conversion
+     *
+     * The time value rotates from 0 to 1000
+     * sunY convertes it to values between 0 and -100,
+     * while -100 is high sun position (aka day)
+     * and 0 is low (aka night).
+     * My adaption of Solar Quartet renders a static night sky from -30 upwards
+     * and a static day at -70 or lower
+     */
     sunY () {
       // time is between 0 and 1000
       const p = Math.PI / 1000
@@ -41,8 +54,9 @@ export default {
   },
   methods: {
     refresh () {
+      // console.time('draw background')
       this.redraw(this.x, this.sunY)
-      this.timeout = setTimeout(() => this.refresh(), 50)
+      // console.timeEnd('draw background')
     }
   }
 }

src/Field.vue

@@ -17,7 +17,7 @@
       </template>
     </div>
     <div id="player" :class="[player_direction]" />
-    <div id="level-indicator">x:{{ floorX }}, y:{{ floorY }} (@{{time}})</div>
+    <div id="level-indicator">x:{{ floorX }}, y:{{ floorY }} ({{clock}})</div>
   </div>
 </template>
 
@@ -45,7 +45,7 @@ export default {
       player_velocity_y: 9,
       gravity: 8.0 / 20,
       moving: false,
-      time: 600
+      time: 250
     }
   },
   mounted () {
@@ -84,19 +84,25 @@ export default {
 
       if (t >= 80 && t < 120) return "morning0"
       if (t >= 120 && t < 150) return "morning1"
-      if (t >= 150 && t < 250) return "morning2"
+      if (t >= 150 && t < 240) return "morning2"
 
       if (t >= 700 && t < 800) return "evening0"
       if (t >= 800 && t < 850) return "evening1"
       if (t >= 850 && t < 900) return "evening2"
 
       return "day"
+    },
+    clock () {
+      const t = this.time * 86.4 // 1000 ticks to 86400 seconds (per day)
+      const h = ~~(t / 3600.0)
+      const m = ~~((t / 3600.0 - h) * 60.0)
+      return `${(h + 2) % 24}:${m < 10 ? '0' : ''}${m}`
     }
   },
   methods: {
     move () {
       // set time of day in ticks
-      this.time = (this.time + 1) % 1000
+      this.time = (this.time + 0.1) % 1000
 
       const x = this.x
       const y = this.y

src/solar-quartet.js

@@ -4,7 +4,8 @@
  */
 
 // sunY sets the height of the sun and with this the time of the day
-// it should be an offset from the middle somewhere between -24 and 24
+// where 0 is lowest (night) and -100 is highest (day), other values are possible
+// but don't make much sense / difference
 export default function drawFrame (canvas, ctx, width, height, grCanvas, grCtx, grWidth, grHeight, frame, sunY) {
   // reset canvas state
   canvas.width = width
@@ -30,12 +31,15 @@ export default function drawFrame (canvas, ctx, width, height, grCanvas, grCtx,
   // If you're not space-bound you can add another stop or two, maybe fade out to black,
   // but this actually looks good enough.
 
-  emissionGradient.addColorStop(.1, '#0C0804') // pixels in radius 0 to 4.4 (44 * .1).
-  emissionGradient.addColorStop(.2, '#060201') // everything past radius 8.8.
-  /* TODO: NIGHT
-   * emissionGradient.addColorStop(.1, '#000') // pixels in radius 0 to 4.4 (44 * .1).
-   * emissionGradient.addColorStop(.2, '#000') // everything past radius 8.8.
-   */
+  // we use different gradients for different day times (sunY):
+  // > -25: night (black sky)
+  // < -70: day (blue sky)
+  // otherwise red (dawn / sunset)
+
+  if (sunY < -25 && sunY > -70) { // dawn or sunset
+    emissionGradient.addColorStop(.1, '#0C0804') // pixels in radius 0 to 4.4 (44 * .1).
+    emissionGradient.addColorStop(.2, '#060201') // everything past radius 8.8.
+  }
 
   // Now paint the gradient all over our godrays canvas.
   grCtx.fillRect(0, 0, grWidth, grHeight)
@@ -44,14 +48,17 @@ export default function drawFrame (canvas, ctx, width, height, grCanvas, grCtx,
   grCtx.fillStyle = '#000'
 
   // Paint the sky
-  // TODO: can this be used for day and night, too?
   const skyGradient = ctx.createLinearGradient(0, 0, 0, height)
-  skyGradient.addColorStop(0, '#2a3e55') // Blueish at the top.
-  skyGradient.addColorStop(.7, '#8d4835') // Reddish at the bottom.
-  /* TODO: NIGHT
-   * skyGradient.addColorStop(0, '#000') // Blueish at the top.
-   * skyGradient.addColorStop(.7, '#000') // Reddish at the bottom.
-   */
+  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
+    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)
 
@@ -68,10 +75,13 @@ export default function drawFrame (canvas, ctx, width, height, grCanvas, grCtx,
   for(let i = 0; i < 4; i++) {
     // Set the main canvas fillStyle to a shade of brown with variable lightness
     // (darker at the front)
-    ctx.fillStyle = `hsl(7, 23%, ${23-i*6}%)`;
-    /* TODO: NIGHT
-     * ctx.fillStyle = `hsl(5, 23%, ${4-i}%)`;
-     */
+    if (sunY > -25) { // night
+     ctx.fillStyle = `hsl(5, 23%, ${4-i}%)`
+    } else if (sunY < -70) { // day (TODO)
+      ctx.fillStyle = `hsl(${220 - i*40}, 23%, ${33-i*6}%)`
+    } else { // dawn / sunset
+      ctx.fillStyle = `hsl(7, 23%, ${23-i*6}%)`
+    }
 
     // For each column in our canvas...
     for(let x = width; x--;) {