p5.js

p5

p5 is a JavaScript library inspired by the design, code and philosophy of Processing, a Java based library designed starting in 2001 in order to be a language friedly to artists and educators learning how to use programming in an artistic context.

Like Processing, p5 was developed with idea of drawing in mind. Programs are referred to as sketches and basic drawing tools like shape and color form the basis of the language.

Since it's origin, many other functionalities have been added to this set to incorporate things like interaction, audio and video.

Let's take a look at how p5 is set up. We are going to use the p5 Web Editor as our Integrated Development Environment (IDE) this semester. That basically means that the tools we need to write, run and test our code are all built into the same place.

When you create a new sketch with the p5 editor, it set ups a small website by default. To see the files that are created, use the arrow button next to the sketch.js bar on the top left of your code. You will see three files, index.html, style.css and sketch.js. These are the three main components of a website.

For a p5 sketch, these files are very simple. They set up a basic site where we can begin to write our own code and preview it in the browser using the HTML canvas.

HTML5 Canvas

The HTML5 Canvas is a HTML element introduced with the HTML5 standard around 2011 to implement graphical programming within the web browser.

The canvas can be used to draw graphics on the screen using JavaScript. This can be done in vanilla JavaScript (vanilla refers to the practice of writing JavaScript without the addition of libraries like jQuery) but there are many libraries that make drawing to the canvas easier.

Coordinate system

Cartesian coordinate system vs p5 coordinate system

https://processing.org/tutorials/coordinatesystemandshapes

First sketch

Okay, let's get started. Here's the beginning of our program:

function setup() { createCanvas(640, 360); } function draw() { background(220); ellipse(320, 180, 100); }

Let's talk about some observations about what might be happening here and then go over the code.

Functions

Every p5 sketch has two main functions. The setup function is used to setup our drawing and initialize some basics. It runs once when our program starts.

Let's do a quick aside to explain functions in JavaScript, because we're going to be using a them today and for the rest of the semester. Basically everything in JavaScript and p5 uses functions.

A function is simply a series of commands or actions we want the program to perform. Functions have names so we can invoke or call them. When we call a function, the program runs the lines of code contained inside.

A function is sort of like a mini-program inside of the main program.

Functions are used to describe a task that you may want to do more than once, so it can be repeated.

A function is sort of like a recipe for a peanut butter and jelly sandwich. There are a steps that can be followed to make the sandwich that are pretty much the same every time, but might have some variation depending on what ingredients you have available.

Function declaration

Creating a function is like declaring a variable with slightly different syntax. There are a few ways to do it, but the way we will mostly be doing it looks like this:

function foo() {
	var fruit = "banana";
	console.log(fruit);
}

To make that function run, it must be called or invoked. Invoking a function is done by writing the function name again with parentheses.

foo();

Once defined, the function can be called as many times as needed for the program.

Arguments

Functions use arguments to change the outcome. An argument might be like a special ingredient in our sandwich.

function sandwich(fruit) {
	console.log("A peanut butter, jelly and " + fruit + " sandwich.");
}

The result of the function depends on the value argument added. The argument is added in the parentheses when the function is invoked.

sandwich("banana");
sandwich("apple");
sandwich("ketchup");

createCanvas

Back to our p5 sketch.

The createCanvas function creates a new <canvas> element on the HTML page where our drawing code will be rendered.

The two numbers, (640, 360) in parentheses are arguments. Some functions, like createCanvas take arguments, which have an effect on the way the function behaves. In this case, the numbers determines the width and height of our drawing in pixel dimensions.

Here's our basic sketch again. Try changing the arguments to createCanvas to see how the sketch is changed.

function setup() { createCanvas(640, 360); } function draw() { background(220); ellipse(320, 180, 100); }

Now try changing the arguments in the other functions. What happens? Can you guess what each value represents?

Now let's continue. The following is a basic self portrait example.

In p5, setup is called once when the program starts.

The draw function is where all of our drawing code will go. This function runs over and over again for as long as the program is open. So all of that code is being executed about 60 times a second, or however fast your browser is running.

