Skip to content

Instantly share code, notes, and snippets.

@leemartin leemartin/Static.vue
Last active Aug 8, 2019

Embed
What would you like to do?
Vue Static Component
<template>
<canvas ref="canvas"></canvas>
</template>
<script>
export default{
methods: {
generateNoise() {
this.noise = document.createElement('canvas')
this.noise.height = window.innerHeight * 2
this.noise.width = window.innerWidth * 2
let noiseContext = this.noise.getContext('2d')
let noiseData = noiseContext.createImageData(this.noise.width, this.noise.height)
let buffer32 = new Uint32Array(noiseData.data.buffer)
let len = buffer32.length - 1
while (len--) {
buffer32[len] = Math.random() < 0.5 ? 0 : -1 >> 0
}
noiseContext.putImageData(noiseData, 0, 0)
},
moveNoise() {
let canvas = this.$refs.canvas
let context = canvas.getContext('2d')
let x = Math.random() * canvas.width
let y = Math.random() * canvas.height
context.clearRect(0, 0, canvas.width, canvas.height)
context.drawImage(this.noise, -x, -y)
requestAnimationFrame(this.moveNoise)
}
},
mounted() {
this.$refs.canvas.height = window.innerHeight
this.$refs.canvas.width = window.innerWidth
this.generateNoise()
requestAnimationFrame(this.moveNoise)
}
}
</script>
<style scoped>
canvas{
height: 100%;
left: 0;
mix-blend-mode: soft-light;
opacity: 0.25;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
z-index: 100000;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.