Bootstrap

Under Construction

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 a code editor in a new tab. Set up your free account and let’s get to it!

p5.js Web Editor

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?

Let’s unpack this sketch a little. Functions bundle related information and instructions together under a common name. Think of them as a recipe, or procedure, your computer must follow from top to bottom. The sketch defines two functions, setup and draw, that are essential ingredients. They in turn use, or call, the functions createCanvas and background. Altogether you painted a canvas light gray. Neat!

Conjunction Junction, what’s your function?

— Schoolhouse Rock!

In mathematics, functions like take an input and produce some sort of output. Most functions you’ll encounter operate on numbers as their input, sometimes several at once! simply adds one to whatever number you provide.

Functions in computer science are more flexible. They can take arguments as input, or not, and return an output, or not. You could define in JavaScript like so.

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

Back to the original sketch, it looks like setup and draw don’t take any arguments. createCanvas and background are called with two and one arguments, respectively. We don’t use their output directly.

Edit the sketch so that background is called with as an argument. Try a few numbers between and .

Functions Review

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

Pull out a notebook and write down your answer in language an -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

Hello, Point

Painting a canvas one solid color works if you’re Ellsworth Kelly, but we’ll tack in a different direction.

The sketch below 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 at this moment.

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

function draw() {
  background(220);
  point(200, 200); // wait, what's a point?
}

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 in the middle of your canvas. Hey little fella!

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

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

function draw() {
  background(220);
  strokeWeight(8);  // try different weights
  point(200, 200);
}

Adjust the thickness, or weight, of your pen with the strokeWeight function.

The point at now has a weight of pixels. Much better.

Graph Paper

Why do we need to call createCanvas and point with two numbers as arguments?

You may have seen a Cartesian coordinate system before. Cartesian coordinates in two dimensions define location by an ordered pair of numbers . The first number is the horizontal x-coordinate, or abscissa, and the second number is the vertical y-coordinate, or ordinate.

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 wound up at the center of your canvas. Coordinates are usually given relative to the point , called the origin. In computer graphics, the origin is located at the top-left corner.

Draw another point at . Where did it show up?

Coordinates Review

What is a coordinate system? How does p5.js lay out its coordinate system?

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

Grayscale

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

Hopefully you played around with background earlier and saw that changing the argument changed the color of your canvas. At the extremes, paints your canvas black and paints it white. The range of numbers from covers distinct values of gray, called 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 (off) or (on). Combining eight bits, or one byte, gives us possible shades of gray.

What happens if you call background with three arguments? For example, background(0, 120, 240).


All source code is licensed under the MIT License. Text and images are free to remix under the terms of a Creative Commons Attribution 4.0 International License.