How Video Games Spin the World
Every rotation, zoom and tilt on your screen is the same trick: multiply every point by one small grid of numbers. Build the trick yourself and animate a shape with nothing but multiplication.
Where this idea comes from
Start here — these are the sources that inspired this exploration.
Introduction
When a game spins the camera, the computer moves millions of points in a millisecond, all with one tool: a small 2-by-2 (or 3-by-3) grid of numbers that tells every point where to go. 3Blue1Brown's animations show the idea directly: the grid is the transformation. You can rebuild it from scratch: draw a shape from coordinates in a spreadsheet, transform the points, and watch your shape rotate, stretch, shear or flip. There's a rival method too - treating each point as a single 'two-part number' that rotates when you multiply - and deciding which method to use where is a real professional question.
Guiding Questions
- Draw a simple shape as a list of coordinates in a spreadsheet, plotted with straight lines. Find what to do to every point so the whole shape doubles in size. What about flipping it?
- Rotation is the interesting one: work out where the points (1,0) and (0,1) should land after a turn through an angle, and convince yourself that knowing those two landing spots tells you where EVERY point goes.
- Package your transformations as 2x2 matrices and chain them: rotate then stretch, stretch then rotate. Does order matter? Predict first, then test in your spreadsheet.
- Each transformation changes your shape's area by some factor. Find the number inside the matrix that controls it — and explain what a factor of zero, or a negative factor, does to your shape.
- Now the rival method: write each point as x + yi and multiply every point by one cleverly chosen number. Which rotations can this do in a single multiplication — and what would it take to animate a smooth spin?
- Pick something a real game does — zooming on a point that isn't the origin, a 3D tilt, a reflection in a sloped mirror — and work out the transformation that does it.