Combining matrix functions with applyMatrix()

p5.js Beginners
1

Hi. In this code I have a rotating rectangle in the center of the canvas using the applyMatrix() function.
In the reference it’s said that I can combine these functions into one.

This is a powerful operation that can perform the equivalent of translate, scale, shear and rotate all at once.

I’ve read the provided links, but I can’t figure out how to do this. Summing the matrixes gives a different ‘scaling’ outcome.
Thanks in advance.

  let a = 1 + cos_a;
  let b = sin_a;
  let c = -sin_a;
  let d = 1 + cos_a;
  let e = width / 2;
  let f = height / 2;
  // applyMatrix(1, 0, 0, 1, width / 2, height / 2);
  // rotate(angle);
  // applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
  applyMatrix(a, b, c, d, e, f);

function setup() {
  let c = createCanvas(250, 250);
  rectMode(CENTER);
}

function draw() {
  let step = frameCount % 200;
  let angle = map(step, 0, 200, 0, TWO_PI);
  let cos_a = cos(angle);
  let sin_a = sin(angle);
  background(200);
  // translate(width / 2, height / 2);
  applyMatrix(1, 0, 0, 1, width / 2, height / 2);
  // rotate(angle);
  applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
  rect(0, 0, 50, 50);
}
2

I managed to do it; you need to multiply the matrixes.
But honestly, I don’t understand why. Can someone explain this?

3

In my project I have lists of translation sequences using a vector array.
I noticed that summing all vectors first and just use one translation is significantly faster.
But since I also have rotations in between I thought to experiment combining them with the applyMatrix() function. This works, however doesn’t speed up the code. So, for what is this function actually used for?