├── .gitignore
├── LICENSE
├── README.md
├── css
└── style.css
├── favicon.svg
├── index.html
├── multi_sketch.html
├── package-lock.json
├── package.json
├── single_sketch.html
├── src
├── multi_sketch.js
└── single_sketch.js
└── vite.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Andrea Bianchi
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # P5.js-vite Starter Template 🚀
2 |
3 | [](https://opensource.org/licenses/MIT)
4 |
5 | [Vite](https://vitejs.dev/) starter template to scaffold a new [p5.js](https://p5js.org) project.
6 |
7 | This is an unopinionated template; aside from P5.js and Vite, the rest of your project's tools are entirely up to you.
8 |
9 | ## Live demo
10 |
11 | For a live demo please [visit this page](https://p5js-vite-demo.surge.sh).
12 |
13 | ## Installation
14 |
15 | Pull the template files with [degit](https://github.com/Rich-Harris/degit) and install dependencies.
16 |
17 | ```
18 | npx degit makinteract/p5js-vite my-project
19 |
20 | cd my-project
21 | npm install
22 | npm run dev
23 | ```
24 |
25 | ## npm scripts
26 |
27 | - `npm run dev` - Starts the development server at port [3000](http://localhost:3000/)
28 | - `npm run build` - Builds the application in a `dist` folder
29 | - `npm run preview` - Serves the build files (`dist` folder) locally at port [5000](http://localhost:3000/)
30 |
31 | Note that if after this last command you do not see anything, you can use instead this other command:
32 |
33 | - `npm run preview --host` - You should then be able to see your files locally at port [5000](http://localhost:3000/)
34 |
35 | ## A single p5.js sketch
36 |
37 | ```js
38 | import '../css/style.css';
39 | import { sketch } from 'p5js-wrapper';
40 |
41 | sketch.setup = function () {
42 | createCanvas(800, 600);
43 | };
44 |
45 | sketch.draw = function () {
46 | background(127); // grey
47 | fill(255, 0, 0); // red
48 | noStroke();
49 | rectMode(CENTER);
50 | rect(width / 2, height / 2, 50, 50);
51 | };
52 |
53 | sketch.mousePressed = function () {
54 | console.log(`I am here at ${mouseX}:${mouseY}`);
55 | };
56 | ```
57 |
58 | And here the body of the html file:
59 |
60 | ```html
61 |
62 |
63 |
64 | ```
65 |
66 | ## Multiple p5.js sketches
67 |
68 | If you want to use multiple sketches, you need to use a different syntax.
69 |
70 | ```js
71 | import '../css/style.css';
72 | import { p5 } from 'p5js-wrapper';
73 |
74 | let sketch1 = new p5((p) => {
75 | p.setup = () => {
76 | const one = document.getElementById('one');
77 | p.createCanvas(one.clientWidth, one.clientHeight);
78 | };
79 |
80 | p.draw = () => {
81 | p.background(100);
82 | };
83 | }, 'one');
84 |
85 | // Sketch2
86 | let sketch2 = new p5((p) => {
87 | p.setup = () => {
88 | const two = document.getElementById('two');
89 | p.createCanvas(two.clientWidth, two.clientHeight);
90 | };
91 |
92 | p.draw = () => {
93 | p.background(170);
94 | };
95 | }, 'two');
96 | ```
97 |
98 | This file is expecting two divs in the html file:
99 |
100 | ```html
101 |
102 |
103 |
104 |
105 |
106 | ```
107 |
108 | ## Adding sound
109 |
110 | Sound is an [experimental feature](https://github.com/makinteract/p5js-wrapper/blob/main/README_SOUND.md).
111 |
112 | Examples usage:
113 |
114 | ```js
115 | import { sketch } from 'p5js-wrapper';
116 | import 'p5js-wrapper/sound';
117 |
118 | import mysound from './mysound.mp3';
119 |
120 | let soundEffect;
121 |
122 | sketch.setup = function () {
123 | createCanvas(100, 100);
124 | soundEffect = loadSound(mysound);
125 | };
126 |
127 | sketch.draw = function () {
128 | background('#eeeeee');
129 | };
130 |
131 | // Play sound on click
132 | sketch.mousePressed = function () {
133 | soundEffect.play();
134 | };
135 | ```
136 |
137 | This example assumes you have a file _mysound.mp3_ in the _src_ folder.
138 |
139 | ## License
140 |
141 | This project is open source and available under the [MIT License](LICENSE).
142 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | margin: 0;
4 | padding: 5px;
5 | align-items: center;
6 | text-align: center;
7 | }
8 | canvas {
9 | display: block;
10 | }
11 |
12 | #one {
13 | display: block;
14 | width: 800px;
15 | height: 600px;
16 | }
17 |
18 | #two {
19 | display: block;
20 | margin-top: 10px;
21 | width: 800px;
22 | height: 600px;
23 | }
24 |
25 | /* Options in index.html */
26 | .options {
27 | display: inline-block;
28 | clear: both;
29 | margin-left: auto;
30 | margin-right: auto;
31 | text-align: center;
32 | }
33 |
34 | .option {
35 | float: left;
36 | padding: 50px;
37 | }
38 |
39 | .emoji {
40 | font-size: 100px;
41 | vertical-align: middle;
42 | line-height: 2;
43 | clear: both;
44 | margin: auto;
45 | }
46 |
47 | .description {
48 | margin: auto;
49 | margin-top: -50px;
50 |
51 | font-family: 'Times New Roman', Times, serif;
52 | font-size: 25px;
53 | letter-spacing: 0.6px;
54 | word-spacing: 2px;
55 | color: #000000;
56 | font-weight: normal;
57 | text-decoration: none;
58 | font-style: normal;
59 | font-variant: small-caps;
60 | text-transform: none;
61 | }
62 |
--------------------------------------------------------------------------------
/favicon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | P5.js Template
8 |
9 |
10 |
11 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/multi_sketch.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite App
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "p5js-vite",
3 | "version": "0.0.0",
4 | "lockfileVersion": 2,
5 | "requires": true,
6 | "packages": {
7 | "": {
8 | "name": "p5js-vite",
9 | "version": "0.0.0",
10 | "dependencies": {
11 | "p5js-wrapper": "^1.2.3"
12 | },
13 | "devDependencies": {
14 | "vite": "^2.7.2"
15 | }
16 | },
17 | "node_modules/esbuild": {
18 | "version": "0.14.36",
19 | "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.36.tgz",
20 | "integrity": "sha512-HhFHPiRXGYOCRlrhpiVDYKcFJRdO0sBElZ668M4lh2ER0YgnkLxECuFe7uWCf23FrcLc59Pqr7dHkTqmRPDHmw==",
21 | "dev": true,
22 | "hasInstallScript": true,
23 | "bin": {
24 | "esbuild": "bin/esbuild"
25 | },
26 | "engines": {
27 | "node": ">=12"
28 | },
29 | "optionalDependencies": {
30 | "esbuild-android-64": "0.14.36",
31 | "esbuild-android-arm64": "0.14.36",
32 | "esbuild-darwin-64": "0.14.36",
33 | "esbuild-darwin-arm64": "0.14.36",
34 | "esbuild-freebsd-64": "0.14.36",
35 | "esbuild-freebsd-arm64": "0.14.36",
36 | "esbuild-linux-32": "0.14.36",
37 | "esbuild-linux-64": "0.14.36",
38 | "esbuild-linux-arm": "0.14.36",
39 | "esbuild-linux-arm64": "0.14.36",
40 | "esbuild-linux-mips64le": "0.14.36",
41 | "esbuild-linux-ppc64le": "0.14.36",
42 | "esbuild-linux-riscv64": "0.14.36",
43 | "esbuild-linux-s390x": "0.14.36",
44 | "esbuild-netbsd-64": "0.14.36",
45 | "esbuild-openbsd-64": "0.14.36",
46 | "esbuild-sunos-64": "0.14.36",
47 | "esbuild-windows-32": "0.14.36",
48 | "esbuild-windows-64": "0.14.36",
49 | "esbuild-windows-arm64": "0.14.36"
50 | }
51 | },
52 | "node_modules/esbuild-android-64": {
53 | "version": "0.14.36",
54 | "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.36.tgz",
55 | "integrity": "sha512-jwpBhF1jmo0tVCYC/ORzVN+hyVcNZUWuozGcLHfod0RJCedTDTvR4nwlTXdx1gtncDqjk33itjO+27OZHbiavw==",
56 | "cpu": [
57 | "x64"
58 | ],
59 | "dev": true,
60 | "optional": true,
61 | "os": [
62 | "android"
63 | ],
64 | "engines": {
65 | "node": ">=12"
66 | }
67 | },
68 | "node_modules/esbuild-android-arm64": {
69 | "version": "0.14.36",
70 | "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.36.tgz",
71 | "integrity": "sha512-/hYkyFe7x7Yapmfv4X/tBmyKnggUmdQmlvZ8ZlBnV4+PjisrEhAvC3yWpURuD9XoB8Wa1d5dGkTsF53pIvpjsg==",
72 | "cpu": [
73 | "arm64"
74 | ],
75 | "dev": true,
76 | "optional": true,
77 | "os": [
78 | "android"
79 | ],
80 | "engines": {
81 | "node": ">=12"
82 | }
83 | },
84 | "node_modules/esbuild-darwin-64": {
85 | "version": "0.14.36",
86 | "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.36.tgz",
87 | "integrity": "sha512-kkl6qmV0dTpyIMKagluzYqlc1vO0ecgpviK/7jwPbRDEv5fejRTaBBEE2KxEQbTHcLhiiDbhG7d5UybZWo/1zQ==",
88 | "cpu": [
89 | "x64"
90 | ],
91 | "dev": true,
92 | "optional": true,
93 | "os": [
94 | "darwin"
95 | ],
96 | "engines": {
97 | "node": ">=12"
98 | }
99 | },
100 | "node_modules/esbuild-darwin-arm64": {
101 | "version": "0.14.36",
102 | "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.36.tgz",
103 | "integrity": "sha512-q8fY4r2Sx6P0Pr3VUm//eFYKVk07C5MHcEinU1BjyFnuYz4IxR/03uBbDwluR6ILIHnZTE7AkTUWIdidRi1Jjw==",
104 | "cpu": [
105 | "arm64"
106 | ],
107 | "dev": true,
108 | "optional": true,
109 | "os": [
110 | "darwin"
111 | ],
112 | "engines": {
113 | "node": ">=12"
114 | }
115 | },
116 | "node_modules/esbuild-freebsd-64": {
117 | "version": "0.14.36",
118 | "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.36.tgz",
119 | "integrity": "sha512-Hn8AYuxXXRptybPqoMkga4HRFE7/XmhtlQjXFHoAIhKUPPMeJH35GYEUWGbjteai9FLFvBAjEAlwEtSGxnqWww==",
120 | "cpu": [
121 | "x64"
122 | ],
123 | "dev": true,
124 | "optional": true,
125 | "os": [
126 | "freebsd"
127 | ],
128 | "engines": {
129 | "node": ">=12"
130 | }
131 | },
132 | "node_modules/esbuild-freebsd-arm64": {
133 | "version": "0.14.36",
134 | "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.36.tgz",
135 | "integrity": "sha512-S3C0attylLLRiCcHiJd036eDEMOY32+h8P+jJ3kTcfhJANNjP0TNBNL30TZmEdOSx/820HJFgRrqpNAvTbjnDA==",
136 | "cpu": [
137 | "arm64"
138 | ],
139 | "dev": true,
140 | "optional": true,
141 | "os": [
142 | "freebsd"
143 | ],
144 | "engines": {
145 | "node": ">=12"
146 | }
147 | },
148 | "node_modules/esbuild-linux-32": {
149 | "version": "0.14.36",
150 | "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.36.tgz",
151 | "integrity": "sha512-Eh9OkyTrEZn9WGO4xkI3OPPpUX7p/3QYvdG0lL4rfr73Ap2HAr6D9lP59VMF64Ex01LhHSXwIsFG/8AQjh6eNw==",
152 | "cpu": [
153 | "ia32"
154 | ],
155 | "dev": true,
156 | "optional": true,
157 | "os": [
158 | "linux"
159 | ],
160 | "engines": {
161 | "node": ">=12"
162 | }
163 | },
164 | "node_modules/esbuild-linux-64": {
165 | "version": "0.14.36",
166 | "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.36.tgz",
167 | "integrity": "sha512-vFVFS5ve7PuwlfgoWNyRccGDi2QTNkQo/2k5U5ttVD0jRFaMlc8UQee708fOZA6zTCDy5RWsT5MJw3sl2X6KDg==",
168 | "cpu": [
169 | "x64"
170 | ],
171 | "dev": true,
172 | "optional": true,
173 | "os": [
174 | "linux"
175 | ],
176 | "engines": {
177 | "node": ">=12"
178 | }
179 | },
180 | "node_modules/esbuild-linux-arm": {
181 | "version": "0.14.36",
182 | "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.36.tgz",
183 | "integrity": "sha512-NhgU4n+NCsYgt7Hy61PCquEz5aevI6VjQvxwBxtxrooXsxt5b2xtOUXYZe04JxqQo+XZk3d1gcr7pbV9MAQ/Lg==",
184 | "cpu": [
185 | "arm"
186 | ],
187 | "dev": true,
188 | "optional": true,
189 | "os": [
190 | "linux"
191 | ],
192 | "engines": {
193 | "node": ">=12"
194 | }
195 | },
196 | "node_modules/esbuild-linux-arm64": {
197 | "version": "0.14.36",
198 | "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.36.tgz",
199 | "integrity": "sha512-24Vq1M7FdpSmaTYuu1w0Hdhiqkbto1I5Pjyi+4Cdw5fJKGlwQuw+hWynTcRI/cOZxBcBpP21gND7W27gHAiftw==",
200 | "cpu": [
201 | "arm64"
202 | ],
203 | "dev": true,
204 | "optional": true,
205 | "os": [
206 | "linux"
207 | ],
208 | "engines": {
209 | "node": ">=12"
210 | }
211 | },
212 | "node_modules/esbuild-linux-mips64le": {
213 | "version": "0.14.36",
214 | "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.36.tgz",
215 | "integrity": "sha512-hZUeTXvppJN+5rEz2EjsOFM9F1bZt7/d2FUM1lmQo//rXh1RTFYzhC0txn7WV0/jCC7SvrGRaRz0NMsRPf8SIA==",
216 | "cpu": [
217 | "mips64el"
218 | ],
219 | "dev": true,
220 | "optional": true,
221 | "os": [
222 | "linux"
223 | ],
224 | "engines": {
225 | "node": ">=12"
226 | }
227 | },
228 | "node_modules/esbuild-linux-ppc64le": {
229 | "version": "0.14.36",
230 | "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.36.tgz",
231 | "integrity": "sha512-1Bg3QgzZjO+QtPhP9VeIBhAduHEc2kzU43MzBnMwpLSZ890azr4/A9Dganun8nsqD/1TBcqhId0z4mFDO8FAvg==",
232 | "cpu": [
233 | "ppc64"
234 | ],
235 | "dev": true,
236 | "optional": true,
237 | "os": [
238 | "linux"
239 | ],
240 | "engines": {
241 | "node": ">=12"
242 | }
243 | },
244 | "node_modules/esbuild-linux-riscv64": {
245 | "version": "0.14.36",
246 | "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.36.tgz",
247 | "integrity": "sha512-dOE5pt3cOdqEhaufDRzNCHf5BSwxgygVak9UR7PH7KPVHwSTDAZHDoEjblxLqjJYpc5XaU9+gKJ9F8mp9r5I4A==",
248 | "cpu": [
249 | "riscv64"
250 | ],
251 | "dev": true,
252 | "optional": true,
253 | "os": [
254 | "linux"
255 | ],
256 | "engines": {
257 | "node": ">=12"
258 | }
259 | },
260 | "node_modules/esbuild-linux-s390x": {
261 | "version": "0.14.36",
262 | "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.36.tgz",
263 | "integrity": "sha512-g4FMdh//BBGTfVHjF6MO7Cz8gqRoDPzXWxRvWkJoGroKA18G9m0wddvPbEqcQf5Tbt2vSc1CIgag7cXwTmoTXg==",
264 | "cpu": [
265 | "s390x"
266 | ],
267 | "dev": true,
268 | "optional": true,
269 | "os": [
270 | "linux"
271 | ],
272 | "engines": {
273 | "node": ">=12"
274 | }
275 | },
276 | "node_modules/esbuild-netbsd-64": {
277 | "version": "0.14.36",
278 | "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.36.tgz",
279 | "integrity": "sha512-UB2bVImxkWk4vjnP62ehFNZ73lQY1xcnL5ZNYF3x0AG+j8HgdkNF05v67YJdCIuUJpBuTyCK8LORCYo9onSW+A==",
280 | "cpu": [
281 | "x64"
282 | ],
283 | "dev": true,
284 | "optional": true,
285 | "os": [
286 | "netbsd"
287 | ],
288 | "engines": {
289 | "node": ">=12"
290 | }
291 | },
292 | "node_modules/esbuild-openbsd-64": {
293 | "version": "0.14.36",
294 | "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.36.tgz",
295 | "integrity": "sha512-NvGB2Chf8GxuleXRGk8e9zD3aSdRO5kLt9coTQbCg7WMGXeX471sBgh4kSg8pjx0yTXRt0MlrUDnjVYnetyivg==",
296 | "cpu": [
297 | "x64"
298 | ],
299 | "dev": true,
300 | "optional": true,
301 | "os": [
302 | "openbsd"
303 | ],
304 | "engines": {
305 | "node": ">=12"
306 | }
307 | },
308 | "node_modules/esbuild-sunos-64": {
309 | "version": "0.14.36",
310 | "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.36.tgz",
311 | "integrity": "sha512-VkUZS5ftTSjhRjuRLp+v78auMO3PZBXu6xl4ajomGenEm2/rGuWlhFSjB7YbBNErOchj51Jb2OK8lKAo8qdmsQ==",
312 | "cpu": [
313 | "x64"
314 | ],
315 | "dev": true,
316 | "optional": true,
317 | "os": [
318 | "sunos"
319 | ],
320 | "engines": {
321 | "node": ">=12"
322 | }
323 | },
324 | "node_modules/esbuild-windows-32": {
325 | "version": "0.14.36",
326 | "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.36.tgz",
327 | "integrity": "sha512-bIar+A6hdytJjZrDxfMBUSEHHLfx3ynoEZXx/39nxy86pX/w249WZm8Bm0dtOAByAf4Z6qV0LsnTIJHiIqbw0w==",
328 | "cpu": [
329 | "ia32"
330 | ],
331 | "dev": true,
332 | "optional": true,
333 | "os": [
334 | "win32"
335 | ],
336 | "engines": {
337 | "node": ">=12"
338 | }
339 | },
340 | "node_modules/esbuild-windows-64": {
341 | "version": "0.14.36",
342 | "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.36.tgz",
343 | "integrity": "sha512-+p4MuRZekVChAeueT1Y9LGkxrT5x7YYJxYE8ZOTcEfeUUN43vktSn6hUNsvxzzATrSgq5QqRdllkVBxWZg7KqQ==",
344 | "cpu": [
345 | "x64"
346 | ],
347 | "dev": true,
348 | "optional": true,
349 | "os": [
350 | "win32"
351 | ],
352 | "engines": {
353 | "node": ">=12"
354 | }
355 | },
356 | "node_modules/esbuild-windows-arm64": {
357 | "version": "0.14.36",
358 | "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.36.tgz",
359 | "integrity": "sha512-fBB4WlDqV1m18EF/aheGYQkQZHfPHiHJSBYzXIo8yKehek+0BtBwo/4PNwKGJ5T0YK0oc8pBKjgwPbzSrPLb+Q==",
360 | "cpu": [
361 | "arm64"
362 | ],
363 | "dev": true,
364 | "optional": true,
365 | "os": [
366 | "win32"
367 | ],
368 | "engines": {
369 | "node": ">=12"
370 | }
371 | },
372 | "node_modules/fsevents": {
373 | "version": "2.3.2",
374 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
375 | "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
376 | "dev": true,
377 | "hasInstallScript": true,
378 | "optional": true,
379 | "os": [
380 | "darwin"
381 | ],
382 | "engines": {
383 | "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
384 | }
385 | },
386 | "node_modules/function-bind": {
387 | "version": "1.1.1",
388 | "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
389 | "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
390 | "dev": true
391 | },
392 | "node_modules/has": {
393 | "version": "1.0.3",
394 | "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
395 | "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
396 | "dev": true,
397 | "dependencies": {
398 | "function-bind": "^1.1.1"
399 | },
400 | "engines": {
401 | "node": ">= 0.4.0"
402 | }
403 | },
404 | "node_modules/is-core-module": {
405 | "version": "2.8.1",
406 | "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz",
407 | "integrity": "sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==",
408 | "dev": true,
409 | "dependencies": {
410 | "has": "^1.0.3"
411 | },
412 | "funding": {
413 | "url": "https://github.com/sponsors/ljharb"
414 | }
415 | },
416 | "node_modules/nanoid": {
417 | "version": "3.3.2",
418 | "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.2.tgz",
419 | "integrity": "sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA==",
420 | "dev": true,
421 | "bin": {
422 | "nanoid": "bin/nanoid.cjs"
423 | },
424 | "engines": {
425 | "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
426 | }
427 | },
428 | "node_modules/p5": {
429 | "version": "1.4.1",
430 | "resolved": "https://registry.npmjs.org/p5/-/p5-1.4.1.tgz",
431 | "integrity": "sha512-3/X+qb0bK2Cg8nuZNpZZvzxkeUSRghOf0S+l8c+U8yIkUTVSbbcV0R8y96rx3InVBVhk8cH9kFC93VlZZElqSw=="
432 | },
433 | "node_modules/p5js-wrapper": {
434 | "version": "1.2.3",
435 | "resolved": "https://registry.npmjs.org/p5js-wrapper/-/p5js-wrapper-1.2.3.tgz",
436 | "integrity": "sha512-nG4xiyydY7v+q0+/6wbE2gj+L7RPf3FDwM68govCcuyrBckXgrfDy+0SKCTNTGwbpypxjVAu5juU4XOlz4IRPw==",
437 | "dependencies": {
438 | "p5": "^1.4.1"
439 | }
440 | },
441 | "node_modules/path-parse": {
442 | "version": "1.0.7",
443 | "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
444 | "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
445 | "dev": true
446 | },
447 | "node_modules/picocolors": {
448 | "version": "1.0.0",
449 | "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
450 | "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
451 | "dev": true
452 | },
453 | "node_modules/postcss": {
454 | "version": "8.4.12",
455 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz",
456 | "integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==",
457 | "dev": true,
458 | "funding": [
459 | {
460 | "type": "opencollective",
461 | "url": "https://opencollective.com/postcss/"
462 | },
463 | {
464 | "type": "tidelift",
465 | "url": "https://tidelift.com/funding/github/npm/postcss"
466 | }
467 | ],
468 | "dependencies": {
469 | "nanoid": "^3.3.1",
470 | "picocolors": "^1.0.0",
471 | "source-map-js": "^1.0.2"
472 | },
473 | "engines": {
474 | "node": "^10 || ^12 || >=14"
475 | }
476 | },
477 | "node_modules/resolve": {
478 | "version": "1.22.0",
479 | "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
480 | "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==",
481 | "dev": true,
482 | "dependencies": {
483 | "is-core-module": "^2.8.1",
484 | "path-parse": "^1.0.7",
485 | "supports-preserve-symlinks-flag": "^1.0.0"
486 | },
487 | "bin": {
488 | "resolve": "bin/resolve"
489 | },
490 | "funding": {
491 | "url": "https://github.com/sponsors/ljharb"
492 | }
493 | },
494 | "node_modules/rollup": {
495 | "version": "2.70.1",
496 | "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.70.1.tgz",
497 | "integrity": "sha512-CRYsI5EuzLbXdxC6RnYhOuRdtz4bhejPMSWjsFLfVM/7w/85n2szZv6yExqUXsBdz5KT8eoubeyDUDjhLHEslA==",
498 | "dev": true,
499 | "bin": {
500 | "rollup": "dist/bin/rollup"
501 | },
502 | "engines": {
503 | "node": ">=10.0.0"
504 | },
505 | "optionalDependencies": {
506 | "fsevents": "~2.3.2"
507 | }
508 | },
509 | "node_modules/source-map-js": {
510 | "version": "1.0.2",
511 | "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
512 | "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
513 | "dev": true,
514 | "engines": {
515 | "node": ">=0.10.0"
516 | }
517 | },
518 | "node_modules/supports-preserve-symlinks-flag": {
519 | "version": "1.0.0",
520 | "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
521 | "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
522 | "dev": true,
523 | "engines": {
524 | "node": ">= 0.4"
525 | },
526 | "funding": {
527 | "url": "https://github.com/sponsors/ljharb"
528 | }
529 | },
530 | "node_modules/vite": {
531 | "version": "2.9.5",
532 | "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.5.tgz",
533 | "integrity": "sha512-dvMN64X2YEQgSXF1lYabKXw3BbN6e+BL67+P3Vy4MacnY+UzT1AfkHiioFSi9+uiDUiaDy7Ax/LQqivk6orilg==",
534 | "dev": true,
535 | "dependencies": {
536 | "esbuild": "^0.14.27",
537 | "postcss": "^8.4.12",
538 | "resolve": "^1.22.0",
539 | "rollup": "^2.59.0"
540 | },
541 | "bin": {
542 | "vite": "bin/vite.js"
543 | },
544 | "engines": {
545 | "node": ">=12.2.0"
546 | },
547 | "optionalDependencies": {
548 | "fsevents": "~2.3.2"
549 | },
550 | "peerDependencies": {
551 | "less": "*",
552 | "sass": "*",
553 | "stylus": "*"
554 | },
555 | "peerDependenciesMeta": {
556 | "less": {
557 | "optional": true
558 | },
559 | "sass": {
560 | "optional": true
561 | },
562 | "stylus": {
563 | "optional": true
564 | }
565 | }
566 | }
567 | },
568 | "dependencies": {
569 | "esbuild": {
570 | "version": "0.14.36",
571 | "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.36.tgz",
572 | "integrity": "sha512-HhFHPiRXGYOCRlrhpiVDYKcFJRdO0sBElZ668M4lh2ER0YgnkLxECuFe7uWCf23FrcLc59Pqr7dHkTqmRPDHmw==",
573 | "dev": true,
574 | "requires": {
575 | "esbuild-android-64": "0.14.36",
576 | "esbuild-android-arm64": "0.14.36",
577 | "esbuild-darwin-64": "0.14.36",
578 | "esbuild-darwin-arm64": "0.14.36",
579 | "esbuild-freebsd-64": "0.14.36",
580 | "esbuild-freebsd-arm64": "0.14.36",
581 | "esbuild-linux-32": "0.14.36",
582 | "esbuild-linux-64": "0.14.36",
583 | "esbuild-linux-arm": "0.14.36",
584 | "esbuild-linux-arm64": "0.14.36",
585 | "esbuild-linux-mips64le": "0.14.36",
586 | "esbuild-linux-ppc64le": "0.14.36",
587 | "esbuild-linux-riscv64": "0.14.36",
588 | "esbuild-linux-s390x": "0.14.36",
589 | "esbuild-netbsd-64": "0.14.36",
590 | "esbuild-openbsd-64": "0.14.36",
591 | "esbuild-sunos-64": "0.14.36",
592 | "esbuild-windows-32": "0.14.36",
593 | "esbuild-windows-64": "0.14.36",
594 | "esbuild-windows-arm64": "0.14.36"
595 | }
596 | },
597 | "esbuild-android-64": {
598 | "version": "0.14.36",
599 | "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.36.tgz",
600 | "integrity": "sha512-jwpBhF1jmo0tVCYC/ORzVN+hyVcNZUWuozGcLHfod0RJCedTDTvR4nwlTXdx1gtncDqjk33itjO+27OZHbiavw==",
601 | "dev": true,
602 | "optional": true
603 | },
604 | "esbuild-android-arm64": {
605 | "version": "0.14.36",
606 | "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.36.tgz",
607 | "integrity": "sha512-/hYkyFe7x7Yapmfv4X/tBmyKnggUmdQmlvZ8ZlBnV4+PjisrEhAvC3yWpURuD9XoB8Wa1d5dGkTsF53pIvpjsg==",
608 | "dev": true,
609 | "optional": true
610 | },
611 | "esbuild-darwin-64": {
612 | "version": "0.14.36",
613 | "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.36.tgz",
614 | "integrity": "sha512-kkl6qmV0dTpyIMKagluzYqlc1vO0ecgpviK/7jwPbRDEv5fejRTaBBEE2KxEQbTHcLhiiDbhG7d5UybZWo/1zQ==",
615 | "dev": true,
616 | "optional": true
617 | },
618 | "esbuild-darwin-arm64": {
619 | "version": "0.14.36",
620 | "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.36.tgz",
621 | "integrity": "sha512-q8fY4r2Sx6P0Pr3VUm//eFYKVk07C5MHcEinU1BjyFnuYz4IxR/03uBbDwluR6ILIHnZTE7AkTUWIdidRi1Jjw==",
622 | "dev": true,
623 | "optional": true
624 | },
625 | "esbuild-freebsd-64": {
626 | "version": "0.14.36",
627 | "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.36.tgz",
628 | "integrity": "sha512-Hn8AYuxXXRptybPqoMkga4HRFE7/XmhtlQjXFHoAIhKUPPMeJH35GYEUWGbjteai9FLFvBAjEAlwEtSGxnqWww==",
629 | "dev": true,
630 | "optional": true
631 | },
632 | "esbuild-freebsd-arm64": {
633 | "version": "0.14.36",
634 | "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.36.tgz",
635 | "integrity": "sha512-S3C0attylLLRiCcHiJd036eDEMOY32+h8P+jJ3kTcfhJANNjP0TNBNL30TZmEdOSx/820HJFgRrqpNAvTbjnDA==",
636 | "dev": true,
637 | "optional": true
638 | },
639 | "esbuild-linux-32": {
640 | "version": "0.14.36",
641 | "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.36.tgz",
642 | "integrity": "sha512-Eh9OkyTrEZn9WGO4xkI3OPPpUX7p/3QYvdG0lL4rfr73Ap2HAr6D9lP59VMF64Ex01LhHSXwIsFG/8AQjh6eNw==",
643 | "dev": true,
644 | "optional": true
645 | },
646 | "esbuild-linux-64": {
647 | "version": "0.14.36",
648 | "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.36.tgz",
649 | "integrity": "sha512-vFVFS5ve7PuwlfgoWNyRccGDi2QTNkQo/2k5U5ttVD0jRFaMlc8UQee708fOZA6zTCDy5RWsT5MJw3sl2X6KDg==",
650 | "dev": true,
651 | "optional": true
652 | },
653 | "esbuild-linux-arm": {
654 | "version": "0.14.36",
655 | "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.36.tgz",
656 | "integrity": "sha512-NhgU4n+NCsYgt7Hy61PCquEz5aevI6VjQvxwBxtxrooXsxt5b2xtOUXYZe04JxqQo+XZk3d1gcr7pbV9MAQ/Lg==",
657 | "dev": true,
658 | "optional": true
659 | },
660 | "esbuild-linux-arm64": {
661 | "version": "0.14.36",
662 | "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.36.tgz",
663 | "integrity": "sha512-24Vq1M7FdpSmaTYuu1w0Hdhiqkbto1I5Pjyi+4Cdw5fJKGlwQuw+hWynTcRI/cOZxBcBpP21gND7W27gHAiftw==",
664 | "dev": true,
665 | "optional": true
666 | },
667 | "esbuild-linux-mips64le": {
668 | "version": "0.14.36",
669 | "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.36.tgz",
670 | "integrity": "sha512-hZUeTXvppJN+5rEz2EjsOFM9F1bZt7/d2FUM1lmQo//rXh1RTFYzhC0txn7WV0/jCC7SvrGRaRz0NMsRPf8SIA==",
671 | "dev": true,
672 | "optional": true
673 | },
674 | "esbuild-linux-ppc64le": {
675 | "version": "0.14.36",
676 | "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.36.tgz",
677 | "integrity": "sha512-1Bg3QgzZjO+QtPhP9VeIBhAduHEc2kzU43MzBnMwpLSZ890azr4/A9Dganun8nsqD/1TBcqhId0z4mFDO8FAvg==",
678 | "dev": true,
679 | "optional": true
680 | },
681 | "esbuild-linux-riscv64": {
682 | "version": "0.14.36",
683 | "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.36.tgz",
684 | "integrity": "sha512-dOE5pt3cOdqEhaufDRzNCHf5BSwxgygVak9UR7PH7KPVHwSTDAZHDoEjblxLqjJYpc5XaU9+gKJ9F8mp9r5I4A==",
685 | "dev": true,
686 | "optional": true
687 | },
688 | "esbuild-linux-s390x": {
689 | "version": "0.14.36",
690 | "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.36.tgz",
691 | "integrity": "sha512-g4FMdh//BBGTfVHjF6MO7Cz8gqRoDPzXWxRvWkJoGroKA18G9m0wddvPbEqcQf5Tbt2vSc1CIgag7cXwTmoTXg==",
692 | "dev": true,
693 | "optional": true
694 | },
695 | "esbuild-netbsd-64": {
696 | "version": "0.14.36",
697 | "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.36.tgz",
698 | "integrity": "sha512-UB2bVImxkWk4vjnP62ehFNZ73lQY1xcnL5ZNYF3x0AG+j8HgdkNF05v67YJdCIuUJpBuTyCK8LORCYo9onSW+A==",
699 | "dev": true,
700 | "optional": true
701 | },
702 | "esbuild-openbsd-64": {
703 | "version": "0.14.36",
704 | "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.36.tgz",
705 | "integrity": "sha512-NvGB2Chf8GxuleXRGk8e9zD3aSdRO5kLt9coTQbCg7WMGXeX471sBgh4kSg8pjx0yTXRt0MlrUDnjVYnetyivg==",
706 | "dev": true,
707 | "optional": true
708 | },
709 | "esbuild-sunos-64": {
710 | "version": "0.14.36",
711 | "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.36.tgz",
712 | "integrity": "sha512-VkUZS5ftTSjhRjuRLp+v78auMO3PZBXu6xl4ajomGenEm2/rGuWlhFSjB7YbBNErOchj51Jb2OK8lKAo8qdmsQ==",
713 | "dev": true,
714 | "optional": true
715 | },
716 | "esbuild-windows-32": {
717 | "version": "0.14.36",
718 | "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.36.tgz",
719 | "integrity": "sha512-bIar+A6hdytJjZrDxfMBUSEHHLfx3ynoEZXx/39nxy86pX/w249WZm8Bm0dtOAByAf4Z6qV0LsnTIJHiIqbw0w==",
720 | "dev": true,
721 | "optional": true
722 | },
723 | "esbuild-windows-64": {
724 | "version": "0.14.36",
725 | "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.36.tgz",
726 | "integrity": "sha512-+p4MuRZekVChAeueT1Y9LGkxrT5x7YYJxYE8ZOTcEfeUUN43vktSn6hUNsvxzzATrSgq5QqRdllkVBxWZg7KqQ==",
727 | "dev": true,
728 | "optional": true
729 | },
730 | "esbuild-windows-arm64": {
731 | "version": "0.14.36",
732 | "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.36.tgz",
733 | "integrity": "sha512-fBB4WlDqV1m18EF/aheGYQkQZHfPHiHJSBYzXIo8yKehek+0BtBwo/4PNwKGJ5T0YK0oc8pBKjgwPbzSrPLb+Q==",
734 | "dev": true,
735 | "optional": true
736 | },
737 | "fsevents": {
738 | "version": "2.3.2",
739 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
740 | "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
741 | "dev": true,
742 | "optional": true
743 | },
744 | "function-bind": {
745 | "version": "1.1.1",
746 | "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
747 | "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
748 | "dev": true
749 | },
750 | "has": {
751 | "version": "1.0.3",
752 | "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
753 | "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
754 | "dev": true,
755 | "requires": {
756 | "function-bind": "^1.1.1"
757 | }
758 | },
759 | "is-core-module": {
760 | "version": "2.8.1",
761 | "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz",
762 | "integrity": "sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==",
763 | "dev": true,
764 | "requires": {
765 | "has": "^1.0.3"
766 | }
767 | },
768 | "nanoid": {
769 | "version": "3.3.2",
770 | "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.2.tgz",
771 | "integrity": "sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA==",
772 | "dev": true
773 | },
774 | "p5": {
775 | "version": "1.4.1",
776 | "resolved": "https://registry.npmjs.org/p5/-/p5-1.4.1.tgz",
777 | "integrity": "sha512-3/X+qb0bK2Cg8nuZNpZZvzxkeUSRghOf0S+l8c+U8yIkUTVSbbcV0R8y96rx3InVBVhk8cH9kFC93VlZZElqSw=="
778 | },
779 | "p5js-wrapper": {
780 | "version": "1.2.3",
781 | "resolved": "https://registry.npmjs.org/p5js-wrapper/-/p5js-wrapper-1.2.3.tgz",
782 | "integrity": "sha512-nG4xiyydY7v+q0+/6wbE2gj+L7RPf3FDwM68govCcuyrBckXgrfDy+0SKCTNTGwbpypxjVAu5juU4XOlz4IRPw==",
783 | "requires": {
784 | "p5": "^1.4.1"
785 | }
786 | },
787 | "path-parse": {
788 | "version": "1.0.7",
789 | "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
790 | "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
791 | "dev": true
792 | },
793 | "picocolors": {
794 | "version": "1.0.0",
795 | "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
796 | "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
797 | "dev": true
798 | },
799 | "postcss": {
800 | "version": "8.4.12",
801 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz",
802 | "integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==",
803 | "dev": true,
804 | "requires": {
805 | "nanoid": "^3.3.1",
806 | "picocolors": "^1.0.0",
807 | "source-map-js": "^1.0.2"
808 | }
809 | },
810 | "resolve": {
811 | "version": "1.22.0",
812 | "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
813 | "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==",
814 | "dev": true,
815 | "requires": {
816 | "is-core-module": "^2.8.1",
817 | "path-parse": "^1.0.7",
818 | "supports-preserve-symlinks-flag": "^1.0.0"
819 | }
820 | },
821 | "rollup": {
822 | "version": "2.70.1",
823 | "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.70.1.tgz",
824 | "integrity": "sha512-CRYsI5EuzLbXdxC6RnYhOuRdtz4bhejPMSWjsFLfVM/7w/85n2szZv6yExqUXsBdz5KT8eoubeyDUDjhLHEslA==",
825 | "dev": true,
826 | "requires": {
827 | "fsevents": "~2.3.2"
828 | }
829 | },
830 | "source-map-js": {
831 | "version": "1.0.2",
832 | "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
833 | "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
834 | "dev": true
835 | },
836 | "supports-preserve-symlinks-flag": {
837 | "version": "1.0.0",
838 | "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
839 | "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
840 | "dev": true
841 | },
842 | "vite": {
843 | "version": "2.9.5",
844 | "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.5.tgz",
845 | "integrity": "sha512-dvMN64X2YEQgSXF1lYabKXw3BbN6e+BL67+P3Vy4MacnY+UzT1AfkHiioFSi9+uiDUiaDy7Ax/LQqivk6orilg==",
846 | "dev": true,
847 | "requires": {
848 | "esbuild": "^0.14.27",
849 | "fsevents": "~2.3.2",
850 | "postcss": "^8.4.12",
851 | "resolve": "^1.22.0",
852 | "rollup": "^2.59.0"
853 | }
854 | }
855 | }
856 | }
857 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "p5js-vite",
3 | "version": "0.1.0",
4 | "scripts": {
5 | "dev": "vite",
6 | "build": "vite build",
7 | "preview": "vite preview"
8 | },
9 | "devDependencies": {
10 | "vite": "^2.7.2"
11 | },
12 | "dependencies": {
13 | "p5js-wrapper": "^1.2.3"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/single_sketch.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Single sketch
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/multi_sketch.js:
--------------------------------------------------------------------------------
1 | import '../css/style.css';
2 | import {p5} from 'p5js-wrapper';
3 |
4 | let sketch1 = new p5( p => {
5 |
6 | p.setup = () => {
7 | // canvas size is specified in the CSS file (size of div #one)
8 | const one= document.getElementById('one');
9 | p.createCanvas(one.clientWidth, one.clientHeight);
10 | // same as: p.createCanvas($("#one").width(), $("#one").height());
11 | };
12 |
13 | p.draw = () => {
14 | p.background(100);
15 | p.fill(255);
16 | p.noStroke();
17 | p.rectMode(p.CENTER);
18 | p.rect(p.mouseX, p.mouseY, 50, 50);
19 |
20 | };
21 | }, 'one');
22 |
23 |
24 | // Sketch2
25 | let sketch2 = new p5( p => {
26 |
27 | p.setup = () => {
28 | // canvas size is specified in the CSS file (size of div #two)
29 | const two= document.getElementById('two');
30 | p.createCanvas(two.clientWidth, two.clientHeight);
31 | // same as: p.createCanvas($("#two").width(), $("#two").height());
32 | };
33 |
34 | p.draw = () => {
35 | p.background(170);
36 | p.noStroke();
37 | p.fill(255);
38 | p.ellipse(p.mouseX, p.mouseY, 50, 50);
39 | };
40 | }, 'two');
--------------------------------------------------------------------------------
/src/single_sketch.js:
--------------------------------------------------------------------------------
1 | import '../css/style.css';
2 | import {sketch} from 'p5js-wrapper';
3 |
4 | sketch.setup = function(){
5 | createCanvas (800, 600);
6 | }
7 |
8 | sketch.draw= function(){
9 | background(100);
10 | fill(255, 0, 0);
11 | noStroke();
12 | rectMode(CENTER);
13 | rect(mouseX, mouseY, 50, 50);
14 | }
15 |
16 | sketch.mousePressed = function(){
17 | console.log('here');
18 | }
19 |
20 |
21 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | // vite.config.js
2 | const { resolve } = require('path')
3 | const { defineConfig } = require('vite')
4 |
5 | module.exports = defineConfig({
6 | build: {
7 | rollupOptions: {
8 | input: {
9 | main: resolve(__dirname, 'index.html'),
10 | single: resolve(__dirname, 'single_sketch.html'),
11 | multi: resolve(__dirname, 'multi_sketch.html')
12 | }
13 | }
14 | }
15 | })
--------------------------------------------------------------------------------