diff --git a/_WORKFILES/captures/boussole - associations-1.png.png b/_WORKFILES/captures/boussole - associations-1.png.png deleted file mode 100644 index fcd14c2..0000000 Binary files a/_WORKFILES/captures/boussole - associations-1.png.png and /dev/null differ diff --git a/_WORKFILES/captures/boussole - associations.png.png b/_WORKFILES/captures/boussole - associations.png.png deleted file mode 100644 index a9a841b..0000000 Binary files a/_WORKFILES/captures/boussole - associations.png.png and /dev/null differ diff --git a/_WORKFILES/captures/boussole - doleance.png.png b/_WORKFILES/captures/boussole - doleance.png.png deleted file mode 100644 index bb4aed3..0000000 Binary files a/_WORKFILES/captures/boussole - doleance.png.png and /dev/null differ diff --git a/_WORKFILES/captures/boussole - proximité V2.png.png b/_WORKFILES/captures/boussole - proximité V2.png.png deleted file mode 100644 index f74b13d..0000000 Binary files a/_WORKFILES/captures/boussole - proximité V2.png.png and /dev/null differ diff --git a/_WORKFILES/captures/boussole - proximité.png.png b/_WORKFILES/captures/boussole - proximité.png.png deleted file mode 100644 index d7bc71b..0000000 Binary files a/_WORKFILES/captures/boussole - proximité.png.png and /dev/null differ diff --git a/_WORKFILES/captures/boussole - puissance d'agir-1.png-2.png b/_WORKFILES/captures/boussole - puissance d'agir-1.png-2.png deleted file mode 100644 index 2fdbd43..0000000 Binary files a/_WORKFILES/captures/boussole - puissance d'agir-1.png-2.png and /dev/null differ diff --git a/_WORKFILES/captures/boussole - puissance d'agir-1.png.png b/_WORKFILES/captures/boussole - puissance d'agir-1.png.png deleted file mode 100644 index 1b51b3a..0000000 Binary files a/_WORKFILES/captures/boussole - puissance d'agir-1.png.png and /dev/null differ diff --git a/_WORKFILES/captures/boussole - supperpositions-1.png-2.png b/_WORKFILES/captures/boussole - supperpositions-1.png-2.png deleted file mode 100644 index 9913188..0000000 Binary files a/_WORKFILES/captures/boussole - supperpositions-1.png-2.png and /dev/null differ diff --git a/_WORKFILES/captures/boussole - supperpositions-1.png.png b/_WORKFILES/captures/boussole - supperpositions-1.png.png deleted file mode 100644 index ee5c2db..0000000 Binary files a/_WORKFILES/captures/boussole - supperpositions-1.png.png and /dev/null differ diff --git a/_WORKFILES/captures/boussole - supperpositions.png.png b/_WORKFILES/captures/boussole - supperpositions.png.png deleted file mode 100644 index 5831495..0000000 Binary files a/_WORKFILES/captures/boussole - supperpositions.png.png and /dev/null differ diff --git a/_WORKFILES/captures/boussole - terrain de vie V2-2.png.png b/_WORKFILES/captures/boussole - terrain de vie V2-2.png.png deleted file mode 100644 index 46a40d9..0000000 Binary files a/_WORKFILES/captures/boussole - terrain de vie V2-2.png.png and /dev/null differ diff --git a/_WORKFILES/captures/boussole - terrain de vie V2.png.png b/_WORKFILES/captures/boussole - terrain de vie V2.png.png deleted file mode 100644 index cca9915..0000000 Binary files a/_WORKFILES/captures/boussole - terrain de vie V2.png.png and /dev/null differ diff --git a/_WORKFILES/captures/boussole - terrain de vie- zoom.png.png b/_WORKFILES/captures/boussole - terrain de vie- zoom.png.png deleted file mode 100644 index 16b823e..0000000 Binary files a/_WORKFILES/captures/boussole - terrain de vie- zoom.png.png and /dev/null differ diff --git a/_WORKFILES/captures/boussole - terrain de vie-1.png.png b/_WORKFILES/captures/boussole - terrain de vie-1.png.png deleted file mode 100644 index 55efedc..0000000 Binary files a/_WORKFILES/captures/boussole - terrain de vie-1.png.png and /dev/null differ diff --git a/_WORKFILES/captures/boussole - terrain de vie-2.png.png b/_WORKFILES/captures/boussole - terrain de vie-2.png.png deleted file mode 100644 index 719969a..0000000 Binary files a/_WORKFILES/captures/boussole - terrain de vie-2.png.png and /dev/null differ diff --git a/_WORKFILES/captures/boussole - terrain de vie.png-2.png b/_WORKFILES/captures/boussole - terrain de vie.png-2.png deleted file mode 100644 index 85e7164..0000000 Binary files a/_WORKFILES/captures/boussole - terrain de vie.png-2.png and /dev/null differ diff --git a/_WORKFILES/captures/boussole - terrain de vie.png.png b/_WORKFILES/captures/boussole - terrain de vie.png.png deleted file mode 100644 index 7f16e78..0000000 Binary files a/_WORKFILES/captures/boussole - terrain de vie.png.png and /dev/null differ diff --git a/_WORKFILES/captures/carte - associations.png.png b/_WORKFILES/captures/carte - associations.png.png deleted file mode 100644 index 0c60a1b..0000000 Binary files a/_WORKFILES/captures/carte - associations.png.png and /dev/null differ diff --git a/_WORKFILES/captures/carte - doléance.png.png b/_WORKFILES/captures/carte - doléance.png.png deleted file mode 100644 index 195b46d..0000000 Binary files a/_WORKFILES/captures/carte - doléance.png.png and /dev/null differ diff --git a/_WORKFILES/captures/carte - proximité V2.png.png b/_WORKFILES/captures/carte - proximité V2.png.png deleted file mode 100644 index 42fcf9b..0000000 Binary files a/_WORKFILES/captures/carte - proximité V2.png.png and /dev/null differ diff --git a/_WORKFILES/captures/carte - proximité.png.png b/_WORKFILES/captures/carte - proximité.png.png deleted file mode 100644 index 95367f0..0000000 Binary files a/_WORKFILES/captures/carte - proximité.png.png and /dev/null differ diff --git a/_WORKFILES/captures/carte - puissance d'agir.png.png b/_WORKFILES/captures/carte - puissance d'agir.png.png deleted file mode 100644 index 16fe4d2..0000000 Binary files a/_WORKFILES/captures/carte - puissance d'agir.png.png and /dev/null differ diff --git a/_WORKFILES/captures/carte - superpositions.png.png b/_WORKFILES/captures/carte - superpositions.png.png deleted file mode 100644 index 27433d9..0000000 Binary files a/_WORKFILES/captures/carte - superpositions.png.png and /dev/null differ diff --git a/_WORKFILES/captures/carte - terrain de vie V2.png.png b/_WORKFILES/captures/carte - terrain de vie V2.png.png deleted file mode 100644 index f7f3f45..0000000 Binary files a/_WORKFILES/captures/carte - terrain de vie V2.png.png and /dev/null differ diff --git a/_WORKFILES/captures/carte - terrain de vie.png-2.png b/_WORKFILES/captures/carte - terrain de vie.png-2.png deleted file mode 100644 index 840f0a1..0000000 Binary files a/_WORKFILES/captures/carte - terrain de vie.png-2.png and /dev/null differ diff --git a/_WORKFILES/captures/carte - terrain de vie.png.png b/_WORKFILES/captures/carte - terrain de vie.png.png deleted file mode 100644 index 552aae7..0000000 Binary files a/_WORKFILES/captures/carte - terrain de vie.png.png and /dev/null differ diff --git a/_WORKFILES/captures/interactions - terrain de vie.png.png b/_WORKFILES/captures/interactions - terrain de vie.png.png deleted file mode 100644 index 23f66e2..0000000 Binary files a/_WORKFILES/captures/interactions - terrain de vie.png.png and /dev/null differ diff --git a/_WORKFILES/captures/interraction - association.png.png b/_WORKFILES/captures/interraction - association.png.png deleted file mode 100644 index 1085e9c..0000000 Binary files a/_WORKFILES/captures/interraction - association.png.png and /dev/null differ diff --git a/_WORKFILES/dessin-pictos.svg b/_WORKFILES/dessin-pictos.svg deleted file mode 100644 index 7daa315..0000000 --- a/_WORKFILES/dessin-pictos.svg +++ /dev/null @@ -1,131 +0,0 @@ - - - - diff --git a/_WORKFILES/dev_design_fevrier.txt b/_WORKFILES/dev_design_fevrier.txt deleted file mode 100644 index 57a843f..0000000 --- a/_WORKFILES/dev_design_fevrier.txt +++ /dev/null @@ -1,42 +0,0 @@ -I / PICTOS - -OUTILS D'ENQUETE -1.1 terrain de vie -1.2 proximité -1.3 superposition -1.4 puissance d'agir -1.5 actions -1.6 doléancier - -Deux graisse : regular (0.8px, 0.3px) et active (1.2px, 0.6px) -Deux tailles : 35px (menu) et 28px (cartel) -Points : 3px 5px - -NAVIGATION -2.1 mode d'emploi -2.2 connexion -2.3 rechercher -2.4 retour aux cartes vivantes -2.5 casque écoute -2.6 chevron fermer onglet -2.7 entités liées (sens de liaison) -2.8 scrollbar -2.9 custom video/sound player - -FOND D'ENQUÊTE -3.1 terrain de vie -3.2 puissance d'agir -3.3 doléance - -Essayer les pictos contextuellement -> +ieurs tailles et épaisseurs ? - -> rapport à la typo - - -II / ANIMATIONS -1. Terrains de vie en particules -2. Survol terrains de vie sur carte -3. Ecoute terrain de vie sur carte -4. Survol association sur carte -5. Survol entité sur enquête -6. Apparition volets latéraux enquête -7. Clic/survol menu mode de navigation \ No newline at end of file diff --git a/_WORKFILES/ref-pîcto-action-sorcellerie-capitaliste.png b/_WORKFILES/ref-pîcto-action-sorcellerie-capitaliste.png deleted file mode 100644 index f5a4a96..0000000 Binary files a/_WORKFILES/ref-pîcto-action-sorcellerie-capitaliste.png and /dev/null differ diff --git a/_WORKFILES/reu-mi-mars.txt b/_WORKFILES/reu-mi-mars.txt deleted file mode 100644 index a474dca..0000000 --- a/_WORKFILES/reu-mi-mars.txt +++ /dev/null @@ -1,16 +0,0 @@ -- couleur ou contours fond de boussole -- atlas des cartes d'atterrissage-> titre principal du titre - -- En haut : l'atlas / en bas : les cartes -- historique et détails seulement dans terrain de vie --contours vert fluo oui sur forme pas sur bloc -- dans superposition sur les fiches principale grosse forme et reliée petite forme -- pas de liste d'entités -> juste "tête de cartouche" - -- elipse transition mode atlas à carte -- pas assez sur la partie gauche haute -- fixer légèrement animer les couleurs -- assombrir/désaturer couleurs -> essayer version carte plus sombre -- picto action à revoir trop explosion -- titre au dessus du menu -- essayer les deux titres "atlas" et "cartes" et celui sur lequel on est pas est grisé diff --git a/_WORKFILES/schéma navigation/schéma navigation.png b/_WORKFILES/schéma navigation/schéma navigation.png deleted file mode 100644 index a105306..0000000 Binary files a/_WORKFILES/schéma navigation/schéma navigation.png and /dev/null differ diff --git a/background.js b/background.js index 04bee54..fc73058 100644 --- a/background.js +++ b/background.js @@ -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(); -} \ No newline at end of file +} + + + + + + + +/* 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 \ No newline at end of file diff --git a/index.html b/index.html index 5aa53e1..18c1c53 100644 --- a/index.html +++ b/index.html @@ -61,7 +61,7 @@
Action