ou_atterrir_front/background.js

// mode : terrain de vie, proximité, superposition....
// profondeur : atlas, carte

let modeAmount = 0,
    curentMode = 1, prevMode,
    currentProfondeur = "atlas",
    colors = {
        bg: {
            h: 29,
            s: 48,
            l: 48
        }
    };

document.querySelectorAll('.mode').forEach(function(node, index) {
    modeAmount++;
    node.addEventListener('click', function() {
        document.querySelectorAll('.active').forEach(function(el) {
            el.classList.remove('active');
            if (currentProfondeur == "carte") { el.classList.add('collapsed'); }
        });
        node.classList.toggle('active');
        prevMode = curentMode;
        curentMode = index + 1;

        if (curentMode != prevMode) {
            changeColors(curentMode - prevMode);
        }

    })
});

// pb si on clique plusieurs fois d'affilé, revient pas sur les bonnes couleurs
// le passage entre toutes les couleurs quand le diffAmount est élevé n'est pas bien
//      -> préférer ajouter un rectangle de la bonne couleur et lui augmenter l'opacité
//      -> ou peut-être changer le fond en css ?

function changeColors(diffAmount) {
    let originColor = colors.bg.h,
        currentColor = originColor,
        newColor = originColor + (360 / modeAmount) * diffAmount,
        transitionTime = 50,
        stepAmount = (newColor - originColor) / transitionTime;

        let animation = setInterval(() => {
            if (
            (diffAmount > 0 && currentColor < newColor) ||
            (diffAmount < 0 && currentColor > newColor)) {
                currentColor = currentColor + stepAmount;
                colors.bg.h = currentColor;
        } else {
            clearInterval(animation);
        }
    }, transitionTime);
    
}

function toggleProfondeur(el) {
    if (el.classList.contains("selected")) {
        return;
    } else {
        for (let sibling of el.parentNode.children) {
            sibling.classList.remove('selected');
        }
    }
    el.classList.add("selected");
    if(el.innerHTML == "L'atlas") {
        currentProfondeur = "atlas";
        document.querySelectorAll('.mode').forEach(function(node) {
            if(node.classList.contains("collapsed")) {
                node.classList.remove("collapsed");
            }
        });
    } else {
        currentProfondeur = "carte";
        document.querySelectorAll('.mode').forEach(function(node) {
            if(!node.classList.contains("active")) {
                node.classList.add("collapsed");
            }
        });
    }
}


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');
        changeColors(1);
    } else if (direction == "prev" && currentIndex - 1 >= 0) {
        modes[currentIndex - 1].classList.add('active');
        changeColors(-1);
    } else if (direction == "next" && currentIndex + 1 == modeAmount) {
        modes[0].classList.add('active');
        changeColors(-modeAmount + 1);
    } else if (direction == "prev" && currentIndex == 0) {
        modes[modeAmount - 1].classList.add('active');
        changeColors(modeAmount - 1);
    }
}


// COULEURS DE FOND
// basé sur https://codepen.io/ThreePixDroid/pen/MWeomWp

// ajouter un grain fixe : cf
// https://codepen.io/zadvorsky/pen/PwyoMm



class GradientAnimation {
    constructor() {
        this.cnv = document.querySelector('canvas');
        this.ctx = this.cnv.getContext('2d');

        this.circlesNum = 5;
        this.minRadius = 800;
        this.maxRadius = 800;
        this.speed = 0.005;

        (window.onresize = () => {
            this.setCanvasSize();
            this.createCircles();
        })();
        this.drawAnimation();
    }
    setCanvasSize() {
        this.w = this.cnv.width = innerWidth * devicePixelRatio;
        this.h = this.cnv.height = innerHeight * devicePixelRatio;
        this.ctx.scale(devicePixelRatio, devicePixelRatio);
    }
    createCircles() {
        this.circles = [];
        for (let i = 0; i < this.circlesNum; i++) {
            this.circles.push(new Circle(this.w, this.h, this.minRadius, this.maxRadius));
        }
    }
    drawCircles() {
        this.circles.forEach(circle => circle.draw(this.ctx, this.speed));
    }
    drawBackground() {
        this.ctx.fillStyle = `hsl(${colors.bg.h} ${colors.bg.s}% ${colors.bg.l}%)`;
        this.ctx.fillRect(0, 0, this.w, this.h);
    }
    drawAnimation() {
        this.drawBackground();
        this.drawCircles();
        window.requestAnimationFrame(() => this.drawAnimation());
    }
}

class Circle {
    constructor(w, h, minR, maxR) {
        this.x = Math.random() * w;
        this.y = Math.random() * h;
        this.angle = Math.random() * Math.PI * 2;
        this.radius = Math.random() * (maxR - minR) + minR;
        this.firstColor = `hsla(${Math.random() * 360}, 100%, 50%, 0.5)`;
        this.secondColor = `hsla(${Math.random() * 360}, 100%, 50%, 0)`;
    }
    draw(ctx, speed) {
        this.angle += speed;
        const x = this.x + Math.cos(this.angle) * 200;
        const y = this.y + Math.sin(this.angle) * 200;
        const gradient = ctx.createRadialGradient(x, y, 0, x, y, this.radius);
        gradient.addColorStop(0, this.firstColor);
        gradient.addColorStop(1, this.secondColor);

        ctx.globalCompositionOperation = `overlay`;
        ctx.fillStyle = gradient;
        ctx.beginPath();
        ctx.arc(x, y, this.radius, 0, Math.PI * 2);
        ctx.fill();
    }
}

window.onload = () => {
    new GradientAnimation();
}