!@thi.ng/matrices

!npm downloads

> [!NOTE]
> This is one of 214 standalone projects, maintained as part
> of the @thi.ng/umbrella monorepo
> and anti-framework.
>
> 🚀 Please help me to work full-time on these projects by sponsoring me on
> GitHub. Thank you! ❤️

- About
- Status
- Related packages
- Installation
- Dependencies
- Usage examples
- API
- Constants
- Matrix creation
- WebGL related
- Matrix conversion
- Setters
- Row & column accessors
- Componentwise matrix - matrix
- Componentwise matrix - scalar
- Matrix multiplication
- Matrix - vector multiplication
- Determinant & inversion
- Matrix transposition
- Quaternion
- Authors
- License

About

Matrix & quaternion operations for 2D/3D geometry processing.

This package provides 160+ matrix & quaternion operations for 2D/3D
geometry processing and acts as companion package for
@thi.ng/vectors.
Like with the vectors package, most functions are defined as
multi-method dispatching to optimized implementations based on matrix
size (which themselves are exposed for direct use too).

Any ArrayLike type can be used as matrix containers (e.g. JS arrays,
typed arrays, custom impls) and hence many other functions provided by
the vectors package can also be used directly with matrices (where
sensible).

Status

STABLE - used in production

Search or submit any issues for this package

Related packages

- @thi.ng/color - Array-based color types, CSS parsing, conversions, transformations, declarative theme generation, gradients, presets
- @thi.ng/geom - Functional, polymorphic API for 2D geometry types & SVG generation
- @thi.ng/vector-pools - Data structures for managing & working with strided, memory mapped vectors
- @thi.ng/vectors - Optimized 2d/3d/4d and arbitrary length vector operations, support for memory mapping/layouts

Installation

``bash
yarn add @thi.ng/matrices
`

ESM import:

`ts
import * as mat from "@thi.ng/matrices";
`

Browser ESM import:

`html

`

JSDelivr documentation

For Node.js REPL:

`js
const mat = await import("@thi.ng/matrices");
`

Package sizes (brotli'd, pre-treeshake): ESM: 5.19 KB

Dependencies

- @thi.ng/api
- @thi.ng/checks
- @thi.ng/math
- @thi.ng/vectors

Note: @thi.ng/api is in _most_ cases a type-only import (not used at runtime)

Usage examples

18 projects in this repo's
/examples
directory are using this package:

| Screenshot | Description | Live demo | Source |
|:-------------------------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------------------|:-------------------------------------------------------------|:------------------------------------------------------------------------------------------|
| | (Re)Constructing the thi.ng logo using a 2D signed-distance field | Demo | Source |
| | Augmenting thi.ng/geom shapes for WebGL, using instancing & attribute buffers | Demo | Source |
| | Converting thi.ng/geom shape types for WebGL | Demo | Source |
| | Various hdom-canvas shape drawing examples & SVG conversion / export | Demo | Source |
| | Barnsley fern IFS fractal renderer | Demo | Source |
| | Live coding playground for 2D geometry generation using @thi.ng/pointfree-lang | Demo | Source |
| | 2D scenegraph & shape picking | Demo | Source |
| | 2D scenegraph & image map based geometry manipulation | Demo | Source |
| | Minimal shader graph developed during livestream #2 | Demo | Source |
| | Fitting, transforming & plotting 10k data points per frame using SIMD | Demo | Source |
| | Entity Component System w/ 100k 3D particles | Demo | Source |
| | 3D wireframe textmode demo | Demo | Source |
| | Visual comparison of biased vs. unbiased normal vectors projected on the surface of a sphere | Demo | Source |
| | 3D arcball controller to rotate the camera view of a colored cube | Demo | Source |
| | WebGL multi-colored cube mesh | Demo | Source |
| | WebGL cube maps with async texture loading | Demo | Source |
| | WebGL instancing, animated grid | Demo | Source |
| | WebGL MSDF text rendering & particle system | Demo | Source |

API

Generated API docs

$3

- IDENT22 / IDENT23 / IDENT33 / IDENT44

$3

- fit23 / fit44
- rotation22 / rotation23
- rotationAroundAxis33 / rotationAroundAxis44
- rotationAroundPoint23
- rotationX33 / rotationX44
- rotationY33 / rotationY44
- rotationZ33 / rotationZ44
- scale22 / scale23 / scale33 / scale44
- scaleWithCenter23 / scaleWithCenter44
- shearX22 / shearY22
- shearX23 / shearY23
- shearXY33 / shearXZ33 / shearYX33 / shearYZ33 / shearZX33 / shearZY33
- shearXY44 / shearXZ44 / shearYX44 / shearYZ44 / shearZX44 / shearZY44
- skewX22 / skewY22
- skewX23 / skewY23
- skewXY33 / skewXZ33 / skewYX33 / skewYZ33 / skewZX33 / skewZY33
- skewXY44 / skewXZ44 / skewYX44 / skewYZ44 / skewZX44 / skewZY44
- translation23 / translation44
- transform23 / transform44

#### WebGL related

- frustum / frustumBounds
- lookAt
- ortho
- perspective
- viewport

$3

- mat22to23
- mat23to22 / mat23to44
- mat33to44 / mat44to33
- normal44

$3

- set / set22 / set23 / set33 / set44
- identity / identity22 / identity23 / identity33 / identity44

$3

- column / column22 / column23 / column33 / column44
- row / row22 / row23 / row33 / row44

$3

- add / add22 / add23 / add33 / add44
- div / div22 / div23 / div33 / div44
- mul / mul22 / mul23 / mul33 / mul44
- sub / sub22 / sub23 / sub33 / sub44

$3

- addN / addN22 / addN23 / addN33 / addN44
- divN / divN22 / divN23 / divN33 / divN44
- mulN / mulN22 / mulN23 / mulN33 / mulN44
- subN / subN22 / subN23 / subN33 / subN44

$3

- mulM / mulM22 / mulM23 / mulM33 / mulM44
- concat

$3

- mulV / mulV22 / mulV23 / mulV33 / mulV344 / mulV44
- project
- unproject

$3

- det22 / det23 / det33 / det44
- det44FromCoeffs / detCoeffs44
- diag / diag22 / diag23 / diag33 / diag44
- invert / invert22 / invert23 / invert33 / invert44
- trace

$3

- transpose22 / transpose33 / transpose44

$3

- alignmentQuat
- conjugateQ
- invertQ
- mixQ
- mulQ
- mulVQ
- quatFromAxisAngle
- quatFromEuler
- quatToAxisAngle
- quatToMat33
- quatToMat44

Authors

- Karsten Schmidt

If this project contributes to an academic publication, please cite it as:

`bibtex
@misc{thing-matrices,
title = "@thi.ng/matrices",
author = "Karsten Schmidt",
note = "https://thi.ng/matrices",
year = 2018
}
``

License

© 2018 - 2026 Karsten Schmidt // Apache License 2.0