p5.js reference
The p5.js commands and JavaScript from the course, each with what it does. Copy a card into your sketch.
Print a cheat sheet (the whole course or one unit, with a picture of what each command draws)
Canvas and shapes
createCanvas(400, 300);
Makes the drawing area: width, then height, in pixels. Put it first in setup(). (0, 0) is the top left and y counts down.
id: createcanvas
background(220);
Example
function setup() {
createCanvas(200, 130);
background(235);
background(255, 220, 120);
circle(100, 65, 60);
}
Fills the whole canvas with a colour. One number is grey (0 black, 255 white); three are red, green, blue.
id: background
circle(200, 150, 80);
Example
function setup() {
createCanvas(200, 130);
background(235);
circle(100, 65, 80);
}
Draws a circle: x and y of its middle, then its width.
id: circle
rect(50, 40, 100, 60);
Example
function setup() {
createCanvas(200, 130);
background(235);
rect(40, 30, 120, 70);
}
Draws a rectangle: x and y of its top-left corner, then width and height.
id: rect
ellipse(200, 150, 120, 60);
Example
function setup() {
createCanvas(200, 130);
background(235);
ellipse(100, 65, 150, 60);
}
Draws an oval: x and y of its middle, then its width and height.
id: ellipse
line(20, 20, 180, 100);
Example
function setup() {
createCanvas(200, 130);
background(235);
strokeWeight(3);
line(30, 100, 170, 30);
}
Draws a line from one point to another: x1, y1, x2, y2.
id: line
triangle(100, 20, 60, 100, 140, 100);
Example
function setup() {
createCanvas(200, 130);
background(235);
triangle(100, 20, 50, 110, 150, 110);
}
Draws a triangle from its three corners: x1, y1, x2, y2, x3, y3.
id: triangle
text("Hello", 20, 30);
Example
function setup() {
createCanvas(200, 130);
background(235);
textSize(24);
text("Hello", 60, 75);
}
Writes words on the canvas at x, y. Join a number on with +: "Score: " + score.
id: text
Colour
fill(255, 120, 160);
Example
function setup() {
createCanvas(200, 130);
background(235);
fill(255, 120, 160);
circle(70, 65, 70);
fill(80, 160, 255);
circle(130, 65, 70);
}
Sets the colour of shapes drawn after it (red, green, blue, each 0 to 255). It does not change shapes already drawn.
id: fill
stroke(0);
Example
function setup() {
createCanvas(200, 130);
background(235);
strokeWeight(5);
stroke(220, 40, 90);
circle(100, 65, 80);
}
Sets the colour of outlines drawn after it.
id: stroke
noStroke();
Example
function setup() {
createCanvas(200, 130);
background(235);
noStroke();
fill(60, 160, 120);
circle(100, 65, 80);
}
Draws shapes with no outline.
id: nostroke
strokeWeight(4);
Example
function setup() {
createCanvas(200, 130);
background(235);
strokeWeight(10);
line(30, 65, 170, 65);
}
Sets how thick outlines and lines are.
id: strokeweight
Movement and the draw loop
function setup() {
createCanvas(400, 300);
}
Runs once, when the sketch starts. Make the canvas and set things up here.
id: setup
function draw() {
background(220);
}
Runs again and again, about 60 times a second. Clear the canvas, then draw things where they are now.
id: draw
let x = 0;
Makes a variable. Put it above setup() to keep its value between frames.
id: let
x = x + 2;
Moves the value on a little: x goes up by 2 each time this runs.
id: change-a-variable
frameCount
How many frames have been drawn so far. It goes up by 1 every frame.
id: framecount
mouseX, mouseY
Where the mouse is on the canvas, updated every frame.
id: mousex-and-mousey
Decisions
if (x > 300) {
x = 0;
}
Does the code in the braces only when the condition is true. Compare with <, >, ===.
id: if
if (x > 150) {
fill(255, 0, 0);
} else {
fill(0, 0, 255);
}
Chooses between two things.
id: if-else
if (x > 50 && x < 150) {
...
}
&& means both must be true; || means either one.
id: and-or
Lists and loops
let heights = [40, 90, 150];
Example
let heights = [40, 90, 60, 100];
function setup() {
createCanvas(200, 130);
background(235);
for (let i = 0; i < heights.length; i++) {
rect(25 + i * 42, 120 - heights[i], 30, heights[i]);
}
}
Makes a list. The first item is heights[0], because counting starts at 0.
id: array
heights[0]
One item of a list, by its place.
id: array-item
heights.length
How many items are in a list.
id: length
heights.push(120);
Adds an item to the end of a list.
id: push
for (let i = 0; i < 6; i++) {
...
}
Example
function setup() {
createCanvas(200, 130);
background(235);
for (let i = 0; i < 5; i++) {
circle(30 + i * 35, 65, 28);
}
}
Repeats the code in the braces, with i counting 0, 1, 2, ... up to one less than 6.
id: for-count
for (let star of stars) {
...
}
Does the code once for each item of a list, with star as that item.
id: for-of
random(10, 100)
A random number from the first number up to (not including) the second.
id: random
Objects
let star = { x: 20, y: 30, speed: 2 };
Keeps the values of one thing together, each with a name.
id: object
star.y
Reads one value of an object with a dot. Change it the same way: star.y = star.y + 1;
id: property
Functions
function drawFlower(x, y) {
...
}
Gives code a name. The names in the brackets are parameters. It runs only when called: drawFlower(80, 100);
id: function
return n * 2;
Hands an answer back to the line that called the function.
id: return
Events and keys
function mousePressed() {
...
}
p5 runs this each time the mouse is clicked. You never call it yourself.
id: mousepressed
function keyPressed() {
if (key === "r") {
...
}
}
p5 runs this each time a key is pressed; key holds which one.
id: keypressed
dist(mouseX, mouseY, ball.x, ball.y)
The straight distance between two points. Two things touch when it is small.
id: dist
Maths for patterns
150 + cos(angle) * 100
cos gives how far across and sin how far up or down for a point going round a circle (angle in radians; radians(30) converts degrees).
id: sin-and-cos
map(i, 0, 11, 255, 120)
Example
function setup() {
createCanvas(200, 130);
noStroke();
for (let i = 0; i < 10; i++) {
fill(map(i, 0, 9, 255, 40), 120, 200);
circle(20 + i * 18, 65, 16);
}
}
Turns a number in one range into the matching number in another.
id: map