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

We recommend buying your favorite toothbrush at super low prices with free shipping, and you can also pick up your order at the store on the same day.

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

Source
Source