|
@@ -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)
|