determin.ant — Linear Algebra from Scratch

Where you'll see this: a 3D game applies a chain of transformations to every object each frame — scale it, rotate it, translate it into world space, then into camera space. All of those are multiplied into one matrix so the GPU only does one operation per vertex. Composition is how that chain is built.

You can apply one transformation after another. First rotate the grid, then stretch it. The combined effect is itself a linear transformation — and it has its own matrix.

Matrix multiplication = applying two transformations

If $A$ is the first transformation and $B$ is the second, the composition is written $BA$ — B after A. The order matters: rotate-then-scale is not the same as scale-then-rotate.

(B \circ A)\,\mathbf{v} = B(A\mathbf{v})

Read right-to-left: apply $A$ to the vector first, then apply $B$ to the result. The combined matrix $BA$ stores that whole process in one object.

Why order matters

Consider rotating 90° then scaling x by 2, versus scaling x by 2 then rotating 90°. Try swapping A and B in the interactive — you'll get a different grid each time. In matrix terms: $BA \neq AB$ in general.

Matrix multiplication is not commutative. This surprises people who are used to regular numbers where

3 \times 5 = 5 \times 3

. With matrices, the order you multiply them in is the order the transformations happen.

Determinants multiply

There's a clean rule for area scaling: the determinant of a product equals the product of the determinants.

\det(BA) = \det(B) \cdot \det(A)

If A doubles area and B triples it, BA scales area by 6. Watch the determinant readout below the matrices as you change presets.

In code

import numpy as np

A = np.array([[0, -1], [1,  0]])  # rotate 90°
B = np.array([[2,  0], [0,  1]])  # scale x by 2

# Apply A first, then B
BA = B @ A
v = np.array([1, 0])
print(BA @ v)   # same as B @ (A @ v)

In NumPy, B @ A computes the composed matrix. Note that A @ B gives a different result.