Drawing and animation with p5.js: cheat sheet

Drawing and animation with p5.js · In any playground, open Reference to copy these.

Shapes and movement

createCanvas

Makes the drawing area: width, then height, in pixels. Put it first in setup(). (0, 0) is the top left and y counts down.

createCanvas(400, 300);

circle

Draws a circle: x and y of its middle, then its width.

circle(200, 150, 80);

Example

function setup() {
  createCanvas(200, 130);
  background(235);
  circle(100, 65, 80);
}

line

Draws a line from one point to another: x1, y1, x2, y2.

line(20, 20, 180, 100);

Example

function setup() {
  createCanvas(200, 130);
  background(235);
  strokeWeight(3);
  line(30, 100, 170, 30);
}

text

Writes words on the canvas at x, y. Join a number on with +: "Score: " + score.

text("Hello", 20, 30);

Example

function setup() {
  createCanvas(200, 130);
  background(235);
  textSize(24);
  text("Hello", 60, 75);
}

stroke

Sets the colour of outlines drawn after it.

stroke(0);

Example

function setup() {
  createCanvas(200, 130);
  background(235);
  strokeWeight(5);
  stroke(220, 40, 90);
  circle(100, 65, 80);
}

setup

Runs once, when the sketch starts. Make the canvas and set things up here.

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

draw

Runs again and again, about 60 times a second. Clear the canvas, then draw things where they are now.

function draw() {
  background(220);
}

change a variable

Moves the value on a little: x goes up by 2 each time this runs.

x = x + 2;

if

Does the code in the braces only when the condition is true. Compare with <, >, ===.

if (x > 300) {
  x = 0;
}

and, or

&& means both must be true; || means either one.

if (x > 50 && x < 150) {
  ...
}

background

Fills the whole canvas with a colour. One number is grey (0 black, 255 white); three are red, green, blue.

background(220);

Example

function setup() {
  createCanvas(200, 130);
  background(235);
  background(255, 220, 120);
  circle(100, 65, 60);
}

rect

Draws a rectangle: x and y of its top-left corner, then width and height.

rect(50, 40, 100, 60);

Example

function setup() {
  createCanvas(200, 130);
  background(235);
  rect(40, 30, 120, 70);
}

triangle

Draws a triangle from its three corners: x1, y1, x2, y2, x3, y3.

triangle(100, 20, 60, 100, 140, 100);

Example

function setup() {
  createCanvas(200, 130);
  background(235);
  triangle(100, 20, 50, 110, 150, 110);
}

fill

Sets the colour of shapes drawn after it (red, green, blue, each 0 to 255). It does not change shapes already drawn.

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);
}

noStroke

Draws shapes with no outline.

noStroke();

Example

function setup() {
  createCanvas(200, 130);
  background(235);
  noStroke();
  fill(60, 160, 120);
  circle(100, 65, 80);
}

let

Makes a variable. Put it above setup() to keep its value between frames.

let x = 0;

mouseX and mouseY

Where the mouse is on the canvas, updated every frame.

mouseX, mouseY

if else

Chooses between two things.

if (x > 150) {
  fill(255, 0, 0);
} else {
  fill(0, 0, 255);
}

Building blocks

array

Makes a list. The first item is heights[0], because counting starts at 0.

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]);
  }
}

for of

Does the code once for each item of a list, with star as that item.

for (let star of stars) {
  ...
}

random

A random number from the first number up to (not including) the second.

random(10, 100)

object

Keeps the values of one thing together, each with a name.

let star = { x: 20, y: 30, speed: 2 };

function

Gives code a name. The names in the brackets are parameters. It runs only when called: drawFlower(80, 100);

function drawFlower(x, y) {
  ...
}

array item

One item of a list, by its place.

heights[0]

length

How many items are in a list.

heights.length

push

Adds an item to the end of a list.

heights.push(120);

for count

Repeats the code in the braces, with i counting 0, 1, 2, ... up to one less than 6.

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);
  }
}

property

Reads one value of an object with a dot. Change it the same way: star.y = star.y + 1;

star.y

Final challenge: Catch the circle

frameCount

How many frames have been drawn so far. It goes up by 1 every frame.

frameCount

dist

The straight distance between two points. Two things touch when it is small.

dist(mouseX, mouseY, ball.x, ball.y)

map

Turns a number in one range into the matching number in another.

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);
  }
}

mousePressed

p5 runs this each time the mouse is clicked. You never call it yourself.

function mousePressed() {
  ...
}

sin and cos

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

150 + cos(angle) * 100