~koehr/dig

ref: 7c6e716875a9f22c2085b234f19e0346982dcdea dig/src/Background.vue -rw-r--r-- 1.6 KiB
7c6e7168 — koehr calculates CSS values from constants and simplifies movement calculation 2 years ago
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<template>
  <canvas ref="canvas" id="background"></canvas>
</template>

<script>
import solarQuartet from './solar-quartet'

export default {
  name: 'background',
  props: {
    x: Number,
    time: Number
  },
  data () {
    return {
      redraw: null
    }
  },
  watch: {
    // x () { this.refresh() },
    time () { this.refresh() }
  },
  mounted () {
    const canvasSize = 512
    const godraysSize = 128
    const canvas = this.$refs.canvas
    const godraysCanvas = document.createElement('canvas')
    canvas.width = canvasSize
    canvas.height = canvasSize
    godraysCanvas.width = godraysSize
    godraysCanvas.height = godraysSize
    this.redraw = solarQuartet.bind(
      null,
      canvas, canvas.getContext('2d'), canvasSize, canvasSize,
      godraysCanvas, godraysCanvas.getContext('2d'), godraysSize, godraysSize,
    )
    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
      return Math.sin(this.time * p) * -100
    }
  },
  methods: {
    refresh () {
      // console.time('draw background')
      this.redraw(this.x, this.sunY)
      // console.timeEnd('draw background')
    }
  }
}
</script>

<style>
#background {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: black;
}
</style>