determin.ant — Linear Algebra from Scratch

Where you'll see this: OpenGL and WebGL pass 4×4 matrices to the GPU for every object on screen. In PyTorch, a nn.Linear layer is literally a matrix multiplication. Every image transformation in Photoshop — rotate, scale, skew — is a matrix applied to pixel coordinates.

Last lesson you saw that a linear transformation is fully determined by where $\hat{\imath}$ and $\hat{\jmath}$ land. A matrix is just the most compact way to write that down.

Reading a matrix

A 2×2 matrix stores exactly two things: the new home of $\hat{\imath}$ in the first column, and the new home of $\hat{\jmath}$ in the second column.

\begin{bmatrix} a & b \\ c & d \end{bmatrix} \quad \hat{\imath} \to \begin{bmatrix}a\\c\end{bmatrix} \quad \hat{\jmath} \to \begin{bmatrix}b\\d\end{bmatrix}

The rotation by 90° matrix is a good example: $\hat{\imath} = [1,0]$ lands at $[0,1]$ (straight up), and $\hat{\jmath} = [0,1]$ lands at $[-1,0]$ (pointing left):

\begin{bmatrix} 0 & -1 \\ 1 & 0 \end{bmatrix}

Applying the transformation

To transform a vector $[x,\ y]$ , use the matrix columns as scaled versions of where the basis vectors went:

\begin{bmatrix} a & b \\ c & d \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix} = x \begin{bmatrix}a\\c\end{bmatrix} + y \begin{bmatrix}b\\d\end{bmatrix} = \begin{bmatrix}ax+by\\cx+dy\end{bmatrix}

It's a linear combination — x copies of where î landed, plus y copies of where ĵ landed. That's matrix-vector multiplication, fully explained.

Try the Rotate 90° preset, then manually type the numbers into the matrix. Then try Shear — notice how vertical lines stay vertical but horizontal ones tilt. Every entry in the matrix has a geometric meaning.

The determinant preview

Below the matrix editor you'll see a determinant value. This number measures how much the transformation scales area. Determinant 2 means areas double. Determinant −1 means areas stay the same but orientation flips. Determinant 0 means the transformation collapses the entire plane down to a line — or even a point.

We'll spend a full module on determinants. For now, just notice how it changes as you edit the matrix.

In code

import numpy as np

# Rotation by 90°
M = np.array([[0, -1],
              [1,  0]])

v = np.array([3, 1])
print(M @ v)   # [-1  3]  — matrix-vector multiply

The @ operator is matrix multiplication in NumPy.M @ v applies the transformation M to the vector v.

Matrices as Transformations

Reading a matrix

Applying the transformation

The determinant preview

In code