@fal-works/p5-inst
v0.2.0
Published
Tiny utility for p5.js instance mode.
Downloads
3
Readme
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/[email protected]/lib/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fal-works/[email protected]/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-instimport { 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);