P5.js-vite Starter Template 🚀

Vite starter template to scaffold a new p5.js 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.

Installation

Pull the template files with 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
npm run build - Builds the application in a dist folder
npm run preview - Serves the build files (dist folder) locally at port 5000

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

A single p5.js sketch

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:

<body>
  <script type="module" src="/src/single_sketch.js"></script>
</body>

Multiple p5.js sketches

If you want to use multiple sketches, you need to use a different syntax.

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:

<body>
  <script type="module" src="/src/multi_sketch.js"></script>
  <div id="one"></div>
  <div id="two"></div>
</body>

Adding sound

Sound is an experimental feature.

Examples usage:

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.

voidit / p5js-vite