Matrix3 Transform

Transformation

Matrix

What you see

The gray outline is the original arrow at the canvas center. Drag the sliders in the Transformation panel below to build a Matrix3 — the cyan arrow is the same shape transformed by it, the red and green segments are the transformed basis vectors, and the yellow dot marks the matrix origin. Press I to draw the inverse (orange) and R to reset.

API features used

Matrix3 · CanvasRenderer · InputManager · Vector2 · Color

Compose translation, rotation and scaling with multiply, then apply them with applyToVector, applyToDirection or renderer.applyMatrix. Undo with invert, inspect with toArray and equals. Every operation is immutable.

Source code