/
p5.vue
69 lines (58 loc) · 1.22 KB
/
p5.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<template>
<div/>
</template>
<script>
import p5 from "p5/lib/p5.min.js";
function distinct(arr) {
return Array.from(new Set(arr));
}
const initialEvents = [
"preload",
"setup",
"draw",
"deviceMoved",
"deviceTurned",
"deviceShaken",
"keyPressed",
"keyReleased",
"keyTyped",
"mouseMoved",
"mouseDragged",
"mousePressed",
"mouseReleased",
"mouseClicked",
"doubleClicked",
"mouseWheel",
"touchStarted",
"touchMoved",
"touchEnded",
"windowResized",
];
export default {
name: "VueP5",
props: ["additionalEvents"],
computed: {
p5Events() {
const {additionalEvents} = this;
return Array.isArray(additionalEvents)
? distinct(initialEvents.concat(additionalEvents))
: initialEvents;
},
},
mounted() {
new p5(sketch => {
this.$emit("sketch", sketch);
for (const p5EventName of this.p5Events) {
const vueEventName = p5EventName.toLowerCase();
const savedCallback = sketch[p5EventName];
sketch[p5EventName] = (...args) => {
if (savedCallback) {
savedCallback(sketch, ...args);
}
this.$emit(vueEventName, sketch, ...args);
};
}
}, this.$el);
},
};
</script>