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)

index.html

@@ -28,13 +28,6 @@
         <canvas></canvas>
 
         <div id="buttons_container">
-            <div class="niveau_profondeur">
-                <p class="selected" onclick="toggleProfondeur(this)">L'atlas</p>
-                <p onclick="toggleProfondeur(this)">Les cartes</p>
-            </div>
-            <button class="arrow" onclick="toggleMode('prev')">
-                <svg data-src="assets/pictos/arrow_back.svg" data-cache="disabled"></svg>
-            </button>
             <!-- svg pictos loadés avec svgloader  pour pouvoir les manipuler avec css -->
             <div class="mode active">
                 <svg data-src="assets/pictos/terrain-de-vie.svg" data-cache="disabled"></svg>
@@ -72,15 +65,10 @@
                     <p>Doléancer</p>
                 </div>
             </div>
-            <button class="arrow" onclick="toggleMode('next')">
-                <svg data-src="assets/pictos/arrow_forward.svg" data-cache="disabled"></svg>
-            </button>
-
-
         </div>
 
         <div id="global_nav">
-            <h1>Atlas des cartes vivantes</h1>
+            <h1><span>Atlas</span> des cartes vivantes</h1>
             <div id="menu">
                 <div id="search">
                   <input type="search" id="site-search" name="q" value="rechercher">

styles.css

@@ -74,60 +74,17 @@ body {
   align-items: center;
   margin: 1.5vh 1vw 2vh 1vw;
   font-size: 1rem;
-}
-#buttons_container .niveau_profondeur {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 100%;
-  margin-right: 30px;
-  width: 5vw;
-}
-#buttons_container .niveau_profondeur p {
-  font-weight: 300;
-  cursor: pointer;
-}
-#buttons_container .niveau_profondeur p.selected {
-  font-weight: 400;
-  text-decoration: underline;
-}
-#buttons_container .niveau_profondeur p:hover {
-  font-weight: 400;
-}
-#buttons_container .arrow {
-  margin-right: 14px;
-}
-#buttons_container .arrow svg {
-  height: 2rem;
-  width: auto;
-  fill: rgb(255, 255, 255);
-  stroke: rgb(0, 0, 0);
-  stroke-width: 0;
-  cursor: pointer;
-  margin-top: 4px;
-  transition: fill 0.3s ease-out;
-}
-#buttons_container .arrow svg:hover {
-  fill: rgb(110, 110, 110);
-}
-#buttons_container .arrow svg:active {
-  fill: rgb(50, 50, 50);
-}
-#buttons_container .arrow:last-of-type {
-  margin-right: 0;
-  margin-left: 14px;
+  mix-blend-mode: multiply;
+  flex-wrap: wrap;
 }
 #buttons_container .mode {
   display: flex;
   align-items: center;
   justify-content: space-around;
-  background-color: rgb(255, 255, 255);
   margin: 0;
   margin-right: 14px;
   padding: 10px 12px;
-  border-radius: 50px;
   cursor: pointer;
-  border: solid 0.8px rgb(110, 110, 110);
   color: rgba(0, 0, 0, 0.5);
   transition: border 0.1s ease-out, color 0.1s ease-out, padding 0.3s ease-out;
   font-weight: 300;
@@ -164,7 +121,6 @@ body {
 #buttons_container .mode.active {
   padding: 10px 12px !important;
   font-weight: 400;
-  border: solid 1.2px rgb(0, 0, 0);
   color: rgb(0, 0, 0);
 }
 #buttons_container .mode.active svg .thick {
@@ -185,7 +141,6 @@ body {
 #buttons_container .mode:hover {
   padding: 10px 12px !important;
   color: rgb(50, 50, 50);
-  border-color: rgb(50, 50, 50);
 }
 #buttons_container .mode:hover svg .thick, #buttons_container .mode:hover svg .thin {
   stroke: rgb(50, 50, 50);
@@ -219,9 +174,12 @@ body {
 }
 #global_nav h1 {
   font-family: "Ortica";
-  font-size: 1.7em;
+  font-size: 1.5em;
   margin: 0px 0px 17px 5px;
 }
