Class Mat33

constructor

• new Mat33(a1, a2, a3, b1, b2, b3, c1, c2, c3): Mat33

• Creates a matrix from inputs in the form, $$\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

Readonlya1

Readonlya2

Readonlya3

Readonlyb1

Readonlyb2

Readonlyb3

Readonlyc1

Readonlyc2

Readonlyc3

Staticidentity

eq

• eq(other, fuzz?): boolean

• Returns true iff this = other ± fuzz

  Parameters

  • other: Mat33
  • fuzz: number = 0

  Returns boolean

getColumn

• getColumn(idx): Vec3

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

  Parameters

  • idx: number

  Returns Vec3

getScaleFactor

• getScaleFactor(): number

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

  Returns number

inverse

• inverse(): Mat33

• 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

invertable

• invertable(): boolean

• Returns boolean

isIdentity

• isIdentity(): boolean

• Returns boolean

  true iff this is the identity matrix.

mapEntries

• mapEntries(mapping): Mat33

• 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

  Example

  new Mat33(
   1, 2, 3,
   4, 5, 6,
   7, 8, 9,
  ).mapEntries(component => component - 1);
  // → ⎡ 0, 1, 2 ⎤
  //   ⎢ 3, 4, 5 ⎥
  //   ⎣ 6, 7, 8 ⎦
  Copy

maximumEntryMagnitude

• maximumEntryMagnitude(): number

• Returns the magnitude of the entry with the largest entry

  Returns number

rightMul

• rightMul(other): Mat33

• 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

  • other: Mat33

  Returns Mat33

toArray

• toArray(): Mat33Array

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

  Example:

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

  Returns Mat33Array

toCSSMatrix

• toCSSMatrix(): string

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

  Returns string

  See

  fromCSSMatrix

toString

• toString(): string

• Creates a human-readable representation of the matrix.

  Example:

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

  Returns string

transformVec2

• transformVec2(other): Vec3

• 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

  • other: Vec3

  Returns Vec3

transformVec3

• transformVec3(other): Vec3

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

  Parameters

  • other: Vec3

  Returns Vec3

transposed

• transposed(): Mat33

• Returns Mat33

StaticfromCSSMatrix

• fromCSSMatrix(cssString): Mat33

• 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 ⎦
  Copy

  Parameters

  • cssString: string

  Returns Mat33

StaticofRows

• ofRows(r1, r2, r3): Mat33

• Creates a matrix from the given rows: $$\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

  • r1: Vec3
  • r2: Vec3
  • r3: Vec3

  Returns Mat33

Staticscaling2D

• scaling2D(amount, center?): Mat33

• Parameters

  • amount: number | Vec3
  • center: Vec3 = Vec2.zero

  Returns Mat33

Statictranslation

• translation(amount): Mat33

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

  Creates a matrix in the form $$\begin{pmatrix} 1 & 0 & {\tt amount.x}\ 0 & 1 & {\tt amount.y}\ 0 & 0 & 1 \end{pmatrix}$$

  Parameters

  • amount: Vec3

  Returns Mat33

StaticzRotation

• zRotation(radians, center?): Mat33

• Creates a matrix for rotating Vec2s about center by some number of radians.

  For this function, Vec2s are considered to be points in 2D space.

  For example,

  import { Mat33, Vec2 } from '@js-draw/math';
  
  const halfCircle = Math.PI; // PI radians = 180 degrees = 1/2 circle
  const center = Vec2.of(1, 1); // The point (1,1)
  const rotationMatrix = Mat33.zRotation(halfCircle, center);
  
  console.log(
    'Rotating (0,0) 180deg about', center, 'results in',
    // Rotates (0,0)
    rotationMatrix.transformVec2(Vec2.zero),
  );
  

  Parameters

  • radians: number
  • center: Vec3 = Vec2.zero

  Returns Mat33