Season 12 Episode 1
How do you get a 2D screen to show something that looks 3D? On this episode, Christian is on OOMC to show us the mathematics that has to happen to make computer graphics work!
Further Reading
Linear Algebra
The lesson from Christian’s algebra is that, if you have a function $f$ that takes vectors and returns vectors, with the properties that for any scalar $\lambda$ and any vectors $v_1$ and $v_2$ as $f(\lambda v_1)=\lambda f(v_1)$ and $f(v_1+v_2)=f(v_1)+f(v_2)$, then as a result you have $$f\!\left(\binom{x}{y}\right) = x f\!\left(\binom{1}{0}\right) + y f\!\left(\binom{0}{1}\right)$$ which you could write as $xu+yv$ where $u$ and $v$ are fixed vectors. The behaviour of your function on a general input is completely determined by the behaviour of your function on the special vectors $\binom{1}{0}$ and $\binom{0}{1}$.
There was a brief moment in the episode where Christian showed you a matrix as a way to store the information about where the function sends $\binom{1}{0}$ and $\binom{0}{1}$, and this was maybe the first time you’ve seen a matrix. Even if you’ve seen a matrix before, note that Christian made the interesting choice to call the matrix $$\begin{pmatrix}a & c \\ b & d\end{pmatrix},$$ which might have $b$ and $c$ the other way around to how you’d expect. The point is that Christian is not reading across the rows like you would when you’re reading a book (in English). For Christian, the coefficients $a$ and $b$ are first because that vector, $\binom{a}{b}$ is the vector $u$ above, the place that $\binom{1}{0}$ is sent to. I think that’s a better way of labelling the coefficients in a matrix. You don’t have to agree!
For more on linear algebra, you might like the free MIT OpenCourseWare lecture course. This lecture video series is a classic, filmed in 1999. For a more modern video series, you might like the 3Blue1Brown series Essence of linear algebra. Alternatively, you might like the notes provided by Jim Hefferon here or the lecture notes from Oxford Mathematics here.
Compound angle formulas
During the episode we used rules for $\sin(A+B)$ and $\cos(A+B)$. These might have been new to you, although if you're doing A-level Mathematics then you will see these before the end of the course. Here are two ways to understand where they come from!
First, let's state the rules clearly:
$$\sin(A+B) = \sin A \cos B + \cos A \sin B$$
$$\cos(A+B) = \cos A \cos B - \sin A \sin B$$
Method 1: big nasty diagram. These are rules about the angle $A+B$, so the idea is to draw a diagram that contains an angle $A+B$, and then carefully label lengths in terms of $\sin A$, $\cos A$, $\sin B$, $\cos B$. Wikipedia has this version of the diagram. You might like to try to re-create this diagram yourself to work out what's going on! Start with the angles $A$ and $B$ (or $\alpha$ and $\beta$ like Wikipedia), and the length 1 for the line that's at an angle $A+B$ above the $x$-axis. Mark in some right-angles so that you can use SOHCAHTOA, and draw a rectangle around the whole thing with the sides parallel to the $x$-axis and the $y$-axis so that you can find the coordinates of points. Then see how many of the lengths you can deduce!
Method 2: complex numbers. If you've seen the notation $e^{i\theta} = \cos\theta + i\sin\theta$, then you know that you can add angles by multiplying exponentials:
$$e^{i(A+B)} = e^{iA} \times e^{iB} = (\cos A + i\sin A)(\cos B + i\sin B).$$
Expanding the right-hand side and separating real and imaginary parts gives both formulas immediately. Why should angles work like this? We’ll see on the next episode of OOMC what trigonometry has in common with exponentials.
Computer Graphics
Here are links to all Christian’s Desmos files from the livestream
- Visualisation of general linear transformations
- Object representation visualisation
- Visualisation of perspective projection process
Christian also has a Desmos interactive that goes a bit further, combining these ideas into what could be the beginning of a 3D graphics engine in 2D Desmos… Graphics interactive graph.
Christian recommends two videos from Branch Education on the graphics pipeline;
If you’re looking for a programming guide, Christian recommends these (advanced!) guides to graphics, which also explain textures and lighting.
If you want to get in touch with us about any of the mathematics in the video or the further reading, feel free to email us on oomc [at] maths.ox.ac.uk.