Getting Started

P5 is a visualization wrapper library that makes interacting with drawing objects a lot nicer than playing with the native options. It's used as the definitive creative coding tool.

Learn

Check out the following resources for the best guide to learn p5 from awesome educators!

Crash course

Animations

P5 has similar mandatory functions as Arduino. setup() and draw().

In traditional hand drawn animation, when you want to animate an object, you would simply take an empty canvas, draw your object, then open a new canvas and translate / transform your object then repeat this process until your animation is complete.

Check out these simple examples to see how we can trigger the draw() function as a loop or on event.

• Setup and Draw
• Redraw
• Rotate

Presenting

To full screen the editor, change /sketches/ in the URL to /full/.

For example, editor.p5js.org/p5/sketches/Interaction:_Wavemaker becomes editor.p5js.org/p5/full/Interaction:_Wavemaker.

To share a full screen link:

1. Click File at the top left
2. Click Share
3. Copy the link in the Fullscreen field

Live Coding

Make sure you have a "trail map" of what concepts you want to sprinkle in and visit.