[dev-2.0] p5.Matrix and p5.Vector docs update

[holomorfo]

Resolves #[Add issue number here]

Changes:
Add documentation for p5.Matix

Screenshots of the change:

PR Checklist

• npm run lint passes
• Inline reference is included / updated
• Unit tests are included / updated

[davepagurek]

For ones like this that don't show anything on canvas, we can do <div class="norender"> to avoid having an empty canvas.

[holomorfo]

Hi Dave, I have updated the examples whit the norender to the scripts that need it, thanks.

[davepagurek]

For the sake of readability, maybe we should only show the p5 versions for now unless we can also show how to import these? What do you think @ksen0 and @limzykenneth?

[limzykenneth]

For consistency sake, reference probably should only use the p5.Matrix (and other classes) version of the contructor. I don't think this will change for the reference in the future even when separate importing is documented just to keep things simple.

[holomorfo]

I agree, I have updated it now for both p5.Matrix and p5.Vector, thanks

[holomorfo]

HI @davepagurek and @limzykenneth I have updated the PR with the changes, can you please review?

[perminder-17]

why we don't have any sketch related to rotate4X4() function? If possible can we add them?

[holomorfo]

I had missed to add it, I have updated now, thanks :)

[perminder-17]

Hi @holomorfo @davepagurek , in the example of translate() when we write this sketch

function setup() {

  const matrix = new p5.Matrix(4); // Create a 4x4 identity matrix
  console.log("Original Matrix:", matrix.matrix);

  // Translate the matrix by a 3D vector
  matrix.translate([10, 20, 30]);
  console.log("After 3D Translation (10, 20, 30):", matrix.matrix);

  // Translate the matrix by a 2D vector
  matrix.translate([5, 15]);
  console.log("After 2D Translation (5, 15):", matrix.matrix);
}

what should I get in the console for After 3D Translation (10, 20, 30) and After 2D translation (5,15). I am actually getting the same matrix as the original one? Is there's something wrong internally? or maybe I am getting confused?

[davepagurek]

@perminder-17 I think for performance reasons, when you log an object to the console, it doesn't make a deep copy of the current state of the object, it just holds on to a reference to it. Since at both logs, it's logging the same object, it means the console will be showing the same thing.

Maybe we need to be making a copy of the state of the object to log, e.g.: console.log(matrix.mat4.slice()). That way, we're making a copy of mat4 at its current state. Then when it gets modified later, the copy that we logged is unaffected.

[perminder-17]

Hi @holomorfo I have reviewed the docs, feel free to take them. Actually I have read all the functions you documented and it looks really awesome. I haven't really studied much about matrix after my school but after looking at the example and docs it really seems simple, and easy to understand. So thanks for your work on this. Examples and docs are really nice, simple and concise.

[holomorfo]

Hi @holomorfo I have reviewed the docs, feel free to take them. Actually I have read all the functions you documented and it looks really awesome. I haven't really studied much about matrix after my school but after looking at the example and docs it really seems simple, and easy to understand. So thanks for your work on this. Examples and docs are really nice, simple and concise.

Hi @perminder-17 these are great! I'll get to work on them, thank you for the notes and detailed review :)

[holomorfo]

Hi team, I have updated all the comments and this PR is ready for merging, can you please check @davepagurek @limzykenneth
CC: @perminder-17 @GregStanton