Article summary
p5.js is the best JS library for creating something fun. It offers basic lines, color manipulation tools, and everything in between — even audio processing tools like filters. It’s simple to jump in and start creating!
But with all of this at your disposal, it can be easy to get lost in the sauce and miss an easier or better way to do something. After working with P5 for over a year, I’ve found my own set of tricks, and I’d love to pass them on.
1. Push/Pop
Push/Pop is the best discovery I’ve made. P5 is inherently stateful, so if you make a call to change the color — like stroke('blue') — your lines will stay blue until you make another call to stroke. Keeping track of the state of your line colors is frustrating, and thankfully unnecessary.
push and pop are here to save the day with their state management! One call to push will save your current state (like a checkpoint). Calling pop will do the opposite — undo all state changes until it returns to your last push.
I love using push/pop in reusable functions. Putting a push/pop at the start/end of a function creates independent functions that don’t muddy up state after they return.
2. NoLoop
noLoop is the “correct” way to make sketches that don’t loop. P5 provides you with two functions to run your code: setup and draw. Setup runs once at the start, and then draw is called repeatedly to generate new “frames.”
I used to put all of my code in setup when I wanted to avoid the stress of repeated renders. Instead, just include noLoop in your setup function, and draw will only run once.
3. WebGL
WebGL adds an entirely new dimension to P5 — literally. WebGL adds the Z Dimension and takes P5 into the 3rd dimension, adding a lot of complexity with controls for cameras, shaders, and more.
If you’re new to P5, I probably wouldn’t dive headfirst into 3D sketches, but who am I to stop you.
4. LerpColor
Color is always one of my favorite parts of P5, and LerpColor is one of the best tools to manipulate it. lerpColor asks for two colors and a number between 0 and 1. It does some math and returns a new color — one that was interpolated between your two colors! So calling lerpColor with black, white, and .5 would give you a perfect 50% grey. .01 instead would give you almost perfectly black, and so on.
There’s a lot of creative ways to use lerpColor. It’s a great tool for hand-crafting your own gradients.
5. SaveCanvas
Once you’ve finished your gorgeous artwork, I’m sure you want to save it and share it with your friends. Screenshotting is one solution, even though it’s a little imprecise. The better solution is to use saveCanvas! SaveCanvas can take a few arguments, but a simple call with no arguments will give you a browser save dialog with your canvas loaded into it!
Saving animated sketches can be a little more tricky with two decent options:
- Save 1 image for each frame and then assemble them into a gif with individual frames. Pros: high fidelity. Cons: Tedious, more work.
- Screen Record with your favorite software. Pros: No extra steps, image compression. Cons: Needs file recorder, imprecise.
I hope at least one of these tips helps you on your P5 journey! I’d love to hear if you have any tools you like to use or if you’ve made anything cool with P5.