Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/makinteract/p5js-vite
Template for P5.js with Vite
https://github.com/makinteract/p5js-vite
Last synced: 15 days ago
JSON representation
Template for P5.js with Vite
- Host: GitHub
- URL: https://github.com/makinteract/p5js-vite
- Owner: makinteract
- License: mit
- Created: 2021-12-16T03:44:01.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-11T09:53:32.000Z (over 1 year ago)
- Last Synced: 2024-07-31T22:37:55.529Z (3 months ago)
- Language: JavaScript
- Size: 30.3 KB
- Stars: 45
- Watchers: 2
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# P5.js-vite Starter Template 🚀
[](https://opensource.org/licenses/MIT)
[Vite](https://vitejs.dev/) starter template to scaffold a new [p5.js](https://p5js.org) project.
This is an unopinionated template; aside from P5.js and Vite, the rest of your project's tools are entirely up to you.
## Live demo
For a live demo please [visit this page](https://p5js-vite-demo.surge.sh).
## Installation
Pull the template files with [degit](https://github.com/Rich-Harris/degit) and install dependencies.
```
npx degit makinteract/p5js-vite my-project
cd my-project
npm install
npm run dev
```
## npm scripts
- `npm run dev` - Starts the development server at port [3000](http://localhost:3000/)
- `npm run build` - Builds the application in a `dist` folder
- `npm run preview` - Serves the build files (`dist` folder) locally at port [5000](http://localhost:3000/)
Note that if after this last command you do not see anything, you can use instead this other command:
- `npm run preview --host` - You should then be able to see your files locally at port [5000](http://localhost:3000/)
## A single p5.js sketch
```js
import '../css/style.css';
import { sketch } from 'p5js-wrapper';
sketch.setup = function () {
createCanvas(800, 600);
};
sketch.draw = function () {
background(127); // grey
fill(255, 0, 0); // red
noStroke();
rectMode(CENTER);
rect(width / 2, height / 2, 50, 50);
};
sketch.mousePressed = function () {
console.log(`I am here at ${mouseX}:${mouseY}`);
};
```
And here the body of the html file:
```html
```
## Multiple p5.js sketches
If you want to use multiple sketches, you need to use a different syntax.
```js
import '../css/style.css';
import { p5 } from 'p5js-wrapper';
let sketch1 = new p5((p) => {
p.setup = () => {
const one = document.getElementById('one');
p.createCanvas(one.clientWidth, one.clientHeight);
};
p.draw = () => {
p.background(100);
};
}, 'one');
// Sketch2
let sketch2 = new p5((p) => {
p.setup = () => {
const two = document.getElementById('two');
p.createCanvas(two.clientWidth, two.clientHeight);
};
p.draw = () => {
p.background(170);
};
}, 'two');
```
This file is expecting two divs in the html file:
```html
```
## Adding sound
Sound is an [experimental feature](https://github.com/makinteract/p5js-wrapper/blob/main/README_SOUND.md).
Examples usage:
```js
import { sketch } from 'p5js-wrapper';
import 'p5js-wrapper/sound';
import mysound from './mysound.mp3';
let soundEffect;
sketch.setup = function () {
createCanvas(100, 100);
soundEffect = loadSound(mysound);
};
sketch.draw = function () {
background('#eeeeee');
};
// Play sound on click
sketch.mousePressed = function () {
soundEffect.play();
};
```
This example assumes you have a file _mysound.mp3_ in the _src_ folder.
## License
This project is open source and available under the [MIT License](LICENSE).