+#global_nav h1 span {
+  font-size: 1.9em;
+}
 #global_nav #menu {
   display: flex;
   align-items: center;
@@ -267,20 +225,26 @@ body {
 }
 #global_nav #menu .menu_item {
   font-weight: 300;
+  color: rgb(110, 110, 110);
   display: flex;
   align-items: center;
   cursor: pointer;
   margin: 0 10px;
   padding-bottom: 2px;
+  transition: color 0.3s ease-out;
 }
 #global_nav #menu .menu_item svg {
   width: 1.3rem;
   height: 1.3rem;
   margin-right: 3px;
-  fill: rgb(0, 0, 0);
+  fill: rgb(110, 110, 110);
+  transition: fill 0.3s ease-out;
 }
 #global_nav #menu .menu_item:hover {
-  font-weight: 400;
+  color: rgb(50, 50, 50);
+}
+#global_nav #menu .menu_item:hover svg {
+  fill: rgb(50, 50, 50);
 }
 
 @media only screen and (max-width: 1440px) {

styles.scss

@@ -129,59 +129,16 @@ body {
     align-items: center;
     margin: $global_margins;
     font-size: $UI_main_font_size;
-    .niveau_profondeur {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        height: 100%;
-        margin-right: 30px;
-        width: 5vw;
-        p {
-            font-weight: 300;
-            cursor: pointer;
-        }
-        p.selected {
-            font-weight: 400;
-            text-decoration: underline;
-        }
-        p:hover {
-            font-weight: 400;
-        }
-    }
-    .arrow {
-        margin-right: $buttons_margin;
-        svg {
-            height: $large_picto_size;
-            width: auto;
-            fill: $bg_color;
-            stroke: $main_color;
-            stroke-width: 0;
-            cursor: pointer;
-            margin-top: 4px;
-            transition: fill $animation_style;
-        }
-        svg:hover {
-            fill: $grey_inactive;
-        }
-        svg:active {
-            fill: $grey_hover;
-        }
-    }
-    .arrow:last-of-type {
-        margin-right: 0;
-        margin-left: $buttons_margin;
-    }
+    mix-blend-mode: multiply;
+    flex-wrap: wrap;
     .mode {
         display: flex;
         align-items: center;
         justify-content: space-around;
-        background-color: $bg_color;
         margin: 0;
         margin-right: $buttons_margin;
         padding: $buttons_padding;
-        border-radius: 50px;
         cursor: pointer;
-        border: solid 0.8px $grey_inactive;
         color: rgba(0, 0, 0, 0.5);
         transition: border 0.1s ease-out, color 0.1s ease-out, padding $animation_style;
         font-weight: 300;
@@ -218,7 +175,6 @@ body {
     .mode.active {
         padding: $buttons_padding !important;
         font-weight: 400;
-        border: solid $buttons_border_width $main_color;
         color: $main_color;
         svg .thick {
             stroke-width: 1.2;
@@ -239,7 +195,6 @@ body {
     .mode:hover {
         padding: $buttons_padding !important;
         color: $grey_hover;
-        border-color: $grey_hover;
         svg .thick, svg .thin {
             stroke: $grey_hover;
         }
@@ -273,8 +228,11 @@ body {
     font-size: $UI_main_font_size;
     h1 {
         font-family: 'Ortica';
-        font-size: 1.7em;
+        font-size: 1.5em;
         margin: $main_title_margin;
+        span {
+            font-size: 1.9em;
+        }
     }
     #menu {
         display: flex;
@@ -320,20 +278,26 @@ body {
         }
         .menu_item {
             font-weight: 300;
+            color: $grey_inactive;
             display: flex;
             align-items: center;
             cursor: pointer;
             margin: 0 10px;
             padding-bottom: 2px;
+            transition: color $animation_style;
             svg {
                 width: $medium_picto_size;
                 height: $medium_picto_size;
                 margin-right: 3px;
-                fill: $main_color;
+                fill: $grey_inactive;;
+                transition: fill $animation_style;
             }
         }
         .menu_item:hover {
-            font-weight: 400;
+            color: $grey_hover;
+            svg {
+                fill: $grey_hover;
+            }
         }
     }
 }