We’ll use the p5.js CDN for quick setup in examples. For npm-based installations, refer to official p5.js documentation for integration steps.

Translate The translate() function shifts the canvas's coordinate system along the X, Y, or Z axes (Z for 3D contexts).

Syntax:

// Syntax 1: Individual axis values
translate(x, y, [z])
// Syntax 2: Vector input
translate(vector)

• Syntax 1 accepts numerical values for x (horizontal), y (vertical), and optional z (3D only). Negative x shifts left, positive right; negative y shifts up, positive down.
• Syntax 2 takes a p5.Vector object for combined axis values.

Example using individual coordinates:

function setup() {
  createCanvas(200, 200);
  background(220);
  // Draw initial square
  square(5, 5, 35);
}

function draw() {
  // Shift coordinate system 70px right and 70px down
  translate(70, 70);
  // Draw square relative to new origin
  square(5, 5, 35);
  noLoop(); // Prevent repeated drawing
}

Using vector syntax:

function setup() {
  createCanvas(200, 200);
  background(220);
}

function draw() {
  // Create translation vector
  let shiftVector = createVector(70, 70);
  translate(shiftVector);
  square(5,5,35);
  noLoop();
}

Animated translation example:

let animationCounter = 0;

function setup() {
  createCanvas(400,400);
  background(220);
}

function draw() {
  background(220); // Clear frame each loop
  // Calculate circular path coordinates
  let xPos = Math.sin(animationCounter) * 120 + 200;
  let yPos = Math.cos(animationCounter) * 120 + 200;
  // Shift to calculated position
  translate(xPos, yPos);
  // Draw square centered at origin
  square(-10, -10, 20);
  // Increment counter for smooth animation
  animationCounter += 0.08;
}

Scale The scale() function resizes the canvas coordinate system, affecting both object size and position.

Syntax:

scale(scaleFactor, [yScale], [zScale])

• A single value scales all axes uniformly. Two or three values scale X, Y, and Z axes independently. Values between 0 and 1 shrink elements; values greater than 1 enlarge them.

Example of uniform scaling:

function setup() {
  createCanvas(400,400);
  background(220);
  // Draw original square
  square(60,60,90);
}

function draw() {
  // Scale by 50%
  scale(0.5);
  // Draw scaled square
  square(60,60,90);
  noLoop();
}

Note: Multipel scale() cals compound their effects. To isolate scaling to specific elements, use push() and pop() to save and restore the canvas state.

Rotate The rotate() function rotates the coordinate system around the origin (top-left corner by default). It uses radians for angle input. To use degrees, convert with degrees * Math.PI / 180.

Syntax:

rotate(angleInRadians)

Basic rotation example:

function setup() {
  createCanvas(400,400);
  background(220);
}

function draw() {
  // Convert 30 degrees to radians
  let rotationAngle = 30 * Math.PI / 180;
  rotate(rotationAngle);
  square(20,20,100);
  noLoop();
}

To rotate around a custom center, combine translate() with rotate():

function setup() {
  createCanvas(400,400);
  background(220);
}

function draw() {
  // Shift origin to desired rotation center
  translate(210, 160);
  // Convert 30 degrees to radians
  let rotationAngle = 30 * Math.PI / 180;
  rotate(rotationAngle);
  // Draw square centered at new origin
  square(-50, -50, 100);
  noLoop();
}

Shear p5.js provides shearX() and shearY() to skew the coordinate system along the X or Y axis, respectively. Like rotate(), these use radians.

Syntax:

shearX(angleInRadians);
shearY(angleInRadians);

Example of combined shearing:

function setup() {
  createCanvas(400,400);
  background(220);
}

function draw() {
  // Skew along X axis by 25 degrees
  shearX(25 * Math.PI / 180);
  // Skew along Y axis by 15 degrees
  shearY(15 * Math.PI / 180);
  square(30,30,100);
  noLoop();
}

Custom Transformations with applyMatrix() For advanced, custom transformations, use applyMatrix(), which mirrors the native Canvas API's transform() method. It allows direct manipulation of the transformation matrix for precise control over translation, scaling, rotation, and shearing in a single call.