p5.js
Write Processing-style p5.js sketches that render as images.
What it does
Runs a Processing-style creative-coding sketch and streams the result in as an image. The sketch defines p.setup and p.draw using the p5 vocabulary (background, fill, circle, sin, getTime, and the rest) and renders live at the Width and Height set on the node.
Time comes from the graph's own clock, so animated sketches play back in sync with the rest of the scene.
When to use it
An existing p5.js or Processing sketch brought into the graph as a live, animated texture.
Code-level control over a generative pattern that is awkward to build from nodes alone.
Animated backgrounds, overlays and textures driven by maths or noise rather than painted or photographed.
| Parameter | Type | Default |
|---|---|---|
code | String | "p.draw = function() { bac..." |
width | Number | 512 |
height | Number | 512 |
opacity | Number | 1 |
Gotchas
Define p.setup and p.draw, the p5 instance-mode functions, not the global setup/draw. That is the shape the node expects.
Use getTime() inside the sketch for animation, not your own frame counter. Time is driven externally so playback stays locked to the graph.
Width and Height set the canvas resolution the sketch draws into. Changing them changes the pixel coordinates a sketch relies on, such as width/2 and height/2, so revisit hard-coded positions after a resize.
Worked example
Add a p5.js node. It starts with a default sketch, a pulsing circle in the middle of the canvas.
Edit the code to build your own sketch, using
p.setupfor one-time setup andp.drawfor what runs every frame.Set Width and Height to the resolution the sketch renders at.
Wire the image output into a composite, mask, or any other node that takes an image.
See also
Hydra · Lua · Script · Rasters (images)