ajout de l'effet brush p5

This commit is contained in:
Valentin 2024-05-28 00:18:18 +02:00
parent d469194e2d
commit a36de802d8
7 changed files with 169 additions and 14 deletions

130
components/Brush.vue Normal file
View File

@ -0,0 +1,130 @@
<template>
<div ref="canvasContainer" id="canvasContainer"></div>
</template>
<script>
import p5 from 'p5';
export default {
mounted() {
this.p5Instance = new p5(this.sketch, this.$refs.canvasContainer);
},
beforeDestroy() {
if (this.p5Instance) {
this.p5Instance.remove();
}
},
methods: {
sketch(p) {
let brushStrokes = [];
const fadingTime = 2000;
const brushDensity = 30;
const textureDensity = 2;
const brushSize = 4;
p.setup = () => {
p.createCanvas(p.windowWidth, p.windowHeight);
p.clear();
p.colorMode(p.HSL);
p.noStroke();
};
p.draw = () => {
p.clear();
for (let i = brushStrokes.length - 1; i >= 0; i--) {
let brushStroke = brushStrokes[i];
let elapsedTime = p.millis() - brushStroke.startTime;
if (elapsedTime > fadingTime) {
brushStrokes.splice(i, 1);
continue;
}
let isSwiperOpen;
let swipers = document.querySelectorAll('.swiper');
for (let swiper of swipers) {
if (swiper.style.opacity == 1) isSwiperOpen = true;
}
if (!isSwiperOpen) {
let alpha = p.map(elapsedTime, 0, fadingTime, 1, 0);
for (let j = 0; j < brushStroke.dots.length; j++) {
p.fill(
brushStroke.dots[j].color.h,
brushStroke.dots[j].color.s,
brushStroke.dots[j].color.l,
alpha);
p.ellipse(
brushStroke.dots[j].x,
brushStroke.dots[j].y,
brushStroke.dots[j].size,
brushStroke.dots[j].size
);
}
}
}
};
p.mouseMoved = () => {
let dots = [];
for (let j = 0; j < brushDensity; j++) {
let angle = p.random(p.TWO_PI);
let r = p.sqrt(p.pow(p.random(1), 2)) * gaussian(brushSize, 3);
let x = p.mouseX + r * p.cos(angle);
let y = p.mouseY + r * p.sin(angle);
dots.push({
x: x,
y: y,
size: p.random(1) * textureDensity,
color: {
h: 178,
s: 20,
l: constrainedGaussian(22, 10, 10, 100)
}
});
}
brushStrokes.push({
x: p.mouseX,
y: p.mouseY,
startTime: p.millis(),
dots: dots
});
}
function gaussian(mean, sd) {
let u1 = p.random();
let u2 = p.random();
let z0 = p.sqrt(-2.0 * p.log(u1)) * p.cos(p.TWO_PI * u2);
return z0 * sd + mean;
}
function constrainedGaussian(mean, sd, min, max) {
let value;
do {
value = gaussian(mean, sd);
} while (value < min || value > max);
return value;
}
}
},
}
</script>
<style scoped>
#canvasContainer {
pointer-events: none;
top: 0;
left: 0;
z-index: 2;
position: fixed;
width: 100vw;
height: 100vh;
}
</style>

View File

@ -131,6 +131,7 @@ export default {
display: none; display: none;
opacity: 0; opacity: 0;
transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out;
z-index: 3;
.swiper-wrapper { .swiper-wrapper {
.swiper-slide { .swiper-slide {
width: 100%; width: 100%;

7
package-lock.json generated
View File

@ -8,6 +8,7 @@
"hasInstallScript": true, "hasInstallScript": true,
"dependencies": { "dependencies": {
"@directus/sdk": "^15.1.0", "@directus/sdk": "^15.1.0",
"p5": "^1.9.4",
"sharp": "^0.33.3", "sharp": "^0.33.3",
"swiper": "^11.0.6", "swiper": "^11.0.6",
"vue": "^3.4.15", "vue": "^3.4.15",
@ -10871,6 +10872,12 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/p5": {
"version": "1.9.4",
"resolved": "https://registry.npmjs.org/p5/-/p5-1.9.4.tgz",
"integrity": "sha512-dhiZ9mvXx5pm8eRwml34xbeUwce4uS9Q2za0YOHg2p97N9iNAb5hTIHAt77CHKHXAh6A16u/oalz5egRfTyFWw==",
"license": "LGPL-2.1"
},
"node_modules/pacote": { "node_modules/pacote": {
"version": "17.0.7", "version": "17.0.7",
"resolved": "https://registry.npmjs.org/pacote/-/pacote-17.0.7.tgz", "resolved": "https://registry.npmjs.org/pacote/-/pacote-17.0.7.tgz",

View File

@ -11,6 +11,7 @@
}, },
"dependencies": { "dependencies": {
"@directus/sdk": "^15.1.0", "@directus/sdk": "^15.1.0",
"p5": "^1.9.4",
"sharp": "^0.33.3", "sharp": "^0.33.3",
"swiper": "^11.0.6", "swiper": "^11.0.6",
"vue": "^3.4.15", "vue": "^3.4.15",

View File

@ -1,19 +1,24 @@
<template> <template>
<main id="contact"> <main>
<div> <Brush />
<img <main id="contact">
:src="`/imgs/small/${globalData.contact_image}.webp`" <div>
:alt="globalData.contact_image_titre" <img
/> :src="`/imgs/small/${globalData.contact_image}.webp`"
</div> :alt="globalData.contact_image_titre"
<div> />
<p v-html="globalData.contact_text"></p> </div>
<a :href="'mailto:' + globalData.email">{{ globalData.email }}</a> <div>
</div> <p v-html="globalData.contact_text"></p>
<a :href="'mailto:' + globalData.email">{{ globalData.email }}</a>
</div>
</main>
</main> </main>
</template> </template>
<script> <script>
import Brush from '@/components/Brush.vue';
export default { export default {
async setup() { async setup() {
@ -27,6 +32,9 @@ export default {
return { return {
globalData globalData
} }
},
components: {
Brush
} }
} }
</script> </script>

View File

@ -1,9 +1,13 @@
<template> <template>
<Projects :contents="galerie" /> <main>
<Brush />
<Projects :contents="galerie" />
</main>
</template> </template>
<script> <script>
import Projects from '@/components/Projects.vue'; import Projects from '@/components/Projects.vue';
import Brush from '@/components/Brush.vue';
export default { export default {
setup() { setup() {
@ -22,7 +26,8 @@ export default {
}; };
}, },
components: { components: {
Projects Projects,
Brush
} }
}; };
</script> </script>

View File

@ -1,5 +1,6 @@
<template> <template>
<main> <main>
<Brush />
<p>{{ globalData.magasin_explication }}</p> <p>{{ globalData.magasin_explication }}</p>
<div class="category"> <div class="category">
<div> <div>
@ -16,6 +17,7 @@
<script> <script>
import Projects from '@/components/Projects.vue'; import Projects from '@/components/Projects.vue';
import Brush from '@/components/Brush.vue';
export default { export default {
async setup() { async setup() {
@ -44,7 +46,8 @@ export default {
}; };
}, },
components: { components: {
Projects Projects,
Brush
} }
}; };
</script> </script>