first draft of gradient+trame background

src/components/MapBackground.vue

@@ -0,0 +1,136 @@
+<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;
+      
+      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;
+      
+      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 () {
+      let h = Math.floor(Math.random()*360);
+      let s = 40 + Math.floor(Math.random()*40);
+      let l = 40 + Math.floor(Math.random()*20);
+      let a = `${parseFloat(Math.random()*.9).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(125,125,125,0.8)";
+            ctx.fill();
+          }
+        }
+        
+      }
+      
+    }
+  }
+}
+
+</script>
+
+<template>
+  <canvas class="map-bg-canvas gradient" ref="canvas-background-gradient1"></canvas>
+  <canvas class="map-bg-canvas gradient" ref="canvas-background-gradient2"></canvas>
+  <canvas class="map-bg-canvas trame" ref="canvas-background-trame"></canvas>
+</template>
+
+<style lang="css" scoped>
+
+</style>

src/components/MapConcernements.vue

@@ -1,12 +1,14 @@
 <script>
 
+import Granim from 'granim'
 // import { mapActions, mapState } from 'pinia'
 import { computed } from 'vue'
 // import LoginBlock from '@components/block/LoginBlock.vue'
-// import UserTools from '@components/block/UserTools.vue'
+import MapBackground from '@components/MapBackground.vue'
 
 // import MA from '/api/ma-axios'
 
+
 // https://www.digitalocean.com/community/tutorials/vuejs-vue-html5-canvas
 
 export default {
@@ -16,7 +18,9 @@ export default {
         canvas: null,
         ctx: null
       },
-      animateEvent: new Event('animate')
+      animateEvent: new Event('animate'),
+      granim: null
+
     }
   },
   provide() {
@@ -45,16 +49,44 @@ export default {
     }
   },
   beforeUpdate () {
+  },
+  components: {
+    MapBackground
   }
 }
 
 </script>
 
 <template>
+  <div id="map-backgrounds">
+    <MapBackground />
+  </div>
   <div id="map-concernements">
     <canvas ref="canvas-map"></canvas>
     <slot></slot>
   </div>
+  <nav id="map-nav">
+    <ul>
+      <li>
+        <a href="#terraindevie">terrain de vie</a>
+      </li>
+      <li>
+        <a href="#proximite">proximité</a>
+      </li>
+      <li>
+        <a href="#superposition">superposition</a>
+      </li>
+      <li>
+        <a href="#puissancedagir">puissance d'agir</a>
+      </li>
+      <li>
+        <a href="#action">action</a>
+      </li>
+      <li>
+        <a href="#doleancer">doléancer</a>
+      </li>
+    </ul>
+  </nav>
 </template>
 
 <style lang="css" scoped>