p5-inst
Tiny utility for instance mode of p5.js.
ES6/TypeScript friendly.
How to load
With <script> tag
Something like this in the <head> tag:
<script src="https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fal-works/p5-inst@0.2.0/lib/p5-inst.js"></script>
<script src="path/to/your/sketch.js"></script>Now in your source code you can use a global variable p5Inst, which is defined by p5-inst.js.
const { createSketch } = p5Inst;As ES Module
npm install -D @fal-works/p5-inst
import { createSketch } from "@fal-works/p5-inst";How to use
-
Import the
createSketch()function (see above). -
Prepare any
p5related functions such assetup()anddraw().
Unlike the usual use of p5.js, each function should accept ap5instance as the first argument. -
Call
createSketch(), passing the functions you prepared.
This returns aSketchobject. -
Call
new p5(), passing theSketchobject you created above.
// Import createSketch() in some way
const setup = (p) => {
p.createCanvas(400, 400);
// prepare something
};
const draw = (p) => {
p.background(240);
// draw something
};
const sketch = createSketch({
setup,
draw,
// you may include other methods as well, e.g. mousePressed()
});
new p5(sketch);