Determinants

When you apply a transformation, regions of space grow or shrink. The determinant tells you by exactly how much -- and whether orientation flips.

You've been thinking of matrices as transformations. A matrix takes the basis vectors and moves them somewhere new, and the entire plane follows. But we haven't yet asked a simple question: after the transformation, how much has area changed?

Take the unit square -- the square formed by $\hat{\imath}$ and $\hat{\jmath}$, with an area of exactly 1. Apply a transformation, and that square warps into a parallelogram. The area of that parallelogram tells you something fundamental about the transformation. It's called the determinant.

The unit square, before and after

Start with the unit square: corners at $(0, 0)$, $(1, 0)$, $(1, 1)$, and $(0, 1)$. Its area is 1. Now apply the transformation described by the matrix $\begin{bmatrix} 2 & 1 \\ 0 & 1.5 \end{bmatrix}$. The basis vectors land at $\hat{\imath}' = (2, 0)$ and $\hat{\jmath}' = (1, 1.5)$. The unit square becomes a parallelogram.

The dashed purple square has area 1. After the transformation, it becomes the orange parallelogram with area 3. The determinant of this matrix is 3.

The original unit square (purple, dashed) had area 1. The orange parallelogram has area 3. That factor of 3 is the determinant. Every region of the plane -- not just this square -- gets its area multiplied by 3 under this transformation. A tiny circle becomes a tiny ellipse with 3 times the area. A complex polygon triples its area. The determinant is a single number that captures the scaling factor for all areas.

Determinant = 2: area doubles

Here's a cleaner example. The matrix $\begin{bmatrix} 2 & 0 \\ 0 & 1 \end{bmatrix}$ stretches space horizontally by a factor of 2 and leaves the vertical direction alone. The basis vector $\hat{\imath}$ lands at $(2, 0)$, and $\hat{\jmath}$ stays at $(0, 1)$.

The unit square doubles in width. Area goes from 1 to 2. The determinant is 2 -- every area in the plane doubles.

This is the simplest case: a horizontal stretch by factor 2 with no vertical change. The rectangle's area is $2 \times 1 = 2$. The determinant confirms it: $\det\begin{bmatrix} 2 & 0 \\ 0 & 1 \end{bmatrix} = (2)(1) - (0)(0) = 2$.

Determinant = 0: collapse

Now something dramatic. The matrix $\begin{bmatrix} 2 & 1 \\ 4 & 2 \end{bmatrix}$ sends $\hat{\imath}$ to $(2, 4)$ and $\hat{\jmath}$ to $(1, 2)$. Look closely at those two vectors: $(1, 2)$ is exactly half of $(2, 4)$. They point in the same direction. The two basis vectors, which used to span the entire plane, now both land on the same line.

Both basis vectors land on the same line. The parallelogram has collapsed to zero area. The determinant is zero.

When the determinant is zero, space collapses. The entire 2D plane gets squished down onto a line (or even a single point). Information is lost. If two different input vectors get mapped to the same output, you can't tell them apart anymore -- the transformation is irreversible. A matrix with determinant zero is called singular, and it has no inverse.

The computation confirms it: $\det\begin{bmatrix} 2 & 1 \\ 4 & 2 \end{bmatrix} = (2)(2) - (1)(4) = 4 - 4 = 0$.

Negative determinant: orientation flips

Here's the subtlest case. The matrix $\begin{bmatrix} -1 & 0 \\ 0 & 1 \end{bmatrix}$ reflects space across the $y$-axis. The basis vector $\hat{\imath}$ flips to $(-1, 0)$, while $\hat{\jmath}$ stays at $(0, 1)$.

The parallelogram (in this case still a square) has area 1. So area is preserved. But something has changed: the orientation of the basis vectors is reversed. Originally, $\hat{\jmath}$ was counter-clockwise from $\hat{\imath}$. After the reflection, $\hat{\jmath}$ is clockwise from the new $\hat{\imath}$. It's like the plane has been turned inside-out.

The area is still 1, but the plane has been reflected. The determinant is -1: the negative sign means orientation reversed.

The determinant captures both pieces of information. Its absolute value tells you the area scaling factor. Its sign tells you whether orientation is preserved (positive) or flipped (negative). A positive determinant means the basis vectors maintain their counter-clockwise relationship. A negative determinant means that relationship has reversed -- like looking at the plane in a mirror.

The formal bit

For a 2x2 matrix, the determinant has a clean formula:

$$\det\begin{bmatrix} a & b \\ c & d \end{bmatrix} = ad - bc$$

This isn't a magic incantation -- it's the signed area of the parallelogram formed by the column vectors $(a, c)$ and $(b, d)$. The "signed" part means it's positive when the second vector is counter-clockwise from the first, and negative when it's clockwise.

Here's how the formula connects to the geometry. The column vectors of the matrix are the transformed basis vectors. They form a parallelogram. The area of a parallelogram spanned by two vectors can be computed as the cross product magnitude -- and for 2D vectors $(a, c)$ and $(b, d)$, that's exactly $ad - bc$.

Three properties worth knowing:

Multiplicative. $\det(AB) = \det(A) \cdot \det(B)$. If $A$ scales area by 3 and $B$ scales area by 2, then applying $A$ then $B$ scales area by 6. The determinants just multiply.

Zero means singular. If $\det(A) = 0$, the matrix is not invertible. Space has collapsed -- you can't un-collapse it. This is the single most important use of the determinant: it's a one-number test for whether a matrix has an inverse.

Sign tracks flips. Each reflection flips the sign. Two reflections cancel out (positive again). The sign of the determinant is a running tally of how many times orientation has been flipped.

Worked example: front-face culling in 2D

In 2D game rendering, you often need to know if a triangle is "front-facing" (vertices listed counter-clockwise) or "back-facing" (clockwise). This matters for deciding what to draw and what to cull.

Given a triangle with vertices $P_0 = (1, 1)$, $P_1 = (4, 1)$, and $P_2 = (2, 3)$, form two edge vectors:

$$\vec{e}_1 = P_1 - P_0 = (3, 0) \qquad \vec{e}_2 = P_2 - P_0 = (1, 2)$$

Now compute the determinant of the matrix formed by these edge vectors as columns:

$$\det\begin{bmatrix} 3 & 1 \\ 0 & 2 \end{bmatrix} = (3)(2) - (1)(0) = 6$$

The result is positive, so the vertices are listed counter-clockwise -- this triangle is front-facing. If the result were negative, the vertices would be clockwise (back-facing). If the result were zero, the three points would be collinear -- not a triangle at all.

The absolute value $|6|$ divided by 2 also gives you the triangle's area: $\frac{6}{2} = 3$ square units. Two results from one computation.

In code, that's just:

function isFrontFacing(p0, p1, p2) {
  const e1x = p1.x - p0.x;
  const e1y = p1.y - p0.y;
  const e2x = p2.x - p0.x;
  const e2y = p2.y - p0.y;
  const det = e1x * e2y - e2x * e1y;
  return det > 0; // positive = CCW = front-facing
}

This exact pattern shows up in physics engines (checking winding order), computational geometry (point-in-polygon tests), and every 3D renderer's back-face culling pipeline -- just extended to 3D with cross products.

What's next

If a transformation has a nonzero determinant, it doesn't collapse space -- which means it can be undone. That's the inverse matrix. Given a matrix $A$ and a result vector $\vec{b}$, the inverse lets you solve for the original input: $\vec{x} = A^{-1}\vec{b}$. But only when the determinant isn't zero.