couleurs en canvas et responsive sass
This commit is contained in:
Valentin
+128
-119
@@ -1,133 +1,59 @@
|
||||
// grain
|
||||
grained('#grain-bg', {
|
||||
animate: true,
|
||||
patternWidth: 100,
|
||||
patternHeight: 100,
|
||||
grainOpacity: 0.5,
|
||||
grainDensity: 1,
|
||||
grainWidth: 1,
|
||||
grainHeight: 1,
|
||||
grainChaos: 10,
|
||||
grainSpeed: 1
|
||||
});
|
||||
// mode : terrain de vie, proximité, superposition....
|
||||
// profondeur : atlas, carte
|
||||
|
||||
/*
|
||||
|O couleur prev O |
|
||||
| couleur d'appoint |
|
||||
| |
|
||||
| |
|
||||
| |
|
||||
| couleur next O|
|
||||
*/
|
||||
|
||||
// au clic sur le mode suivant :
|
||||
// - couleurs prev devient la next précédente (ou inverse si page cliquée < page courante)
|
||||
// - couleurs next (ou prev) est une nouvelle couleur
|
||||
// - couleur appoint s'adapte en fonction de couleur next
|
||||
|
||||
|
||||
let pageAmount = 0;
|
||||
let currentPage = 1, prevPage;
|
||||
let currentProfondeur = "atlas";
|
||||
let modeAmount = 0,
|
||||
curentMode = 1, prevMode,
|
||||
currentProfondeur = "atlas",
|
||||
colors = {
|
||||
bg: {
|
||||
h: 29,
|
||||
s: 48,
|
||||
l: 48
|
||||
}
|
||||
};
|
||||
|
||||
document.querySelectorAll('.mode').forEach(function(node, index) {
|
||||
pageAmount++;
|
||||
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');
|
||||
prevPage = currentPage;
|
||||
currentPage = index + 1;
|
||||
prevMode = curentMode;
|
||||
curentMode = index + 1;
|
||||
|
||||
console.log(currentPage, prevPage);
|
||||
|
||||
if (currentPage != prevPage) {
|
||||
if (currentPage > prevPage) {
|
||||
couleurs.prev.h = couleurs.next.h + (360 / pageAmount) * (currentPage - prevPage - 1);
|
||||
couleurs.next.h = couleurs.next.h + (360 / pageAmount) * (currentPage - prevPage);
|
||||
} else {
|
||||
couleurs.next.h = couleurs.prev.h + (360 / pageAmount) * (currentPage - prevPage + 1);
|
||||
couleurs.prev.h = couleurs.prev.h + (360 / pageAmount) * (currentPage - prevPage);
|
||||
}
|
||||
couleurs.appoint.h = couleurs.next.h + 200;
|
||||
console.log(couleurs.prev.h, couleurs.next.h);
|
||||
|
||||
let mainContainer = document.getElementById('BG_BG_BG');
|
||||
let containerTmp = document.getElementById('BG_BG_BG_tmp');
|
||||
containerTmp.style.background = `
|
||||
radial-gradient(circle at 0% 14%,
|
||||
hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%,
|
||||
rgba(255, 255, 255, 0) 100%),
|
||||
radial-gradient(circle at 93% 95%,
|
||||
hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%,
|
||||
rgba(255, 255, 255, 0) 100%),
|
||||
radial-gradient(circle at 73% 10%,
|
||||
hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
|
||||
rgba(255, 255, 255, 0) 100%)
|
||||
`;
|
||||
containerTmp.style.opacity = 1;
|
||||
setTimeout(function() {
|
||||
mainContainer.style.opacity = 0;
|
||||
},100);
|
||||
|
||||
setTimeout(function() {
|
||||
mainContainer.style.background = `
|
||||
radial-gradient(circle at 0% 14%,
|
||||
hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%,
|
||||
rgba(255, 255, 255, 0) 100%),
|
||||
radial-gradient(circle at 93% 95%,
|
||||
hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%,
|
||||
rgba(255, 255, 255, 0) 100%),
|
||||
radial-gradient(circle at 73% 10%,
|
||||
hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
|
||||
rgba(255, 255, 255, 0) 100%)
|
||||
`;
|
||||
containerTmp.style.opacity = 0;
|
||||
mainContainer.style.opacity = 1;
|
||||
}, 500);
|
||||
if (curentMode != prevMode) {
|
||||
changeColors(curentMode - prevMode);
|
||||
}
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
let couleurs = {
|
||||
prev: {
|
||||
h: 42,
|
||||
s: 40.6,
|
||||
l: 44.9 + 20,
|
||||
},
|
||||
next: {
|
||||
h: 0,
|
||||
s: 30.5,
|
||||
l: 46.3 + 20,
|
||||
},
|
||||
appoint: {
|
||||
h: 0,
|
||||
s: 66,
|
||||
l: 35.7 + 20,
|
||||
}
|
||||
// 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é
|
||||
|
||||
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);
|
||||
|
||||
}
|
||||
|
||||
couleurs.next.h = couleurs.prev.h + (360 / pageAmount);
|
||||
couleurs.appoint.h = couleurs.next.h + 200;
|
||||
console.log(couleurs.prev.h, couleurs.next.h);
|
||||
|
||||
let container = document.getElementById("BG_BG_BG");
|
||||
container.style.background = `
|
||||
radial-gradient(circle at 0% 14%,
|
||||
hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%,
|
||||
rgba(255, 255, 255, 0) 100%),
|
||||
radial-gradient(circle at 93% 95%,
|
||||
hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%,
|
||||
rgba(255, 255, 255, 0) 100%),
|
||||
radial-gradient(circle at 73% 10%,
|
||||
hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
|
||||
rgba(255, 255, 255, 0) 100%)
|
||||
`;
|
||||
|
||||
// menu
|
||||
function toggleProfondeur(el) {
|
||||
if (el.classList.contains("selected")) {
|
||||
return;
|
||||
@@ -155,10 +81,6 @@ function toggleProfondeur(el) {
|
||||
}
|
||||
|
||||
|
||||
// toggle changement de couleur de fond (faire une fonction propr)
|
||||
// et variable globale du mode dans lequel on est
|
||||
// loop avec les flèches
|
||||
|
||||
function toggleMode(direction) {
|
||||
let modes = [];
|
||||
let currentIndex;
|
||||
@@ -172,9 +94,96 @@ function toggleMode(direction) {
|
||||
}
|
||||
}
|
||||
});
|
||||
if (direction == "next") {
|
||||
if (direction == "next" && currentIndex + 2 <= modeAmount) {
|
||||
modes[currentIndex + 1].classList.add('active');
|
||||
} else if (direction == "prev") {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// DEUXIEME TEST DE COULEURS
|
||||
// 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();
|
||||
}
|
||||
Reference in New Issue
Block a user