Represents a three dimensional linear transformation or a two-dimensional affine transformation. (An affine transformation scales/rotates/shears and translates while a linear transformation just scales/rotates/shears).

In addition to other matrices, Mat33s can be used to transform Vec3s and Vec2s.

For example, to move the point (1,1)(1, 1) by 5 units to the left and 6 units up,

import {Mat33, Vec2} from '@js-draw/math';

const moveLeftAndUp = Mat33.translation(Vec2.of(5, 6));
console.log(moveLeftAndUp);

This moveLeftAndUp matrix could then translate (move) a Vec2 using Mat33.transformVec2:

---use-previous---
---visible---
console.log(moveLeftAndUp.transformVec2(Vec2.of(1, 1)));
console.log(moveLeftAndUp.transformVec2(Vec2.of(-1, 2)));

It's also possible to create transformation matrices that scale and rotate. A single transform matrix can be created from multiple using matrix multiplication (see Mat33.rightMul):

---use-previous---
---visible---
// Create a matrix by right multiplying.
const scaleThenRotate =
  // The resultant matrix first scales by a factor of two
  Mat33.scaling2D(2).rightMul(
    // ...then rotates by pi/2 radians = 90 degrees.
    Mat33.zRotation(Math.PI / 2)
  );
console.log(scaleThenRotate);

// Use scaleThenRotate to scale then rotate a vector.
console.log(scaleThenRotate.transformVec2(Vec2.unitX));

Constructors

  • Creates a matrix from inputs in the form, [a1a2a3b1b2b3c1c2c3] \begin{bmatrix} a1 & a2 & a3 \ b1 & b2 & b3 \ c1 & c2 & c3 \end{bmatrix}

    Static constructor methods are also available. See Mat33.scaling2D, Mat33.zRotation, Mat33.translation, and Mat33.fromCSSMatrix.

    Parameters

    • a1: number
    • a2: number
    • a3: number
    • b1: number
    • b2: number
    • b3: number
    • c1: number
    • c2: number
    • c3: number

    Returns Mat33

Properties

a1: number
a2: number
a3: number
b1: number
b2: number
b3: number
c1: number
c2: number
c3: number
identity: Mat33 = ...

The 3x3 identity matrix.

Methods

  • Returns true iff this = other ± fuzz

    Parameters

    • other: Mat33
    • fuzz: number = 0

    Returns boolean

  • Returns the idx-th column (idx is 0-indexed).

    Parameters

    • idx: number

    Returns Vec3

  • Estimate the scale factor of this matrix (based on the first row).

    Returns number

  • Either returns the inverse of this, or, if this matrix is singular/uninvertable, returns Mat33.identity.

    This may cache the computed inverse and return the cached version instead of recomputing it.

    Returns Mat33

  • Returns boolean

    true iff this is the identity matrix.

  • Returns a new Mat33 where each entry is the output of the function mapping.

    Parameters

    • mapping: ((component: number, rowcol: [number, number]) => number)
        • (component, rowcol): number
        • Parameters

          • component: number
          • rowcol: [number, number]

          Returns number

    Returns Mat33

    new Mat33(
    1, 2, 3,
    4, 5, 6,
    7, 8, 9,
    ).mapEntries(component => component - 1);
    // → ⎡ 0, 1, 2 ⎤
    // ⎢ 3, 4, 5 ⎥
    // ⎣ 6, 7, 8 ⎦
  • Returns the magnitude of the entry with the largest entry

    Returns number

  • Right-multiplies this by other.

    See also transformVec3 and transformVec2.

    Example:

    import {Mat33, Vec2} from '@js-draw/math';
    console.log(Mat33.identity.rightMul(Mat33.identity));
    
    // Create a matrix by right multiplying.
    const scaleThenRotate =
      // The resultant matrix first scales by a factor of two
      Mat33.scaling2D(2).rightMul(
        // ...then rotates by pi/4 radians = 45 degrees.
        Mat33.zRotation(Math.PI / 4)
      );
    console.log(scaleThenRotate);
    
    // Use scaleThenRotate to scale then rotate a vector.
    console.log(scaleThenRotate.transformVec2(Vec2.unitX));
    

    Parameters

    Returns Mat33

  • result[0] = top left element
    result[1] = element at row zero, column 1
    ...

    Example:

    import { Mat33 } from '@js-draw/math';
    console.log(
      new Mat33(
        1, 2, 3,
        4, 5, 6,
        7, 8, 9,
      )
    );
    

    Returns Mat33Array

  • Note: Assumes this.c1 = this.c2 = 0 and this.c3 = 1.

    Returns string

  • Creates a human-readable representation of the matrix.

    Example:

    import { Mat33 } from '@js-draw/math';
    console.log(Mat33.identity.toString());
    

    Returns string

  • Applies this as an affine transformation to the given vector. Returns a transformed version of other.

    Unlike transformVec3, this does translate the given vector.

    Parameters

    Returns Vec3

  • Applies this as a linear transformation to the given vector (doesn't translate). This is the standard way of transforming vectors in ℝ³.

    Parameters

    Returns Vec3

  • Converts a CSS-form matrix(a, b, c, d, e, f) to a Mat33.

    Note that such a matrix has the form,

    a c e
    b d f
    0 0 1

    Parameters

    • cssString: string

    Returns Mat33

  • Creates a matrix from the given rows: [r1.xr1.yr1.zr2.xr2.yr2.zr3.xr3.yr3.z] \begin{bmatrix} \texttt{r1.x} & \texttt{r1.y} & \texttt{r1.z}\ \texttt{r2.x} & \texttt{r2.y} & \texttt{r2.z}\ \texttt{r3.x} & \texttt{r3.y} & \texttt{r3.z}\ \end{bmatrix}

    Parameters

    Returns Mat33

  • Constructs a 3x3 translation matrix (for translating Vec2s) using transformVec2.

    Creates a matrix in the form (10amount.x01amount.y001) \begin{pmatrix} 1 & 0 & {\tt amount.x}\ 0 & 1 & {\tt amount.y}\ 0 & 0 & 1 \end{pmatrix}

    Parameters

    Returns Mat33

OpenSource licenses