ajout de l'effet brush p5
This commit is contained in:
Valentin
parent
d469194e2d
commit
a36de802d8
|
|
@ -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>
|
||||
|
|
@ -131,6 +131,7 @@ export default {
|
|||
display: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-out;
|
||||
z-index: 3;
|
||||
.swiper-wrapper {
|
||||
.swiper-slide {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@directus/sdk": "^15.1.0",
|
||||
"p5": "^1.9.4",
|
||||
"sharp": "^0.33.3",
|
||||
"swiper": "^11.0.6",
|
||||
"vue": "^3.4.15",
|
||||
|
|
@ -10871,6 +10872,12 @@
|
|||
"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": {
|
||||
"version": "17.0.7",
|
||||
"resolved": "https://registry.npmjs.org/pacote/-/pacote-17.0.7.tgz",
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@directus/sdk": "^15.1.0",
|
||||
"p5": "^1.9.4",
|
||||
"sharp": "^0.33.3",
|
||||
"swiper": "^11.0.6",
|
||||
"vue": "^3.4.15",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<template>
|
||||
<main>
|
||||
<Brush />
|
||||
<main id="contact">
|
||||
<div>
|
||||
<img
|
||||
|
|
@ -11,9 +13,12 @@
|
|||
<a :href="'mailto:' + globalData.email">{{ globalData.email }}</a>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Brush from '@/components/Brush.vue';
|
||||
|
||||
export default {
|
||||
async setup() {
|
||||
|
||||
|
|
@ -27,6 +32,9 @@ export default {
|
|||
return {
|
||||
globalData
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Brush
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
<template>
|
||||
<main>
|
||||
<Brush />
|
||||
<Projects :contents="galerie" />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Projects from '@/components/Projects.vue';
|
||||
import Brush from '@/components/Brush.vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
|
@ -22,7 +26,8 @@ export default {
|
|||
};
|
||||
},
|
||||
components: {
|
||||
Projects
|
||||
Projects,
|
||||
Brush
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<main>
|
||||
<Brush />
|
||||
<p>{{ globalData.magasin_explication }}</p>
|
||||
<div class="category">
|
||||
<div>
|
||||
|
|
@ -16,6 +17,7 @@
|
|||
|
||||
<script>
|
||||
import Projects from '@/components/Projects.vue';
|
||||
import Brush from '@/components/Brush.vue';
|
||||
|
||||
export default {
|
||||
async setup() {
|
||||
|
|
@ -44,7 +46,8 @@ export default {
|
|||
};
|
||||
},
|
||||
components: {
|
||||
Projects
|
||||
Projects,
|
||||
Brush
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue