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.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AA2CA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAMJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA,OA5DS;EA6DT;;;AAMJ;EACI,SAjFa;EAkFb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;;AAIR;EACI,MAvFG;AAwFH;EACA;EACA;;AAGJ;EACI;EACA;EACA,QAjGK;EAkGL;;;AAKR;EACI;EACA;EACA;EACA;EACA;EACA;EACA,QA3Ha;EA4Hb,WA1GgB;;AA2GhB;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGR;EACI,cA1IS;;AA2IT;EACI,QAhIO;EAiIP;EACA,MAvID;EAwIC,QAzIC;EA0ID;EACA;EACA;EACA;;AAEJ;EACI,MA9II;;AAgJR;EACI,MAhJC;;AAmJT;EACI;EACA,aA9JS;;AAgKb;EACI;EACA;EACA;EACA,kBA7JG;EA8JH;EACA,cAtKS;EAuKT,SA1KU;EA2KV;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,QAnKO;;AAoKP;EACI;EACA;EACA,QA3KA;;AA6KJ;EACI;EACA;EACA,QAhLA;;AAkLJ;EACE,MAnLE;;AAsLR;EACI;EACA;EACA;EACA;EACA,QApMW;EAqMX;;AACA;EACI;EACA;EACA;;AAIZ;EACI;EACA;EACA;EACA,OA1MK;;AA2ML;EACI;EACA,QA7MC;;AA+ML;EACI;EACA,QAjNC;;AAmNL;EACE,MApNG;;AAsNL;EACI;EACA;;AAGR;EACI;EACA,OA1NK;EA2NL,cA3NK;;AA4NL;EACI,QA7NC;;AA+NL;EACI,MAhOC;;AAkOL;EACI;EACA;;AAGR;EACI,SAnPoB;;AAoPpB;EACI;EACA;EACA;;AAGR;EACI;;;AAIR;EACI;EACA;EACA;EACA,QAxQa;EAyQb;EACA,WAxPgB;;AAyPhB;EACI;EACA;EACA,QArQY;;AAuQhB;EACI;EACA;;AACA;EACI;EACA;;AACA;EACI,QA7QI;EA8QJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAjRA;EAkRA,kBAnRL;EAoRK;;AAEJ;EACI,OArRH;;AAuRD;EACI,OA3RH;;AA6RD;EACI;EACA;EACA;;AACA;EACI;EACA,aArSC;EAsSD,QA7RA;EA8RA,MAnSJ;EAoSI;;AAEJ;EACI,MAtSP;;AA0SL;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,OA9SI;EA+SJ,QA/SI;EAgTJ;EACA,MAxTH;;AA2TL;EACI;;;AASZ;EACI;IACI,WApTgB;;EAuThB;IACI,QAvTW;;EAyTf;IACI,SAnUU;;EAoUV;IACI,QA5TO;;EA8TX;IACI,QAtUW;;EAyUnB;IACI;;EACA;IACI;;EAGR;IACI;;EACA;IACI;;EAGR;IACI,SAvVoB;;EA2VxB;IACI,QAzVY;;EA6VR;IACI,QA7VI;IA8VJ,WA3VI;;EA8VJ;IACI,aAjWC;IAkWD,OA9VA;;EAmWR;IACI,OApWI;IAqWJ,QArWI","file":"styles.css"}
+{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AA2CA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAMJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA,OA5DS;EA6DT;;;AAMJ;EACI,SAjFa;EAkFb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;;AAIR;EACI,MAvFG;AAwFH;EACA;EACA;;AAGJ;EACI;EACA;EACA,QAjGK;EAkGL;;;AAKR;EACI;EACA;EACA;EACA;EACA;EACA;EACA,QA3Ha;EA4Hb,WA1GgB;EA2GhB;EACA;;AACA;EACI;EACA;EACA;EACA;EACA,cA7HS;EA8HT,SAjIU;EAkIV;EACA;EACA;EACA;;AACA;EACI,QAxHO;;AAyHP;EACI;EACA;EACA,QAhIA;;AAkIJ;EACI;EACA;EACA,QArIA;;AAuIJ;EACE,MAxIE;;AA2IR;EACI;EACA;EACA;EACA;EACA,QAzJW;EA0JX;;AACA;EACI;EACA;EACA;;AAIZ;EACI;EACA;EACA,OA9JK;;AA+JL;EACI;EACA,QAjKC;;AAmKL;EACI;EACA,QArKC;;AAuKL;EACE,MAxKG;;AA0KL;EACI;EACA;;AAGR;EACI;EACA,OA9KK;;AA+KL;EACI,QAhLC;;AAkLL;EACI,MAnLC;;AAqLL;EACI;EACA;;AAGR;EACI,SAtMoB;;AAuMpB;EACI;EACA;EACA;;AAGR;EACI;;;AAIR;EACI;EACA;EACA;EACA,QA3Na;EA4Nb;EACA,WA3MgB;;AA4MhB;EACI;EACA;EACA,QAxNY;;AAyNZ;EACI;;AAGR;EACI;EACA;;AACA;EACI;EACA;;AACA;EACI,QAnOI;EAoOJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAvOA;EAwOA,kBAzOL;EA0OK;;AAEJ;EACI,OA3OH;;AA6OD;EACI,OAjPH;;AAmPD;EACI;EACA;EACA;;AACA;EACI;EACA,aA3PC;EA4PD,QAnPA;EAoPA,MAzPJ;EA0PI;;AAEJ;EACI,MA5PP;;AAgQL;EACI;EACA,OAnQI;EAoQJ;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,OAtQI;EAuQJ,QAvQI;EAwQJ;EACA,MA9QA;EA+QA;;AAGR;EACI,OAlRC;;AAmRD;EACI,MApRH;;;AA8Rb;EACI;IACI,WAhRgB;;EAmRhB;IACI,QAnRW;;EAqRf;IACI,SA/RU;;EAgSV;IACI,QAxRO;;EA0RX;IACI,QAlSW;;EAqSnB;IACI;;EACA;IACI;;EAGR;IACI;;EACA;IACI;;EAGR;IACI,SAnToB;;EAuTxB;IACI,QArTY;;EAyTR;IACI,QAzTI;IA0TJ,WAvTI;;EA0TJ;IACI,aA7TC;IA8TD,OA1TA;;EA+TR;IACI,OAhUI;IAiUJ,QAjUI","file":"styles.css"}

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;
+            }
         }
     }
 }