background gradients refactoring

src/assets/main.scss

@@ -6,7 +6,7 @@
 @import "./fonts/snap_it/snap_it.css";
 
 body{
-  background-color: $back;
+  // background-color: $back;
 }
 
 #app{
@@ -38,8 +38,12 @@ body{
 
   #map-backgrounds{
     .map-bg-canvas{
-      mix-blend-mode: multiply;
+      &.trame{
+        mix-blend-mode: multiply;
+        // display:none;
+      }
     }
+    
   }
 
   #map-concernements{

src/components/ConcernementMapItem.vue

@@ -26,7 +26,7 @@ export default {
   },
   props: ['concernement'],
   created () {
-    console.log("ConcernementsMapItem concernement", this.concernement);
+    // console.log("ConcernementsMapItem concernement", this.concernement);
     this.entites = this.concernement.entites
     this.parsePoints()
     this.getSalientPoints()
@@ -52,7 +52,7 @@ export default {
     parsePoints (){
       for (let i = 0; i < this.entites.length; i++) {
         let entite = this.entites[i]
-        console.log('entite', entite);
+        // console.log('entite', entite);
         
         this.entites[i].display = {
           alpha: null,
@@ -109,7 +109,7 @@ export default {
           this.salientPoints.push(farest.display)
         }
       }
-      console.log('this.salientPoints', this.salientPoints);
+      // console.log('this.salientPoints', this.salientPoints);
     },
     animate () {
       if (this.ctx) {
@@ -163,11 +163,13 @@ export default {
       this.ctx.beginPath();
       this.ctx.lineWidth = 1;
       this.ctx.strokeStyle = "#000";
+      this.ctx.fillStyle = "rgba(255,255,255,0.4)";
       this.ctx.moveTo(this.pos.x+this.salientPoints[0].pos.x, this.pos.y+this.salientPoints[0].pos.y)
       for (let j = 1; j < this.salientPoints.length; j++) {
         this.ctx.lineTo(this.pos.x+this.salientPoints[j].pos.x, this.pos.y+this.salientPoints[j].pos.y)
       }
       this.ctx.lineTo(this.pos.x+this.salientPoints[0].pos.x, this.pos.y+this.salientPoints[0].pos.y)
+      this.ctx.fill();
       this.ctx.stroke();
     }
   },

src/components/MapBackground.vue

@@ -22,82 +22,74 @@ export default {
       let canvasBackground1 = this.$refs['canvas-background-gradient1'];
       canvasBackground1.width = canvasBackground1.parentElement.clientWidth;
       canvasBackground1.height = canvasBackground1.parentElement.clientHeight;
-      
+      this.granim1 = this.createGranim(canvasBackground1, 1)
-      let gradients1 = [
-        [
-          { color: this.getRandBGColor(), pos: .2 },
-          { color: this.getRandBGColor(), pos: .8 },
-          { color: this.getRandBGColor(), pos: 1 }
-        ], [
-          { color: this.getRandBGColor(), pos: 0 },
-          { color: this.getRandBGColor(), pos: .2 },
-          { color: this.getRandBGColor(), pos: .75 }
-        ],
-      ];
-      console.log(gradients1);
-
-      this.granim1 = new Granim({
-        element: canvasBackground1,
-        direction: 'custom',
-        customDirection: {
-          x0: `${Math.random() * canvasBackground1.width}px`,
-          y0: `-100px`,
-          x1: `${Math.random() * canvasBackground1.width}px`,
-          y1: `${canvasBackground1.height + 100}px`
-        },
-        isPausedWhenNotInView: true,
-        states : {
-          "default-state": {
-            gradients: gradients1,
-            transitionSpeed: 20000
-          }
-        },
-        stateTransitionSpeed : 50000
-      })
 
       let canvasBackground2 = this.$refs['canvas-background-gradient2'];
       canvasBackground2.width = canvasBackground2.parentElement.clientWidth;
       canvasBackground2.height = canvasBackground2.parentElement.clientHeight;
-      
+      this.granim2 = this.createGranim(canvasBackground2, 2)
-      let gradients2 = [
-        [
-          { color: this.getRandBGColor(), pos: .2 },
-          { color: this.getRandBGColor(), pos: .8 },
-          { color: this.getRandBGColor(), pos: 1 }
-        ], [
-          { color: this.getRandBGColor(), pos: 0 },
-          { color: this.getRandBGColor(), pos: .2 },
-          { color: this.getRandBGColor(), pos: .75 }
-        ],
-      ];
-      console.log(gradients2);
-
-      this.granim2 = new Granim({
-        element: canvasBackground2,
-        customDirection: {
-          x0: `-100px`,
-          y0: `${Math.random() * canvasBackground2.height}px`,
-          x1: `${canvasBackground2.width + 100}px`,
-          y1: `${Math.random() * canvasBackground2.height}px`
-        },
-        isPausedWhenNotInView: true,
-        states : {
-            "default-state": {
-                gradients: gradients2,
-                transitionSpeed: 20000
-            }
-        },
-        stateTransitionSpeed : 50000
-      })
 
     },
-    getRandBGColor () {
+    createGranim(canvas, direction){
-      let h = Math.floor(Math.random()*360);
+
-      let s = 40 + Math.floor(Math.random()*40);
+      let gradients = [];
-      let l = 40 + Math.floor(Math.random()*20);
+      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;
+      }
+      return new Granim({
+        element: canvas,
+        direction: 'custom',
+        customDirection: custDir,
+        isPausedWhenNotInView: true,
+        states : {
+          "default-state": {
+            gradients: gradients,
+            transitionSpeed: 60000
+          }
+        },
+      })
+    },
+    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(Math.random()*.9).toFixed(3)}`.slice(1);
       let hsla = `hsla(${h}, ${s}%, ${l}%, ${a})`;
-      console.log(hsla);
+      // console.log(hsla);
       return hsla;
     },
     initTrame () {