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