# 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.

## Hello, p5

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!

### f(x)

In mathematics, functions like $f(x) = x + 1$ take an argument and produce a value based on a defined process, or relation. They’re like little factories converting inputs to outputs.

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. You could define $f$ in JavaScript like so.

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


### setup() and draw()

Functions in computer science are more general—think of them as a recipe, or procedure, your computer must follow from start to finish. Each step in the procedure is an instruction, or statement. Functions can take arguments as input, or not, and return an output value, or not.

Let’s unpack the original sketch a little. We know that, altogether, you painted a $400\times400$ canvas light gray. You did so by defining two special functions, setup() and draw().

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

function draw() {
background(220);
}


setup() runs, or executes, once at the beginning of your sketch. It uses, or calls, the function createCanvas() to create a canvas for drawing. The call to createCanvas() is the only statement in setup().

draw() executes in a loop that repeats from top to bottom about $60$ times per second. It calls background() to continually paint the background.

You didn’t use the outputs of any 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.

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

function draw() {
background(100);
}


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 may 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.

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

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).

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 by calling strokeWeight() and its color, or stroke, with stroke().

The point at $(200, 200)$ now has a weight of $8$ pixels and a white stroke. 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.

Take a break from the computer and open up your favorite book to its first page. Where on the page would you start reading?

If the book is written in a Western language, you would start near the top-left corner and move across the page to the right, proceeding downward for each new line. Turns out you’ve used a similar coordinate system since you were a kid!

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

### Interactivity

p5.js keeps track of several changing 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);
}


Statements execute in order, or sequentially. Move background() so that it follows point(). What happened?

### 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.

Color Change the background and stroke colors as you move around the canvas.