├── .gitignore
├── package.json
├── single_sketch.html
├── src
├── single_sketch.js
└── multi_sketch.js
├── vite.config.js
├── multi_sketch.html
├── favicon.svg
├── index.html
├── LICENSE
├── css
└── style.css
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
--------------------------------------------------------------------------------
/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/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 | })
--------------------------------------------------------------------------------
/multi_sketch.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite App
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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');
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------