bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

background gradients refactoring

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-02-22 21:28:22 +01:00
parent 8056929b12
commit 63589312a6
3 changed files with 71 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/main.scss
View File

@ -6,7 +6,7 @@
@import "./fonts/snap_it/snap_it.css";
body{
background-color: $back;
// background-color: $back;
}
#app{
@ -38,10 +38,14 @@ body{
#map-backgrounds{
.map-bg-canvas{
&.trame{
mix-blend-mode: multiply;
// display:none;
}
}
}
#map-concernements{
}

8
src/components/ConcernementMapItem.vue
View File

@ -26,7 +26,7 @@ export default {
},
props: ['concernement'],
created () {
console.log("ConcernementsMapItem concernement", this.concernement);
// console.log("ConcernementsMapItem concernement", this.concernement);
this.entites = this.concernement.entites
this.parsePoints()
this.getSalientPoints()
@ -52,7 +52,7 @@ export default {
parsePoints (){
for (let i = 0; i < this.entites.length; i++) {
let entite = this.entites[i]
console.log('entite', entite);
// console.log('entite', entite);
this.entites[i].display = {
alpha: null,
@ -109,7 +109,7 @@ export default {
this.salientPoints.push(farest.display)
}
}
console.log('this.salientPoints', this.salientPoints);
// console.log('this.salientPoints', this.salientPoints);
},
animate () {
if (this.ctx) {
@ -163,11 +163,13 @@ export default {
this.ctx.beginPath();
this.ctx.lineWidth = 1;
this.ctx.strokeStyle = "#000";
this.ctx.fillStyle = "rgba(255,255,255,0.4)";
this.ctx.moveTo(this.pos.x+this.salientPoints[0].pos.x, this.pos.y+this.salientPoints[0].pos.y)
for (let j = 1; j < this.salientPoints.length; j++) {
this.ctx.lineTo(this.pos.x+this.salientPoints[j].pos.x, this.pos.y+this.salientPoints[j].pos.y)
}
this.ctx.lineTo(this.pos.x+this.salientPoints[0].pos.x, this.pos.y+this.salientPoints[0].pos.y)
this.ctx.fill();
this.ctx.stroke();
}
},

114
src/components/MapBackground.vue
View File

@ -22,82 +22,74 @@ export default {
let canvasBackground1 = this.$refs['canvas-background-gradient1'];
canvasBackground1.width = canvasBackground1.parentElement.clientWidth;
canvasBackground1.height = canvasBackground1.parentElement.clientHeight;
let gradients1 = [
[
{ color: this.getRandBGColor(), pos: .2 },
{ color: this.getRandBGColor(), pos: .8 },
{ color: this.getRandBGColor(), pos: 1 }
], [
{ color: this.getRandBGColor(), pos: 0 },
{ color: this.getRandBGColor(), pos: .2 },
{ color: this.getRandBGColor(), pos: .75 }
],
];
console.log(gradients1);
this.granim1 = new Granim({
element: canvasBackground1,
direction: 'custom',
customDirection: {
x0: `${Math.random() * canvasBackground1.width}px`,
y0: `-100px`,
x1: `${Math.random() * canvasBackground1.width}px`,
y1: `${canvasBackground1.height + 100}px`
},
isPausedWhenNotInView: true,
states : {
"default-state": {
gradients: gradients1,
transitionSpeed: 20000
}
},
stateTransitionSpeed : 50000
})
this.granim1 = this.createGranim(canvasBackground1, 1)
let canvasBackground2 = this.$refs['canvas-background-gradient2'];
canvasBackground2.width = canvasBackground2.parentElement.clientWidth;
canvasBackground2.height = canvasBackground2.parentElement.clientHeight;
this.granim2 = this.createGranim(canvasBackground2, 2)
let gradients2 = [
[
{ color: this.getRandBGColor(), pos: .2 },
{ color: this.getRandBGColor(), pos: .8 },
{ color: this.getRandBGColor(), pos: 1 }
], [
{ color: this.getRandBGColor(), pos: 0 },
{ color: this.getRandBGColor(), pos: .2 },
{ color: this.getRandBGColor(), pos: .75 }
],
];
console.log(gradients2);
this.granim2 = new Granim({
element: canvasBackground2,
customDirection: {
x0: `-100px`,
y0: `${Math.random() * canvasBackground2.height}px`,
x1: `${canvasBackground2.width + 100}px`,
y1: `${Math.random() * canvasBackground2.height}px`
},
createGranim(canvas, direction){
let gradients = [];
let num_colors = Math.floor(2 + Math.random()*2);
for (let i = 0; i < Math.floor(2 + Math.random()*4); i++) {
let colors = [];
// let hue = Math.floor(Math.random()*360)
for (let j = 0; j < num_colors; j++) {
let pos = 1/num_colors*j + 1/num_colors/3 + Math.random()*1/num_colors/3
colors.push({
color: this.getRandBGColor(),
// pos: parseFloat(`${parseFloat(Math.random()).toFixed(2)}`.slice(1))
pos: parseFloat(`${parseFloat(pos).toFixed(2)}`.slice(1))
})
}
// colors.sort((a,b) => {
// return a.pos > b.pos ? 1 : -1
// })
gradients.push(colors)
}
console.log(gradients);
let custDir;
switch (direction) {
case 1:
custDir = {
x0: `${Math.random() * canvas.width}px`,
y0: `-100px`,
x1: `${Math.random() * canvas.width}px`,
y1: `${canvas.height + 100}px`
}
break;
case 2:
custDir = {
x0: `-100px`,
y0: `${Math.random() * canvas.height}px`,
x1: `${canvas.width + 100}px`,
y1: `${Math.random() * canvas.height}px`
}
break;
}
return new Granim({
element: canvas,
direction: 'custom',
customDirection: custDir,
isPausedWhenNotInView: true,
states : {
"default-state": {
gradients: gradients2,
transitionSpeed: 20000
gradients: gradients,
transitionSpeed: 60000
}
},
stateTransitionSpeed : 50000
})
},
getRandBGColor () {
let h = Math.floor(Math.random()*360);
let s = 40 + Math.floor(Math.random()*40);
let l = 40 + Math.floor(Math.random()*20);
getRandBGColor (hue) {
let h = !hue ? Math.floor(Math.random()*360) : hue + -30 + Math.floor(Math.random()*60);
let s = 40 + Math.floor(Math.random()*20);
let l = 40 + Math.floor(Math.random()*10);
let a = `${parseFloat(Math.random()*.9).toFixed(3)}`.slice(1);
let hsla = `hsla(${h}, ${s}%, ${l}%, ${a})`;
console.log(hsla);
// console.log(hsla);
return hsla;
},
initTrame () {