valentin_le_moign/ou_atterrir_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fond en couleurs ok

Browse Source
This commit is contained in:
Valentin
2023-04-11 23:05:38 +02:00
parent b250d9d0cb
commit 807dcc053e
38 changed files with 179 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files
background.js
+175 -53
View File
@@ -2,15 +2,15 @@
// profondeur : atlas, carte
let modeAmount = 0,
curentMode = 1, prevMode,
currentProfondeur = "atlas",
colors = {
bg: {
h: 29,
s: 48,
l: 48
}
};
curentMode = 1, prevMode,
currentProfondeur = "atlas",
colors = {
bg: {
h: 29,
s: 48,
l: 48
}
};
document.querySelectorAll('.mode').forEach(function(node, index) {
modeAmount++;
@@ -30,31 +30,6 @@ document.querySelectorAll('.mode').forEach(function(node, index) {
})
});
// 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;
@@ -81,7 +56,7 @@ function toggleProfondeur(el) {
}
}
// onclick sur les flèches du menu
function toggleMode(direction) {
let modes = [];
let currentIndex;
@@ -97,37 +72,146 @@ function toggleMode(direction) {
});
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 baseColors = [];
baseColors.push(colorPalette[prevPaletteIndex - 1]);
baseColors.push(colorPalette[prevPaletteIndex]);
baseColors.push(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]);
function hexToRgba(color) {
let colorRgba = {
r : parseInt(color.substr(0, 2), 16),
g : parseInt(color.substr(2, 2), 16),
b : parseInt(color.substr(4, 2), 16),
a : parseInt(color.substr(6, 2), 16)
}
return colorRgba;
}
function rgbaToHex(color) {
let colorHexa = {
r : color.r.toString(16).length != 2 ? 0 + color.r.toString(16) : color.r.toString(16),
g : color.g.toString(16).length != 2 ? 0 + color.g.toString(16) : color.g.toString(16),
b : color.b.toString(16).length != 2 ? 0 + color.b.toString(16) : color.b.toString(16),
a : color.a.toString(16).length != 2 ? 0 + color.a.toString(16) : color.a.toString(16)
}
return colorHexa.r + colorHexa.g + colorHexa.b + colorHexa.a;
}
let steps = 10, // vitesse de la transition
currentFrame = 0;
function animate() {
currentFrame++;
// à chaque frame on vide currentColors
// puis pusher trois couleurs hex de transition
// lorsque le nombre de steps est atteint envoyer les couleurs def
// et ne pas réanimer
currentColors = [];
for (i = 0; i < baseColors.length; i++) {
if (currentFrame == steps) {
currentColors.push(targetColors[i])
} else {
currentColors.push(getTransitionColor(baseColors[i], targetColors[i], currentFrame));
}
}
if (steps == 0) transitionLaunched++;
if (currentFrame != steps) {
window.requestAnimationFrame(() => animate());
} else {
currentFrame = 0;
}
}
animate()
function getTransitionColor(baseColor, targetColor, currentFrame) {
console.log(baseColor, targetColor, currentFrame)
let rgbaBase = hexToRgba(baseColor),
rgbaTarget = hexToRgba(targetColor),
diff = {
r : (rgbaBase.r - rgbaTarget.r) * -1,
g : (rgbaBase.g - rgbaTarget.g) * -1,
b : (rgbaBase.b - rgbaTarget.b) * -1,
a : (rgbaBase.a - rgbaTarget.a) * -1
},
transitionColor = {
r : Math.floor(rgbaBase.r + (diff.r / steps) * currentFrame),
g : Math.floor(rgbaBase.g + (diff.g / steps) * currentFrame),
b : Math.floor(rgbaBase.b + (diff.b / steps) * currentFrame),
a : Math.floor(rgbaBase.a + (diff.a / steps) * currentFrame)
};
transitionColor = rgbaToHex(transitionColor);
return transitionColor;
}
}
// COULEURS DE FOND
// basé sur https://codepen.io/ThreePixDroid/pen/MWeomWp
// ajouter un grain fixe : cf
// https://codepen.io/zadvorsky/pen/PwyoMm
let colorPalette = [
"ff6a0399",
"c9c4ffff",
"0796908c",
"e6ffc4ff",
"e105054d",
"aaffa2ff",
"18b8e64d",
"ffc4f9ff",
"9692074d",
"ffe7c4ff",
"0629ad4d",
"fffdbaff"
]
let currentColors = [];
currentColors.push(
colorPalette[0],
colorPalette[1],
colorPalette[2],
);
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;
// réglages du fond
this.radius = 1800;
this.speed = 0.001;
(window.onresize = () => {
this.setCanvasSize();
@@ -142,15 +226,16 @@ class GradientAnimation {
}
createCircles() {
this.circles = [];
for (let i = 0; i < this.circlesNum; i++) {
this.circles.push(new Circle(this.w, this.h, this.minRadius, this.maxRadius));
}
// positionnement des cercles directement ici
this.circles.push(new Circle(this.w, this.h, this.radius, 30, 30, 0));
this.circles.push(new Circle(this.w, this.h, this.radius, window.innerWidth / 2, window.innerHeight, 1));
this.circles.push(new Circle(this.w, this.h, this.radius, window.innerWidth - 30, 30, 2));
}
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.fillStyle = "#aaaaaa";
this.ctx.fillRect(0, 0, this.w, this.h);
}
drawAnimation() {
@@ -161,23 +246,24 @@ class GradientAnimation {
}
class Circle {
constructor(w, h, minR, maxR) {
this.x = Math.random() * w;
this.y = Math.random() * h;
constructor(w, h, radius, posX, posY, index) {
this.x = posX;
this.y = posY;
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)`;
this.radius = radius;
this.index = index;
this.firstColor = "#" + currentColors[index];
this.secondColor = "#ffffff00";
}
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(0, "#" + currentColors[this.index]);
gradient.addColorStop(1, this.secondColor);
ctx.globalCompositionOperation = `overlay`;
ctx.globalCompositionOperation = "multiply"; // ça marche pas
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(x, y, this.radius, 0, Math.PI * 2);
@@ -187,4 +273,40 @@ class Circle {
window.onload = () => {
new GradientAnimation();
}
}
/* palette :
multiply vers blanc
0 #ff6a03 45%
1 TERRAIN DE VIE
1 #c9c4ff 100%
2 #079690 30%
2 PROXIMITE
3 #e6ffc4 100%
4 #e10505 30%
3 SUPPERPOSITION
5 #aaffa2 100%
6 #18b8e6 30%
4 PUISSANCE
7 #ffc4f9 100%
8 #969207 30%
5 ACTION
9 #ffe7c4 100%
10 #0629ad 30%
6 DOLEANCER
11 #fffdba 100% */
// 1 1, 2 3, 3 5, 4 7, 5 9, 6 11