// self portrait function setup() { createCanvas(640, 360); } function draw() { background("white"); noStroke(); // face fill("green"); rect(100, 50, 200, 250); // eyes fill("blue"); ellipse(150, 150, 50, 100); ellipse(250, 150, 40, 80); // ears fill("yellow"); ellipse(150, 150, 40, 40); ellipse(250, 150, 30, 30); // mouth stroke("blue"); line(150, 250, 250, 280); }

There's a few more functions in here. You may be able to guess what they do based on their names. We'll look through and talk about all of them.

p5 Reference

The p5 Reference page has a list of all the functions and properties with links to examples and descriptions.

This type of resource is know as documentation. Documentation is an essential resource for learning any programming language. Reading and using documentation is an important skill for a developer to work on.

Click on the shape link in the reference page and choose a 2D primitive and read the reference page. These are what we'll be covering first.

Shapes

In our sketch we are using default shape functions defined by p5, including ellipse and rect.

These lines are functions. Eventually you will write your own functions but for now we're going to learn about them using the p5 defined functions.

In p5, there are default shapes with different qualities. Shapes are defined by the position in the canvas, the size of the shape and the type of shape.

Rect

rect(100, 100, 200, 250);

The order of the rect arguments is also (x, y, width, height).

Note: In these examples I am omitting the draw function because the drawing only needs to be rendered once. We'll talk more about this when we cover interactivity.

function setup() { createCanvas(200, 200); background(220); rect(50, 50, 100, 100); }

A function is called using the () at the end. These are the special characters that lets the program know to call the function or make it do whatever it is written to do.

Inside the () are arguments which we can change to change the outcome of the function. For an ellipse we use the arguments to determine the x and y position of the ellipse on the canvas, as well as the width and height.

In these example, all of the arguments are numerical values like 100 or 200.

The arguments need to be written in the specified order. For ellipse it is (x, y, width, height).

You can also make a circle (an ellipse with the same width and height), by using three arguments: (x, y, size).

Ellipse & Arc

ellipse(150, 200, 50, 100);

A function is a series of instructions for our program. It's sort of like a mini program within the larger program. A function has a name that describes what it does, such as ellipse which renders or draws an ellipse on the canvas.

function setup() { createCanvas(200, 200); background(220); ellipse(100, 100, 100, 100); }

arc(150, 200, 50, 100, 0, PI);

arc is like an ellipse that has a starting and ending point, like a pie. It also uses the Math constant, PI, as a measurement for the start and end point.

The starting point 0 is at 3 o'clock on a clock face. PI is halfway around at 9 o'clock and PI * 2 or TWO_PI brings us back to the beginning.

function setup() { createCanvas(200, 200); background(220); arc(100, 100, 100, 100, 0, PI); }

rectMode

By default, a rectangle will be drawn from the top left corner, while the ellipse and arc are drawn from the center.

Using rectMode the rectangle can be changed to draw from the center.

function setup() { createCanvas(400, 200); background(220); // default ellipse(50, 50, 50); rect(50, 50, 100, 100); rectMode(CENTER); rect(300, 50, 100, 100); ellipse(300, 50, 50); }

Point, line, triangle, quad

rect, ellipse and arc use an xy coordinate to determine the position and then add a width and height to determine the size of the shape.

These shapes use a series of points and fill lines between the points.

function setup() { createCanvas(200, 200); background(220); point(100, 10); // one xy coordinate line(20, 20, 180, 20); // two xy coordinates // after 2 points a fill is added triangle(40, 40, 100, 100, 160, 40); // three xy coordinates quad(60, 120, 140, 120, 180, 180, 20, 180); // four xy coordinates }

Comments

In the previous examples, I have added notes into my code using comments. In programming, comments are sections of the script that are not read by the compiler or interpreter. They are used for developers to write notes to other developers explaining what the code is doing in plain English.

Comments can also be used to remove sections of code temporarily to test a program.

In JavaScript, there are two types of comments:

// single line

Single lines comments are used to explain one line of code or create sections of code.

// face
rect(10, 10, 10, 10);
ellipse(10, 10, 20); // left eye

/*
	multi-line
*/

Multi-line comments are for blocks of comments to explain an entire file or large section of code.

/*
	Self Portrait
	by Wayne Gretzky
	version 1.0
	Jan 1 1999
*/