You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

74 lines
1.6 KiB
Vue

<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>