P5.js Cheatsheet


Drawing

Draw Lines


line(20, 150, 100, 20);

line(xStart, yStart, xEnd, yEnd)

Draw Points


let positionP1 = createVector(40, 100);
drawPoint(positionP1, "red", "P1", true);
let positionP2 = createVector(110, 50);
drawPoint(positionP2, "blue", "P1", false);

drawPoint(positionVector, color, name, drawCoords)

Draw Vectors


let origin = createVector(20, 160);
let vec1 = createVector(100, -120);
drawVector(origin, vec1, color="red") 

origin… Starting Point of the Vector
vec1… Vector to be drawn

Draw Shapes

//Shape Variables
let circ1;
let rect1; 
let tri;

function setup() {
  //Init Shapes always in Setup!
  circ1 = new Circle(75, 40, 50, "red");
  rect1 = new Rectangle(75, 100, 50, 20, "blue");
  tri1 = new Triangle(75, 150, 30, "green");
}

function draw() {
  background(210);//Draws grey background
  circ1.draw();
  rect1.draw();
  tri1.draw();
}

circ1 = new Circle(xStart, yStart, radius, color);
rect1 = new Rectangle(xPos, yPos, width, height, color);
tri1 = new Triangle(xPos, yPos, size, color);

Colorize Shapes

  let circle = new Circle(mouseX,mouseY,30, "red");
  circle.color = color(255,255,0);

Move Shapes

let circ1;

function setup() {
  createCanvas(150, 200);
  circ1 = new Circle(-20, -20, 40, "purple");
}

function draw() {
  background("white");
  circ1.position.x += 1;
  circ1.position.y += 1.5;
  circ1.draw();
}

Text


text("Hello World", 20, 50)

text(text, xPos, yPos)


Input

Mouse Input

function draw() {
  if (mouseIsPressed) {
    circle1.color = "red";
  } else {
    circle1.color = "white";
  }
  circle1.position.x = mouseX;
  circle1.position.y = mouseY;
  circle1.draw();
}

Keyboard Input

function draw() {
  if(keyIsDown(87))//W
    text("W pressed", 40, 80);
  if(keyIsDown(83))//S
    text("S pressed", 40, 90);
  if(keyIsDown(65))//A
    text("A pressed", 40, 100);
  if(keyIsDown(68))//D
    text("D pressed", 40, 110);
}

keyIsDown(keyCode)
keyCode… integer corresponding to specific Key. i.e.: 87 = “W”
Get Keycodes from https://www.toptal.com/developers/keycode


Vectors

Vector Addition


let v1= createVector(100, 20);
let v2= createVector(10, 100);
let v3= p5.Vector.add(v1, v2) //(110, 120)

Vector Subtraction


let p1 = createVector(20, 70);
let p2 = createVector(130, 100);
let p1ToP2 = p5.Vector.sub(p2,p1);//(110, 30)

Vector multiplication


  vec1 = createVector(40, -5);
  vec2 = p5.Vector.mult(vec1, 2);//(80, -10)

Vector magnitude

let v1 = createVector(10, 20);
let v1Magnitude = p5.Vector.mag(v1);//length of v1: 22,36

Vector normalization



vec1 = createVector(10, 20);
vec2 = p5.Vector.normalize(vec1);//(0.44, 0.89)

Lerping

Used for animating numbers, vectors, positions, colors

Source

let startPos = createVector(30, 100);
let endPos = createVector(125, 120);
let t = 0.7;
let p1 =  p5.Vector.lerp(startPos, endPos, t);

The Lerp-Function “moves” the vector from startPos towards endPos.
The variable t determines how far the rotation has already progressed.

p5.Vector.lerp(startPos, endPos, t)
t… value between 0 and 1.
t=0 remains at startPos
t=0.7 travels 70% of the way from start- to endpos
t=1 travels to enePos

Lerp over Duration

Lerps over fixed duration
-> Animation takes i.e. 2 Seconds
-> Animation gets faster with higher distance

let lerpDuration = 2000;//In Milliseconds
let lerpTimer = 0;
let rect1;

