nettoyage du menu, ajout du grain

background.js

@@ -56,53 +56,23 @@ function toggleProfondeur(el) {
     }
 }
 
-// onclick sur les flèches du menu
-function toggleMode(direction) {
-    let modes = [];
-    let currentIndex;
-    document.querySelectorAll('.mode').forEach(function(node, index) {
-        modes.push(node);
-        if (node.classList.contains("active")) {
-            currentIndex = index;
-            node.classList.remove("active");
-            if (currentProfondeur == "carte") {
-                node.classList.add("collapsed");
-            }
-        }
-    });
-    if (direction == "next" && currentIndex + 2 <= modeAmount) {
-        modes[currentIndex + 1].classList.add('active');
-        curentMode = curentMode + 1;
-        changeColors(1);
-    } else if (direction == "prev" && currentIndex - 1 >= 0) {
-        modes[currentIndex - 1].classList.add('active');
-        curentMode = curentMode - 1;
-        changeColors(-1);
-    } else if (direction == "next" && currentIndex + 1 == modeAmount) {
-        modes[0].classList.add('active');
-        curentMode = 1;
-        changeColors(-modeAmount + 1);
-    } else if (direction == "prev" && currentIndex == 0) {
-        modes[modeAmount - 1].classList.add('active');
-        curentMode = modeAmount;
-        changeColors(modeAmount - 1);
-    }
-}
-
-
 function changeColors(diffAmount) {
-    let prevPaletteIndex = (prevMode + (prevMode - 1));
+    let prevPaletteIndex = (prevMode + (prevMode - 1)); // cf commentaire palette à la fin
     let baseColors = [];
-    baseColors.push(colorPalette[prevPaletteIndex - 1]);
-    baseColors.push(colorPalette[prevPaletteIndex]);
-    baseColors.push(colorPalette[prevPaletteIndex + 1] ? colorPalette[prevPaletteIndex + 1] : colorPalette[0]);
+    baseColors.push(
+        colorPalette[prevPaletteIndex - 1],
+        colorPalette[prevPaletteIndex],
+        colorPalette[prevPaletteIndex + 1] ? colorPalette[prevPaletteIndex + 1] : colorPalette[0]
+    );
     
     let paletteIndex = (curentMode + (curentMode - 1));
     let targetColors = [];
     
-    targetColors.push(colorPalette[paletteIndex - 1]);
-    targetColors.push(colorPalette[paletteIndex]);
-    targetColors.push(colorPalette[paletteIndex + 1 ] ? colorPalette[paletteIndex + 1] : colorPalette[0]);
+    targetColors.push(
+        colorPalette[paletteIndex - 1],
+        colorPalette[paletteIndex],
+        colorPalette[paletteIndex + 1 ] ? colorPalette[paletteIndex + 1] : colorPalette[0]
+    );
 
     function hexToRgba(color) {
         let colorRgba = {
@@ -154,7 +124,6 @@ function changeColors(diffAmount) {
     animate()
 
     function getTransitionColor(baseColor, targetColor, currentFrame) {
-        console.log(baseColor, targetColor, currentFrame)
         let rgbaBase = hexToRgba(baseColor),
             rgbaTarget = hexToRgba(targetColor),
             diff = {
@@ -204,6 +173,7 @@ currentColors.push(
     colorPalette[2],
 );
 
+
 class GradientAnimation {
     constructor() {
         this.cnv = document.querySelector('canvas');
@@ -211,12 +181,23 @@ class GradientAnimation {
 
         // réglages du fond
         this.radius = 1800;
-        this.speed = 0.001;
+        this.speed = 0.01;
+
+        // variables du grain
+        this.patternSize = 512;
+        this.patternAlpha = 10; // int between 0 and 255,
+        
+        this.patternPixelDataLength = this.patternSize * this.patternSize * 4;
+        this.patternCanvas;
+        this.patternCtx;
+        this.patternData;
+        this.frame = 0;  
 
         (window.onresize = () => {
             this.setCanvasSize();
             this.createCircles();
         })();
+        this.initGrain();
         this.drawAnimation();
     }
     setCanvasSize() {
@@ -238,9 +219,35 @@ class GradientAnimation {
         this.ctx.fillStyle = "#aaaaaa";
         this.ctx.fillRect(0, 0, this.w, this.h);
     }
+    initGrain() {
+        let patternSize = 128; // ça marche pas this.patternSize
+
+        this.patternCanvas = document.createElement('canvas');
+        this.patternCanvas.width = patternSize;
+        this.patternCanvas.height = patternSize;
+        this.patternCtx = this.patternCanvas.getContext('2d');
+        this.patternData = this.patternCtx.createImageData(patternSize, patternSize);   
+        
+        let value;
+            
+        for (let i = 0; i < this.patternPixelDataLength; i += 4) {
+            value = (Math.random() * 255) | 0;
+            
+            this.patternData.data[i    ] = value;
+            this.patternData.data[i + 1] = value;
+            this.patternData.data[i + 2] = value;
+            this.patternData.data[i + 3] = this.patternAlpha;
+        }
+        
+        this.patternCtx.putImageData(this.patternData, 0, 0);
+    }
     drawAnimation() {
         this.drawBackground();
         this.drawCircles();
+        
+        this.ctx.fillStyle = this.ctx.createPattern(this.patternCanvas, 'repeat');
+        this.ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);    
+    
         window.requestAnimationFrame(() => this.drawAnimation());
     }
 }
@@ -263,7 +270,6 @@ class Circle {
         gradient.addColorStop(0, "#" + currentColors[this.index]);
         gradient.addColorStop(1, this.secondColor);
         
-        ctx.globalCompositionOperation = "multiply"; // ça marche pas
         ctx.fillStyle = gradient;
         ctx.beginPath();
         ctx.arc(x, y, this.radius, 0, Math.PI * 2);
@@ -309,4 +315,5 @@ window.onload = () => {
 11        #fffdba 100% */
 
 
-// 1 1, 2 3, 3 5, 4 7, 5 9, 6 11
+// 1 1, 2 3, 3 5, 4 7, 5 9, 6 11
+// curentMode + (curentMode - 1)