Jon Rumsey

An online markdown blog and knowledge repository.

Project maintained by nojronatron Hosted on GitHub Pages — Theme by mattgraham

Coding with P5

Host: Olivia Guzzardo @OliviaGuzzardo

Presenter/Guest: Daniel Shiffman @shiffman

university instructor at NYU (ITP/IMA).
publishes online coding tutorials.
mostly geared toward beginners.
producing content for ~10 years.
Tools: P5.js p5js.org by The Processing Foundation which is built on top of Java and JS.
The Coding Train: Dan's website with tutorials, challenges, link to a Discord server, etc.
Book: Nature of Code (2nd Edition)

"Express yourself through code"

Within index.html:

Using Libraries:

Install P5.vscode Extension by Sam Lavigne.
Open Command Palette and type ''.
Point to an existing directory (or create a new one) where the project should be initialized.
A new VSCode instance opens.
Verify file system layout as follows (see example below).
Open sketch.js to start coding!

root
| Libraries
| \p5.min.js
| \p5.sound.min.js
|
| \index.html
| \jsconfig.json
| \sketch.js
| \style.css

The draw loop: Continuously draws the page based on inputs within the draw() function.
Install LivePreview Extension to see immediate results (P5js just runs in a web page DOM).
P5 focuses on Accessibility e.g. Describe() enables visual representations of what is happening on-screen.
Changing the visual design in P5 is really a matter of selecting a different vector object. Dan's example was changing circles to text.

A fairly light-weight brain-dump and "whoops I'm gonna want to remember that" items.

circle: Set an x,y location and a diameter. Not radius!
ellipse: Set an x,y location and w (width) and h (height) of the ellipse. Skip h and it will default to same as w (like Circle()). Negative values are not processed and instead considered an empty parameter. When using WebGL mode, add parameter detail which is an Integer indicating the count of vertices to use to build the ellipse (max 50).

A light-weight section of notes I felt were important to write-out while learning P5.

If coloring the background(color) along with other on-canvas objects, be sure to call background() first before loading other object, otherwise they will not be visible on screen when the draw() function is executing.
createCanvas(width, height, WEBGL, canvas): Only use once within a setup() function. Width and Height arguments are actually optional, defaults are 100 for both. Only use WEBGL parameter if browser supports WebGL Mode. canvas (optional) is an HTMLCanvasElement to use for the sketch.
resizeCanvas(widnowWidth, windowHeight, noRedraw): Define a new width and height for the canvas. noRedraw is boolean, defaults to false, indicates whether to delay calling reDraw() function.
preLoad(): This is a lifecycle event handler. Guarantees these function calls complete before rendering begins: loadImage(), loadFont(), loadJSON(), loadModel().

Essential Concepts:

Vector: An arrow pointing in space. Has both magnitude (length) and direction (heading).
A position vector extends from the origin to the center of the object.
A velocity vector is an arrow pointing in the direction of an object's velocity.
Adding a velocity vector to a position vector moves the object on-screen.
Use p5.Vector class to perform math on Vector instances.
Multiple built-in math functions exist including add(), sub() to subtract, mult() to multiply, and div() to divide.
The p5.Vector class also has static functions that return a new vector instance rather than apply changes to the current instance.

Note: Use createVector() to generate a new instance of the Vector Class.

To make things 'move' on screen:

Set a Position Vector on the object for a starting position.
Set a Velocity Vector to (0,0) to have the object sit still.
Set an Acceleration Vector based on external or internal inputs (an internal option such as p5.Vector.random2D() will work).
Acceleration: The rate at which the Velocity Vector will change. Add to Velocity Vector to set the magnitude of movement.
Position: Where on-screen the object will be drawn. Add the Velocity Vector to update the object's position on-screen.

floor(number): Concatenates a Number to it nearest lower whole number. Any Number type or function that returns a number type can be set as the parameter.
map(value, start1, stop1, start2, stop2, withinBounds): Maps a value within range start1 to stop1, into the range start2 to stop2, returning the remapped number. withinBounds is boolean, defaults to false. When set, it ensures an out-of-bounds value is mapped to an in-bounds remapped number.
noise(x, [y], [z]): Tunable natural-seeming random number generator using Perlin Noise algorithm. Returns floating-point numbers between 0 and 1. Arguments define the 'point in space' that tune the output.
noiseDetail(): Further adjust the Perlin Noise output using 'octaves' and 'weight' to steer the noise quality.