ouatterrir-app/src/components/MapGranimBackground.vue

<script>

import Granim from 'granim'

export default {
  data() {
    return {
      granim1: null,
      granim2: null
    }
  },
  mounted() {
    this.initGradients()
    this.initTrame()
    window.addEventListener("resize", this.onWindowResize.bind(this));
  },
  // 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 = 25 + Math.floor(Math.random()*5);
      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');
      
      ctx.clearRect(0,0, canvasBackgroundTrame.width, canvasBackgroundTrame.height);

      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.6) {
            ctx.beginPath();
            // ctx.arc(i, j, 0.5, 0, 2 * Math.PI, false);
            ctx.rect(i, j, 1, 1);
            ctx.fillStyle = "rgba(0,0,0,0.1)";
            ctx.fill();
          }
        }
        
      }
      
    },
    onWindowResize () {
      this.initTrame()
    }
  }
}

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