Unlocking P5.js with hot reloading!
This example is copied from the P5: Functions example. Several modifications were required to make it work in VizHub with hot reloading:
draw), and we can't rely on
the way P5 usually runs and interprets those.
index.js, some setup is required to import
P5 and manually execute the Sketch.
container DOM element, and remove the old one if
sketch.js as an ES module that
exports a function that accepts the
This was required so that we can call use the
to tell it to attach the canvas to our container element.
background because we are using ES
modules and not globals. However, we can "simulate"
globals by extracting those functions from the p5 instance
p! Since those internally reference
this, we need to
bind to make sure that they work properly. If you
need more p5 functions, you can follow the same pattern
functions to the p5 instance.
I've tried to make this setup mimic regular P5 in the internals as much as possible. It should, in theory, be possible to copy the code from any P5 example straight into this template. Just make sure to:
.parent on the canvas
Magically, this all works pretty well with VizHub's hot reloading, so you can use Alt+drag to edit numbers and see the rendered graphic update instantly.