p5.Matrix cleanup documentaiton rotate and others

Author: holomorfo

src/math/Matrices/Matrix.js

@@ -812,22 +812,20 @@ export class Matrix extends MatrixInterface {
    * @returns {Matrix} The current matrix after applying the transformation.
    *
    * @example
+   * <div class="norender"><code>
+   * function setup() {
+   *
    * // Assuming `matrix` is an instance of Matrix
    * const anotherMatrix = new p5.Matrix();
    * matrix.apply(anotherMatrix);
    *
-   * @example
    * // Applying a transformation using an array
    * const matrixArray = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
    * matrix.apply(matrixArray);
    *
-   * @example
    * // Applying a transformation using individual arguments
    * matrix.apply(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    *
-   * // p5.js script example
-   * <div class="norender"><code>
-   * function setup() {
    *
    *   // Create a 4x4 identity matrix
    *   const matrix = new p5.Matrix(4);
@@ -988,9 +986,29 @@ export class Matrix extends MatrixInterface {
   }
 
   /**
+   * Rotate the Matrix around a specified axis by a given angle.
+   *
+   * This method applies a rotation transformation to the matrix, modifying its orientation
+   * in 3D space. The rotation is performed around the provided axis, which can be defined
+   * as a `p5.Vector` or an array of numbers representing the x, y, and z components of the axis.
    * Rotate our Matrix around an axis by the given angle.
-   * @param  {Number} a The angle of rotation in radians
-   * @param  {p5.Vector|Number[]} axis  the axis(es) to rotate around
+   * @param  {Number} a The angle of rotation in radians.
+   *                    Angles in radians are a measure of rotation, where 2π radians
+   *                    represent a full circle (360 degrees). For example:
+   *                    - π/2 radians = 90 degrees (quarter turn)
+   *                    - π radians = 180 degrees (half turn)
+   *                    - 2π radians = 360 degrees (full turn)
+   *                    Use `Math.PI` for π or `p5`'s `PI` constant if using p5.js.
+   * @param  {p5.Vector|Number[]} axis The axis or axes to rotate around.
+   *                                   This defines the direction of the rotation.
+   *                                   - If using a `p5.Vector`, it should represent
+   *                                     the x, y, and z components of the axis.
+   *                                   - If using an array, it should be in the form
+   *                                     [x, y, z], where x, y, and z are numbers.
+   *                                   For example:
+   *                                   - [1, 0, 0] rotates around the x-axis.
+   *                                   - [0, 1, 0] rotates around the y-axis.
+   *                                   - [0, 0, 1] rotates around the z-axis.   *
    * @chainable
    * inspired by Toji's gl-matrix lib, mat4 rotation
    */

src/math/math.js

@@ -4,7 +4,7 @@
  * @requires core
  */
 
-function math(p5, fn){
+function math(p5, fn) {
   /**
    * Creates a new <a href="#/p5.Vector">p5.Vector</a> object.
    *
@@ -90,7 +90,7 @@ function math(p5, fn){
    *
    *   // Draw the dot.
    *   strokeWeight(5);
-   *   point(pos); 
+   *   point(pos);
    * }
    * </code>
    * </div>
@@ -113,18 +113,17 @@ function math(p5, fn){
    * A matrix is a mathematical concept that is useful in many fields, including
    * computer graphics. In p5.js, matrices are used to perform transformations
    * on shapes and images. The `createMatrix` method can take a column-major
-   * array representation of a square matrix as an argument.
+   * array representation of a square matrix as an argument. In the current implementation we only use squared matrices.
    *
    * @method createMatrix
-   * @param {Array<Number>} components Column-major array representation of the matrix.
+   * @param {Array<Number>} components Column-major array representation of the square matrix.
    *
    * @return {p5.Matrix} new <a href="#/p5.Matrix">p5.Matrix</a> object.
    *
    * @example
-   * <div>
+   * <div class="norender">
    * <code>
    * function setup() {
-   *   createCanvas(100, 100);
    *   let matrix = createMatrix([1, 2, 3, 4, 5, 6, 7, 8, 9]);
    * }
    * </code>
@@ -137,6 +136,6 @@ function math(p5, fn){
 
 export default math;
 
-if(typeof p5 !== 'undefined'){
+if (typeof p5 !== "undefined") {
   math(p5, p5.prototype);
 }