Skip to content

Latest commit

 

History

History

matrices

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
test
test
 
 
CHANGELOG.md
CHANGELOG.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
api-extractor.json
api-extractor.json
 
 
package.json
package.json
 
 
tpl.readme.md
tpl.readme.md
 
 
tsconfig.json
tsconfig.json
 
 

README.md

@thi.ng/matrices

npm version npm downloads Mastodon Follow

Note

This is one of 199 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

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

yarn add @thi.ng/matrices

ESM import:

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

Browser ESM import:

<script type="module" src="https://esm.run/@thi.ng/matrices"></script>

JSDelivr documentation

For Node.js REPL:

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

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

Dependencies

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

Usage examples

17 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
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

Constants

  • IDENT22 / IDENT23 / IDENT33 / IDENT44

Matrix creation

  • 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

Matrix conversion

  • mat22to23
  • mat23to22 / mat23to44
  • mat33to44 / mat44to33
  • normal44

Setters

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

Row & column accessors

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

Componentwise matrix - matrix

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

Componentwise matrix - scalar

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

Matrix multiplication

  • mulM / mulM22 / mulM23 / mulM33 / mulM44
  • concat

Matrix - vector multiplication

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

Determinant & inversion

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

Matrix transposition

  • transpose22 / transpose33 / transpose44

Quaternion

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

Authors

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

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

License

© 2018 - 2024 Karsten Schmidt // Apache License 2.0