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