Bootstrap

Programmers use the term bootstrapping to describe a sequence of events that start simple and become more complex over time; the end goal is often to get a system up and running. This tutorial aims to get you up and running with p5.js.

The button below opens the p5.js Web Editor in a new tab. You can use this “in-browser editor for creative coding” free of charge, with or without creating an account.

First Sketch

When you open the p5.js Web Editor, you’ll find a ready-made computer program waiting for you. Programs are called sketches in p5.js lingo.

function setup() {
createCanvas(400, 400);
}

function draw() {
background(220);
}


In the p5.js Web Editor, click the button, then click the button. What happened?

Functions

— Schoolhouse Rock!

function f(x)

In mathematics, functions like $f(x) = x + 1$ take an input argument and produce an output value based on a defined process, or relation. They’re like a little factory. You’ve probably encountered functions like $f$ that deal with numbers as their arguments and values. In this case, $f$ performs an addition operation on its argument to produce its value.

Functions in computer science are more general—think of them as a recipe, or procedure, your computer must follow from top to bottom. They can take arguments as input, or not, and return an output value, or not. You could define $f$ in JavaScript like so.

function f(x) {
return x + 1;
}


setup() and draw()

Let’s unpack the original sketch a little. We know that, altogether, you painted a $400\times400$ canvas light gray.

You defined two functions, setup() and draw(). setup() runs, or executes, once at the beginning of your sketch. draw() runs in a loop that repeats about $60$ times per second. It looks like setup() and draw() don’t take any arguments. These two functions use, or call, the functions createCanvas() and background() with two and one arguments, respectively.

You didn’t use the outputs of these functions directly—we’ll explore that idea in the next tutorial.

Functions Review

What is a function in mathematics? How do they compare to functions in computer science?

Pull out a notebook and write down your answer in language an $8$-year-old could understand. Better yet, explain functions to a child. If you’re struggling to find the words then you may have identified gaps in your knowledge. Nice work—you know what you need to learn! Review the notes above and visit the p5.js website for more extensive reference. Try explaining again and repeat as needed. In sum,

1. Try explaining in simple language
2. Identify gaps in your knowledge
3. Review
4. Refine and simplify

Color

What color is your canvas? It’s gray, sure, but that description isn’t precise enough for your computer to follow.

Grayscale

You can call background() with different different arguments to change the color of your canvas. For now, the set of allowable arguments to background() is the integers from $0$ (black) to $255$ (white), providing a grayscale.

Your computer stores color in its memory as a sequence of binary digits, or bits. Think of bits as tiny switches with a value of either $0$ (off) or $1$ (on). Combining eight bits, or one byte, gives us $2^{8} = 256$ possible shades of gray.

Edit the sketch so that background() is called with $100$ as an argument. Try a few numbers between $0$ and $255$.

RGB

Remember, functions in computer science are flexible. Many programming languages allow you to define functions that work differently depending on the arguments passed.

Calling background() with three arguments unlocks all sorts of fun. By default, the three arguments to background() represent different mixtures of red, green, and blue. The combination of 8-bit colors generates a whopping $2^{8}\times2^{8}\times2^{8} = 16,777,216$ possibilities.

function setup() {
createCanvas(400, 400);
}

function draw() {
background(54, 86, 148); // I call this blue "Joni"
}


Call background() with three arguments. For example, background(54, 86, 148).

The sketch above includes a note, or comment. Comments begin with two forward slashes // and continue to the end of the line. Think of comments as notes to your future self. Days, weeks, or months from now, you will have no idea what you were thinking when you wrote this code.

Color Review

How does color work in p5.js? Which color is your favorite?

Remember, your goal is to explain drawing so simply that a third-grader could understand.

Drawing

Canvases painted one solid color have shown up time and again in the work of artists like Ellsworth Kelly. We’ll continue our exploration of p5.js’ drawing capabilities by focusing on a single position, or point.

function setup() {
createCanvas(400, 400);
}

function draw() {
background(54, 86, 148);
point(200, 200); // hey little fella!
}


Draw a point in the middle of your canvas by calling the function point(200, 200).

Protip: The semicolon at the end of each function call is like punctuation at the end of a sentence; it’s (very) easy to forget them.

The result might be a little… confusing. Did anything happen? If you look closely, you’ll see a single, solitary point drawn at the center of your canvas.

Pixels

The canvas you created is $400\times400$ picture elements, or pixels, wide and high. Imagine your screen divided into squares like a tile floor; each square is a pixel shining with a particular color. The point you drew is $1\times1$ pixels, so it’s like you used a fine tip black pen.

function setup() {
createCanvas(400, 400);
}

function draw() {
background(54, 86, 148);
strokeWeight(8);
stroke(255); // try three arguments
point(200, 200);
}


Adjust the thickness, or weight, of your pen with the strokeWeight() function and its color, or stroke, with stroke().

The point at $(200, 200)$ now has a weight of $8$ pixels and a white stroke color. Much better.

Coordinates

You’ve probably come across a Cartesian coordinate system one way or another. Cartesian coordinates in two dimensions define location by an ordered pair of numbers $(x, y)$. The first number is the horizontal x-coordinate and the second number is the vertical y-coordinate.

Imagine a blank piece of paper divided into squares by a bunch of lines that cross, or intersect, at right angles. If you’ve used graph paper then you’ve got the idea.

The point you drew at $(200, 200)$ wound up at the center of your $400\times400$ canvas. Coordinates are usually given relative to the point $(0, 0)$, called the origin. In computer graphics, the origin is located at the top-left corner.

Draw another point at $(50, 100)$. Where did it show up?

Interactivity

p5.js keeps track of several quantities, or variables, that help in designing interactions; mouseX and mouseY are especially useful.

function setup() {
createCanvas(400, 400);
}

function draw() {
background(54, 86, 148);
stroke(255);
strokeWeight(8);
point(mouseX, mouseY);
}


Try passing mouseX and mouseY as arguments to point().

Drawing Review

How does p5.js create drawings on your computer screen?

Project Ideas

Lines Make the mouse pointer work like a pen and leave ink on the canvas as you move.

Weight Vary the pen’s thickness as you move around the canvas.