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:
