Matrices: The Mathematics Behind Computer Graphics

Take a spaceship at the center of the screen. Rotate it 90°, then move it 10 units to the right. Now reset and do it the other way: move first, then rotate 90°.

The spaceship ends up in two completely different places. In the first case it's 10 units to the right. In the second, it swings around the center and lands 10 units up.

That's because transformations in computer graphics are matrices, and matrix multiplication doesn't care about the order you'd expect. Understanding that one fact explains a huge share of graphics bugs, and nearly every GPU operation.

A × B ≠ B × A

With ordinary numbers, 3 × 5 = 5 × 3. With matrices, the order usually matters:

Rotate × Translate  ≠  Translate × Rotate

Each transformation happens relative to the origin. Rotating after moving swings the object around the origin in a wide arc. Rotating before moving spins it in place. Most engines follow the convention Scale, then Rotate, then Translate, so objects are resized and turned around their own center before being placed in the world.

Transformations as Matrices

A matrix is a grid of numbers. Multiplying a point's coordinates by a matrix transforms it.

Scaling

[ sₓ  0 ] [x]   [sₓ·x]
[ 0  s_y] [y] = [s_y·y]

Scaling (2, 3) by 2 horizontally and 0.5 vertically gives (4, 1.5).

Rotation

Rotating counterclockwise by angle θ:

[ cos θ  −sin θ ]
[ sin θ   cos θ ]

For θ = 90°, cos θ = 0 and sin θ = 1, so (1, 0) becomes (0, 1). Check values with the sine calculator and convert angles with degrees to radians.

Shear

[ 1  k ]
[ 0  1 ]

Shifts x in proportion to y, turning squares into parallelograms, as in italic text.

Translation Needs a Third Coordinate

There's a problem. Moving a point, (x, y) → (x + 5, y + 2), can't be written as a 2 × 2 matrix. Multiplying (0, 0) by any matrix always gives (0, 0), so the origin could never move.

The fix is homogeneous coordinates: write points as (x, y, 1) and use 3 × 3 matrices:

[ 1  0  tₓ ] [x]   [x + tₓ]
[ 0  1  t_y] [y] = [y + t_y]
[ 0  0  1  ] [1]   [  1   ]

In 3D, the same trick gives 4 × 4 matrices, the standard size in every graphics API.

An Insider Reference: From Cayley to Larry Roberts

The word "matrix" was coined by English mathematician James Joseph Sylvester in 1850. His friend Arthur Cayley published "A Memoir on the Theory of Matrices" in 1858, defining matrix multiplication and noting that it isn't commutative.

A century later, Lawrence G. Roberts, an MIT graduate student, brought homogeneous coordinates into computer graphics in his 1963 work on machine perception of 3D solids. Using 4 × 4 matrices let a computer handle translation, rotation, scaling and even perspective with one uniform operation. Roberts later became one of the principal architects of ARPANET, the precursor to the internet.

Combining Transformations

The power of matrices is that a whole chain of transformations collapses into one:

M = Translate × Rotate × Scale

Apply M to a million vertices, and each gets all three transformations with a single multiplication. Graphics programs build a chain known as Model-View-Projection (MVP):

• Model: place the object in the world
• View: move the world so the camera is at the origin
• Projection: apply perspective to produce screen coordinates

screen_position = Projection × View × Model × vertex

GPUs are built to multiply 4 × 4 matrices by vectors extremely fast, in parallel, which is why they're so good at graphics. Try the operations with the matrix multiplication calculator.

What the Determinant Tells You

The determinant of a 2 × 2 transformation matrix is:

det [ a  b ] = ad − bc
    [ c  d ]

It measures how the transformation changes area:

A negative determinant flips the winding order of triangles, which can make surfaces appear inside-out. Engines check the determinant for exactly that reason.

Inverse Matrices: Undoing and the Camera

The inverse matrix M⁻¹ undoes M. The view matrix is the inverse of the camera's own transformation: moving a camera 10 units left is the same as moving the whole world 10 units right.

For pure rotation matrices, the inverse is just the transpose (rows and columns swapped), which is far cheaper to compute. See it with the matrix transpose calculator.

Normal vectors need special care. When a model is scaled unevenly, its normals must be transformed by the inverse transpose of the model matrix, or lighting will look wrong.

Two Concepts Worth Knowing

Linear Transformation

A linear transformation preserves straight lines and the origin, and can always be written as a matrix. Rotations, scalings and shears are linear. Translations become linear only in homogeneous coordinates.

Identity Matrix

The identity matrix has 1s on the diagonal and 0s elsewhere. Multiplying by it changes nothing, like multiplying by 1. It's the starting point for building every transformation chain.

Quick Answer: How Are Matrices Used in Computer Graphics?

Computer graphics represents transformations such as scaling, rotation, translation and perspective projection as matrices, usually 4 × 4 using homogeneous coordinates. Multiplying matrices combines transformations into one, but order matters because matrix multiplication isn't commutative. The determinant reveals scaling and mirroring, and inverses undo transformations.

Try Them Yourself

• Matrix Multiplication Calculator: combine transformations and test the order
• Matrix Transpose Calculator: invert pure rotations
• Scalar Multiplication Calculator: uniform scaling
• Sine Calculator: values for rotation matrices
• Degrees to Radians: angles in the units matrices use
• Vectors: The Mathematical Language of 3D Graphics: what matrices act on

Multiply a 90° rotation matrix by a translation matrix in both orders using the calculator. Apply each result to the point (1, 0). Seeing the two different answers makes matrix order unforgettable.