147 lines
4.5 KiB
Vue
147 lines
4.5 KiB
Vue
<script>
|
|
|
|
import Granim from 'granim'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
granim1: null,
|
|
granim2: null
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initGradients()
|
|
this.initTrame()
|
|
},
|
|
// computed: {
|
|
// },
|
|
// created () {
|
|
// },
|
|
methods: {
|
|
initGradients () {
|
|
let canvasBackground1 = this.$refs['canvas-background-gradient1'];
|
|
canvasBackground1.width = canvasBackground1.parentElement.clientWidth;
|
|
canvasBackground1.height = canvasBackground1.parentElement.clientHeight;
|
|
this.granim1 = this.createGranim(canvasBackground1, 1)
|
|
|
|
let canvasBackground2 = this.$refs['canvas-background-gradient2'];
|
|
canvasBackground2.width = canvasBackground2.parentElement.clientWidth;
|
|
canvasBackground2.height = canvasBackground2.parentElement.clientHeight;
|
|
this.granim2 = this.createGranim(canvasBackground2, 2)
|
|
|
|
},
|
|
createGranim(canvas, direction){
|
|
|
|
let gradients = [];
|
|
let num_colors = Math.floor(2 + Math.random()*2);
|
|
for (let i = 0; i < Math.floor(2 + Math.random()*4); i++) {
|
|
let colors = [];
|
|
// let hue = Math.floor(Math.random()*360)
|
|
for (let j = 0; j < num_colors; j++) {
|
|
let pos = 1/num_colors*j + 1/num_colors/3 + Math.random()*1/num_colors/3
|
|
colors.push({
|
|
color: this.getRandBGColor(),
|
|
// pos: parseFloat(`${parseFloat(Math.random()).toFixed(2)}`.slice(1))
|
|
pos: parseFloat(`${parseFloat(pos).toFixed(2)}`.slice(1))
|
|
})
|
|
}
|
|
// colors.sort((a,b) => {
|
|
// return a.pos > b.pos ? 1 : -1
|
|
// })
|
|
gradients.push(colors)
|
|
}
|
|
console.log(gradients);
|
|
let custDir;
|
|
// switch (direction) {
|
|
// case 1:
|
|
// custDir = {
|
|
// x0: `${Math.random() * canvas.width}px`,
|
|
// y0: `-100px`,
|
|
// x1: `${Math.random() * canvas.width}px`,
|
|
// y1: `${canvas.height + 100}px`
|
|
// }
|
|
// break;
|
|
// case 2:
|
|
// custDir = {
|
|
// x0: `-100px`,
|
|
// y0: `${Math.random() * canvas.height}px`,
|
|
// x1: `${canvas.width + 100}px`,
|
|
// y1: `${Math.random() * canvas.height}px`
|
|
// }
|
|
// break;
|
|
// }
|
|
switch (direction) {
|
|
case 1:
|
|
custDir = {
|
|
x0: `${Math.random() * canvas.width/3}px`,
|
|
y0: `-100px`,
|
|
x1: `${canvas.width/3*2 + Math.random() * canvas.width/3}px`,
|
|
y1: `${canvas.height + 100}px`
|
|
}
|
|
break;
|
|
case 2:
|
|
custDir = {
|
|
x0: `${canvas.width/3*2 + Math.random() * canvas.width/3}px`,
|
|
y0: `-100px`,
|
|
x1: `${Math.random() * canvas.width/3}px`,
|
|
y1: `${canvas.height + 100}px`
|
|
}
|
|
break;
|
|
}
|
|
return new Granim({
|
|
element: canvas,
|
|
direction: 'custom',
|
|
customDirection: custDir,
|
|
isPausedWhenNotInView: true,
|
|
states : {
|
|
"default-state": {
|
|
gradients: gradients,
|
|
transitionSpeed: 20000 + Math.random() * 20000
|
|
}
|
|
},
|
|
})
|
|
},
|
|
getRandBGColor (hue) {
|
|
let h = !hue ? Math.floor(Math.random()*360) : hue + -30 + Math.floor(Math.random()*60);
|
|
let s = 40 + Math.floor(Math.random()*20);
|
|
let l = 40 + Math.floor(Math.random()*10);
|
|
let a = `${parseFloat(0.2 + Math.random()*.4).toFixed(3)}`.slice(1);
|
|
let hsla = `hsla(${h}, ${s}%, ${l}%, ${a})`;
|
|
// console.log(hsla);
|
|
return hsla;
|
|
},
|
|
initTrame () {
|
|
let canvasBackgroundTrame = this.$refs['canvas-background-trame'];
|
|
canvasBackgroundTrame.width = canvasBackgroundTrame.parentElement.clientWidth;
|
|
canvasBackgroundTrame.height = canvasBackgroundTrame.parentElement.clientHeight;
|
|
let ctx = canvasBackgroundTrame.getContext('2d');
|
|
|
|
let step = 1;
|
|
for (let i = 0; i < parseInt(canvasBackgroundTrame.width); i+=step) {
|
|
for (let j = 0; j < parseInt(canvasBackgroundTrame.height); j+=step) {
|
|
if (Math.random() > 0.95) {
|
|
ctx.beginPath();
|
|
ctx.arc(i, j, 0.5, 0, 2 * Math.PI, false);
|
|
ctx.fillStyle = "rgba(200,200,200,0.7)";
|
|
ctx.fill();
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<canvas class="map-bg-canvas gradient" ref="canvas-background-gradient1"></canvas>
|
|
<canvas class="map-bg-canvas trame" ref="canvas-background-trame"></canvas>
|
|
<canvas class="map-bg-canvas gradient" ref="canvas-background-gradient2"></canvas>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
|
|
</style>
|