function setup() {
  createCanvas(150, 200);
  frameRate(30);
  rect1 = new Rectangle(20,20,30,30, "red");
}



function draw() {
  background("lightgrey");
  
  let startPos = createVector(20, 20);
  let endPos = createVector(100, 40);
  
  lerpTimer += deltaTime;
  let t = min(lerpTimer / lerpDuration, 1);
  t = min(t, 1);//Make sure t is <=1
  rect1.position =  p5.Vector.lerp(startPos, endPos, t);
  
  rect1.draw();
}

deltaTime… milliseconds since last frame

Lerp via constant Speed

Lerps with constant speed
-> Object moves i.e. 100 pixels per second
-> Animation takes longer with higher distance

let movePixelsPerSecond = 100;
let rect1;

function setup() {
  createCanvas(150, 200);
  frameRate(30);
  rect1 = new Rectangle(20,20,30,30, "red");
}

function draw() {
  background("lightgrey");
    
  let endPos = createVector(130, 180);
  
  let moveVector = p5.Vector.sub(rect1.position, endPos);
  let distance = p5.Vector.mag(moveVector);
  let t = (movePixelsPerSecond/distance)*(deltaTime/1000);
  t=min(t, 1) //make sure t is <=1
  rect1.position =  p5.Vector.lerp(rect1.position, endPos, t);
  
  rect1.draw();
}

deltaTime… milliseconds since last frame


Rotations

Rotate by degrees

let rect1 = new Rectangle(75,50,10,50,"red");
rect1.setRotation(30);//Set rotation to 30°
rect1.rotateBy(60);//rotate by 60 more degrees -> rotation is now 90°

Rotate towards directionvector

let tri1 = new Triangle(75,50,30,"red");  
let dir= createVector(-1, 0.5);
tri1.setLookVector(dir);

Slerp Rotations

Used for animating rotations.

let lookDir = createVector(0,1);
let directionToLookAt = createVector(1,1);
let t = 0.75;
let slerpedLookDir = p5.Vector.slerp(lookDir, directionToLookAt, t);
//slerpedLookDir: (0.75, 1)

The Slerp-Function “moves” the vector from lookDir towards directionToLookAt.
The variable t determines how far the rotation has already progressed.
t: 0 -> returns lookDir
t: 1 -> returns directionToLookAt
t: 0.5 -> returns a Vector that is halfway between lookDir and directionToLookAt. (0.5, 1)
t: 0.75 -> returns a Vector that is 25% lookDir and 75% directionToLookAt. (0.75, 1)

Slerp over Duration

let tri1;
let slerpTimer = 0;
let slerpDuration = 3000;

function setup() {
  createCanvas(150, 200);
  frameRate(30);
  tri1 = new Triangle(75, 100, 30, "purple");
}

function draw() {
  background("lightgrey");
  
  let startLookDir = createVector(-1,-1);
  let endLookDir = createVector(1,1);
  
  slerpTimer += deltaTime;
  let angle = abs(p5.Vector.angleBetween(startLookDir, endLookDir));
  let t = slerpTimer / slerpDuration;
  t = min(t,1);
  let currentLookDir = p5.Vector.slerp(startLookDir, endLookDir, t);
  tri1.setLookVector(currentLookDir);
   
  tri1.draw();
}

Slerp with Speed

let tri1;
let currentLookDir;
let targetLookDir;
let degreesPerSecond = 20;

function setup() {
  createCanvas(150, 200);
  frameRate(30);
  tri1 = new Triangle(75, 100, 30, "purple");
  currentLookDir = createVector(0,-1);
  targetLookDir = createVector(1,1);
}

function draw() {
  background("lightgrey");
  
  let angle = abs(p5.Vector.angleBetween(currentLookDir, targetLookDir));
  let t = (degreesPerSecond/angle)*(deltaTime/1000);
  t = min(t,1);
  currentLookDir = p5.Vector.slerp(currentLookDir, targetLookDir, t);
  tri1.setLookVector(currentLookDir);
  
  tri1.draw();
}

Lerp vs Slerp