p5.js applyMatrix() Function

The applyMatrix() function in p5.js is used to multiply the matrix given as the parameters with the current matrix. This is can be used to perform translate, scale, shear, and rotate operations all at the same time. This is a powerful operation and can be used to easily manipulate objects in the scene.

Syntax:

applyMatrix(a, b, c, d, e, f)

Parameters: This method has six parameters as mentioned above and described below:

• a: It is a number that defines the 2×3 matrix to be multiplied.
• b: It is a number that defines the 2×3 matrix to be multiplied.
• c: It is a number that defines the 2×3 matrix to be multiplied.
• d: It is a number that defines the 2×3 matrix to be multiplied.
• e: It is a number that defines the 2×3 matrix to be multiplied.
• f: It is a number that defines the 2×3 matrix to be multiplied.

The below examples demonstrate the applyMatrix() function in p5.js:

Example 1: In this example, the matrix is used to rotate a rectangle by some angle.

Javascript

function setup() {
  createCanvas(800, 600);
}

function draw() {

  let step = frameCount % 50;

  // Calculate the angle and the
  // sin and cos values
  let angle = map(step, 10, 60, 0, PI);
  let cos_a = cos(angle);
  let sin_a = sin(angle);

  // Set the background colour
  background(200);

  // Translate the elements
  translate(500, 50);

  // Use applyMatrix() to multiply using
  // the given values
  applyMatrix(cos_a, sin_a,
                -sin_a, -cos_a,
              0, 0);

  // Set the colour to fill the graphics
  fill("red");

  // Set the shape
  rect(50, 50, 300, 200, 30);
}

Output:

Example 2: In this example, the matrix is used to translate the 2D images.

Javascript

function setup() {

  // Create canvas
  createCanvas(800, 600);

  // Set the frame rate
  frameRate(20);
}

function draw() {

  let step1 = frameCount % 15;
  let step2 = frameCount % 50;

  fill('lightgreen');
  background(200);

  // Apply matrix transform equivalent
  // to translate(x, y)
  applyMatrix(1, 0, 0, 1, 300 + step1, 50);

  // Set a shape to be used
  ellipse(56, 46, 185, 185);

  fill('red');

  // Apply matrix transform equivalent
  // to translate(x, y)
  applyMatrix(1, 0, 0, 1, 100 + step2, 50);

  // Set the shape to be used
  rect(30, 20, 50, 50);
}

Output:

Example 3: In this example, the matrix is used to scale the 2D images.

Javascript

function setup() {
  // Create canvas
  createCanvas(800, 600, WEBGL);

  // Set the frame rate
  frameRate(20);
}

function draw() {
  let step1 = frameCount % 10;
  let step2 = frameCount % 20;

  fill("lightgreen");
  background(200);

  // Apply matrix transformation
  // equivalent to translate(x, y)
  applyMatrix(1 / step1, 0, 0, 1 / step1, 0, 0);

  // Set the shape to be used
  ellipse(185, 185, 185, 185);

  fill("red");

  // Apply matrix transformation
  // equivalent to scale(x, y)
  applyMatrix(1 / step2, 0, 0, 1 / step2, 0, 1 / step2);

  // Set the shape to be used
  rect(30, 20, 100, 100);
}

Output:

Example 4: In this example, the matrix is used to rotate the graphic.

Javascript

function setup() {
  createCanvas(400, 400, WEBGL);
  noFill();
}

function draw() {
  background(200);

  // Rotate the box
  rotateX(PI / 2);
  rotateY(PI / 8);

  stroke(153);
  box(35);

  let rad = millis() / 500;

  // Set rotation angle
  let ct = cos(rad);
  let st = sin(rad);

  // Apply matrix for rotation
  applyMatrix(  ct, 0.0,  st,  0.0,
               0.0, 1.0, 0.0,  0.0,
               -st, 0.0,  ct,  0.0,
               0.0, 0.0, 0.0,  1.0);

  stroke(255);
  box(100);
}

Output: