← All Labs
MATHS · VISUAL LAB · IDEA 40

Matrices — machines that move space

A matrix looks like a lifeless table of numbers. It isn't. It's a verb: an instruction that grabs the entire plane and stretches, shears, spins or flips it — all at once, everywhere, in a way that keeps grid lines straight and parallel. Drag the four entries of A and watch the coloured grid deform. The shaded square is the image of the unit square; its signed area is the determinant. Toggle on the inverse, the eigenlines, a second matrix to compose with, or switch to a live 3×3 where the determinant becomes a signed volume.

DRIVE IT

Warp the plane. Read the machine.

The faint grid is space before; the teal grid is space after A acts on it. Drag the coloured tips A·î and A·ĵ directly, or use the sliders.
p5.js · LIVE 2×2 / 3×3
point –
A·point –
Drag the blue/red arrow tips to set the columns of A. The shaded parallelogram is A applied to the unit square — its signed area is det A.
a (î→x)1.20
b (ĵ→x)0.60
c (î→y)0.40
d (ĵ→y)1.30
e0.80
f-0.60
g0.60
h0.80
det A (signed area)
–
trace A
–
eigenvalues
–
orientation
–
invertible?
–
det M (signed volume)
–
trace M
–
orientation
–
invertible?
–
Drag on the canvas to tumble the view. The white wireframe is the unit cube; the teal solid is M applied to it.
before after (A / M) A·î A·ĵ eigenline
WALKTHROUGH

How to read what you're seeing

Five moves from "table of numbers" to "instruction for reshaping space."
5 STEPS
1
Columns are destinations. The whole matrix is decided by where two arrows land: A·î (where the x-unit goes) and A·ĵ (where the y-unit goes). Drag those tips — the entire grid follows, because every point is just a combination of î and ĵ.
2
Grid lines stay straight and parallel. No matter how you drag, the teal lines never bend and never cross at new angles within a family. That "straight-and-even" property is what makes a transformation linear — it's the whole definition, made visible.
3
The determinant is an area. Watch the shaded square. Its area starts at 1 and changes as you drag; that number is det A. Push the columns until the square flips inside-out — the determinant goes negative. Squash it to a line and det = 0: space has been crushed into fewer dimensions.
4
Undo with the inverse. Turn on A⁻¹: the dashed grid is the machine that puts every point back. When det A hits 0 the inverse vanishes — you can't un-squash a plane that's been flattened to a line. That's exactly when a matrix has "no inverse."
5
Chain two machines. Turn on A·B: B moves space first, then A moves the result. Determinants multiply — det(AB)=det A · det B — so two half-area maps make a quarter-area map. Then hit 3×3: the same story in space, where the determinant is now a signed volume.
AHA

A matrix is a verb, not a noun

The single idea to leave with.
THE POINT
AHA MOMENT
A matrix isn't a grid of numbers to memorise — it's a recorded motion of space. Those numbers are nothing but the coordinates of where the basis arrows land, and from that one fact everything follows: the columns are the destinations, matrix multiplication is "do this move after that move," and the determinant is simply how much the move stretches area (or volume) — and whether it flips it.
EXPLANATION

The maths, computed live

No faked plot — every grid line, area and inverse is solved from the live slider values each frame.
UNDER THE HOOD

A linear map is any transformation of space that (a) sends straight lines to straight lines through the origin and (b) respects addition and scaling: T(αu + βv) = αT(u) + βT(v). Because any vector is a combination of the basis arrows, the map is completely determined by where î and ĵ go:

The columns of A are literally the landing spots of the basis vectors — that's why dragging the coloured tips is editing the matrix.

Applying A to any point is then just a weighted sum of those columns:

Every teal grid vertex is this formula evaluated on an integer point of the original grid.

The determinant is the signed area of the image of the unit square — the parallelogram spanned by the two columns:

Positive → orientation preserved. Negative → the plane was flipped over. Zero → collapsed onto a line, area destroyed.

The inverse reverses the motion, and it exists exactly when no area was destroyed (det ≠ 0):

The 1/det factor is why the inverse blows up as det → 0 — you'd have to undo a flattening, which no linear map can do.

Composition is stacking motions. Doing B then A is the single matrix product AB, and areas simply multiply:

Two maps that each halve area combine to a quarter-area map. Order matters for the shape (AB ≠ BA in general) but not for the determinant.

Into 3D. Nothing changes but the count: a 3×3 matrix is decided by where î, ĵ, k̂ land (its three columns), and its determinant is the signed volume of the parallelepiped they span:

The scalar triple product of the columns. Negative means a left-handed flip; zero means the cube was squashed flat into a plane, line, or point.

Why it matters. Rotations, camera projections, image warps, the Jacobian of a change of variables, PageRank, and every neural-network layer are this exact object: space, moved by a rule you can watch.

RESEARCH NOTE

What's genuine here

Provenance & verification.
HONESTY

Real computation. Every frame the sketch reads the live matrix entries, maps each grid vertex by the actual matrix–vector product, computes det = ad−bc (2×2) or the scalar triple product of the columns (3×3), inverts via the closed-form adjugate/det, and — when composing — forms the true matrix product AB before mapping. Nothing is precomputed or tabled.

Cross-checks shown on screen. The shaded parallelogram's area is measured geometrically (the shoelace formula on its four corners) and matches the algebraic ad−bc to the displayed precision. Eigenvalues satisfy λ₁+λ₂ = trace and λ₁λ₂ = det — both visible in the readout so the solver can be checked against the invariants. The inverse grid, when overlaid on the forward grid, returns the standard grid — a live identity check A⁻¹A = I.

Degenerate cases handled. As det → 0 the inverse toggle is suppressed and a "singular — no inverse" flag appears; the parallelogram collapses to a segment. Negative determinants flip the fill colour and report "orientation reversed." Complex eigenvalues (rotational maps) are reported as a conjugate pair rather than drawn as fake eigenlines.

Built to sit alongside the repo's other applets (Eigenvectors #23, Lorenz, Hopf, Poincaré disc, Riemann lab) and to link directly to the eigenvector "grain" idea. Idea #40 from the 45 maths visual-teaching ideas list. Tech: p5.js, self-contained single file, KaTeX for the formulae.