This application defines a React component, Sketch, that renders a p5.js sketch.
-
Copy
Sketch.js
into your project. -
Add the npm p5 module to
package.json
:npm install --save p5
-
Create the sketch. The sketch can be written as a normal p5.js sketch, except that:
- It must begin wth
import { p } from './Sketch.js'
- Functions that mean something special to p5.js, such as
setup
anddraw
, must beexport
-ed. - It is running in React instance
mode.
React methods must be accessed via the
p.
prefix; for example,p.rect(…)
. A function that is called after theexport
-ed function has returned, must use a captured value ofp
.
See
src/sketch1.js
andsrc/sketch2.js
as examples. - It must begin wth
-
Import the sketch and use it as a component:
import * as sketch1 from './sketch1'; <Sketch sketch={sketch1} width={200} height={100} />
See
src/App.js
for examples.
-
The
setup
function mustn't create the canvas. (This limitation is easy to remove, I just haven't done it yet.) -
Resizing the component, by changing the value of its
width
orheight
properties, creates a new sketch without discarding the old one. I haven't tested to see what happens in this case. -
If a sketch uses global (module-level) variables, it probably doesn't make sense to use in several instances of Sketch. This could be fixed by recognizing if the module is a function, and using this to create the instance-mode sketch.
MIT