Working with p5.js

Casey Reas is a visual artist, educator, and co-creator of [Processing](https://processing.org/). His work explores the relationship between code and form, often using rule-based systems and generative processes.

Software Structures

A series of algorithmic drawings inspired by the conceptual art of Sol LeWitt. Each piece is generated from a written instruction, interpreted visually through code.

Signal to Noise

Real-time video-based compositions that blur the boundaries between signal (meaningful information) and noise (randomness).

https://reas.com

Ben Fry focuses on data visualization, computational design, and tools for exploring complex datasets.

Genome Viewer (Valence)

A data visualization tool that maps the human genome, created in collaboration with the Broad Institute. It makes large-scale biological data readable and interactive.

All Streets

A map of all the streets in the United States—with no labels, cities, or boundaries. The resulting image reveals patterns of habitation purely through street networks.

ZIPdecode

An interactive tool that visualizes how ZIP codes in the United States relate to geographic locations, digit by digit.

https://benfry.com

Here's a simple example of a p5.js sketch that draws an ellipse that follows the mouse cursor:

More info and examples are available at the [official p5.js website](https://p5js.org/) or the [p5.js Reference](https://archive.p5js.org/reference/).

This is a collection of useful p5.js code snippets for common tasks and creative coding patterns. Each snippet is designed to be short, practical, and easy to adapt to your own sketches.

Controlling Color

colorMode() in p5.js sets how colors are interpreted. Using HSB (Hue, Saturation, Brightness) is often better because it separates color, intensity, and lightness, making color control more intuitive.

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  fill(90, 100, 70, 100);
  stroke(270, 100, 70, 100);
  strokeWeight(10);
}

function draw() {
  background(0, 0, 0, 100);
  ellipse(mouseX, mouseY, 50, 50);
}

Random Numbers

random() in p5.js returns a random number, useful for adding unpredictability. randomSeed() sets the starting point for random values, making results repeatable — helpful for debugging or creating consistent outcomes.

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  fill(90, 100, 70, 100);
  stroke(270, 100, 70, 100);
  strokeWeight(10);
}

function draw() {
  background(0, 0, 0, 100);
  const dotSize = random(-20, 100);
  ellipse(mouseX, mouseY, dotSize);
}

Map Data

map() in p5.js converts a number from one range to another. It's useful for scaling values, like turning mouse position into color or speed.

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  fill(90, 100, 70, 100);
}

function draw() {
  background(0, 0, 0, 100);
  const hue = map(mouseX, 0, 400, 0, 360);
  const dotSize = map(mouseY, 0, 400, 0, 50);
  fill(hue, 100, 100, 100);
  ellipse(mouseX, mouseY, dotSize);
}

Distance between points

dist() in p5.js calculates the distance between two points. It's useful for measuring how far apart objects are, often used in movement or collision detection.

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  fill(90, 100, 70, 100);
}

function draw() {
  background(0, 0, 0, 100);
  const dotSize = dist(0, 0, mouseX, mouseY);
  ellipse(width/2, height/2, dotSize);
}

Translate & Rotate

translate() in p5.js moves the origin of the drawing space, letting you draw shapes in a new position. rotate() turns the drawing space, useful for rotating shapes around a point.

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  fill(335, 92, 87, 100);
}

function draw() {
  background(0, 0, 0, 100);
  translate(width/2, height/2);
  rotate(45);
  rect(-30, -30, 60, 60);
}

Simple Animation

This code creates a rotating rectangle in the center of the canvas. The translate() function moves the origin to the center, and rotate(angle) spins the rectangle around that point. angle increases over time, causing continuous rotation, while the semi-transparent background creates a fading trail effect.

let angle = 0;

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  fill(335, 92, 87, 100);
}

function draw() {
  background(0, 0, 0, 10);
  translate(width/2, height/2);
  rotate(angle);
  rect(0, 0, 60, 60);
  angle += 0.08;
}

To create smooth animations, we can use easing functions. These functions control the acceleration and deceleration of an animation, making it feel more natural.

Example 1: Basic Easing

Here's a simple example of using an easing function in p5.js:

Example 2: Spring-like Easing

Here's a more complex example. This sketch simulates a smooth, spring-like follower that appears to be pulled toward the mouse as if attached by a flexible rubber band. The motion includes a slight overshoot before settling back toward the target, resulting in a natural and organic animation similar to the visual behavior of an easeOutBack curve commonly used in motion design.