diff --git a/background.js b/background.js index fc73058..125ea30 100644 --- a/background.js +++ b/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 \ No newline at end of file +// 1 1, 2 3, 3 5, 4 7, 5 9, 6 11 +// curentMode + (curentMode - 1) \ No newline at end of file diff --git a/index.html b/index.html index 18c1c53..9a39783 100644 --- a/index.html +++ b/index.html @@ -28,13 +28,6 @@
-
-

L'atlas

-

Les cartes

-
-
@@ -72,15 +65,10 @@

Doléancer

- - -