How Quaternions Produce 3D Rotation

Edit: I now have an animated video where I explain this topic. Check it out!

Before reading this post, I absolutely recommend watching 3Blue1Brown's video on quaternions and then experimenting with them on his and Ben Eater's interactive website. I consider this post to just be supplemental to their excellent explanation.

So then, how can quaternions be used to produce 3D rotations that could be used in video games, for example?

Quaternions are a 4-dimensional extension of the complex numbers.
Complex numbers are of the form:

$a + bi$

Where $a, b \in \mathbb{R}$ and $i$ is the imaginary unit.
Quaternions on the other hand, are of the form:

$a + bi + cj + dk$

where $a, b, c, d \in \mathbb{R}$ and $i$, $j$, and $k$ are the fundamental quaternion units.
So complex numbers can be thought of as quaternions which have $c = d = 0$, similarly to how real numbers can be thought of as complex numbers with $b = 0$.

Multiplication of two unit complex numbers will result in a pure rotation, which I discuss in more detail in my last post. Similarly, multiplication of two quaternions result in another unit quaternion, but the wacky 4D rotation will not directly translate to a 3D rotation because when we project it back into 3D it does not preserve length of the original 3D vectors, so the space comes out looking... Well, wacky!

If you've ever read anything on quaternions, you are probably familiar with their rules of multiplication:

$i^2 = j^2 = k^2 = -1$
$ij = -ji = k$
$jk = -kj = i$
$ki = -ik = j$

These rules don't make it immediately obvious what happens rotation-wise when two quaternions are multiplied. Note though that any two fundamental quaternion units being multiplied together do not commute (one is the exact opposite of the other) but any one of the fundamental quaternion units multiplying itself or a real number does commute. This will be important later.

The diagram above is the same stereographic projection that Grant used in his video. Look at this diagram and imagine left-multiplying by $i$. It rotates the circle passing through $1$ and $i$ as well as rotating the perpendicular circle that passes through $j$ and $k$ such that:

$1 \mapsto i$
$j \mapsto k$

Take a minute to understand and visualize that.

Now imagine left-multiplying by $-i$. It rotates the same two circles in the opposite direction than positive $i$ did, such that:

$1 \mapsto -i$
$j \mapsto -k$

This shouldn't be too surprising. But now instead of left-multiplying, imagine right-multiplying by $-i$! Well remember, right multiplying only rotates the opposite direction than left-multiplying when you're multiplying two different fundamental quaternion units. So the circle that passes through $1$ and $i$ will be unaffected by switching to right-multiplication, but the circle passing through $j$ and $k$ will now rotate the opposite direction!

$1 \mapsto -i$
$j \mapsto k$

Hmm... Let's try first right-multiplying by $-i$ then left-multiplying the result of that by $i$, so that our equation looks like $iv(-i)$ where $v$ is some quaternion from the picture.

$1 \mapsto -i \mapsto 1$
$j \mapsto k \mapsto -j$

This is very important what just happened! The rotation of the circle passing through $1$ and $i$ has completely cancelled out, while the rotation of the circle passing through $j$ and $k$ has doubled! We have effectively created a rotation only about the i-axis!

We can generalize this to create a pure rotation about any unit vector that is a combination of $i$, $j$, and $k$! But we're gonna need some pictures.

Notice in the picture we first left-multiply by quaternion $q$ (in our example, $q=i$) which creates two perpendicular rotations, both of $\theta$ radians. Then we right-multiply by $\bar{q}$ (conjugate of $q$, which in our example was $-i$. More on this in a moment) which also produces two rotations of $\theta$ radians, but only one of them is opposite of the rotations produced by $q$. Then at last I show "sandwiching" $v$ between $q$ and $\bar{q}$ to produce the single rotation by $2\theta$ radians.

Now let's learn how this works with any unit quaternion $q$ rather than just sticking with our simple example of $q=i$ and $\bar{q}=-i$. Also I will discuss what the conjugate of $q$ is.

First, I'm going to attempt to visualize the 4D unit hypersphere because I think it will be helpful in explanations.

Pay attention to the red region. Since I obviously cannot create a 4D image, I have squished the 3-dimensional ijk space down into a flat circle. The real axis is perpendicular to this space. But remember that the red region is actually 3D, and the 2D appearance is only an artifact of the schematic.

It will be useful to differentiate between the real and vector part of the quaternion. The vector part of a quaternion is the component that lies in the ijk space, and the real part lies on the real axis.

I should mention that when you have a 3D vector $v$ (for rendering graphics for example), and want to rotate this point using quaternion multiplication, you must specify this vector as a "pure quaternion" or as a quaternion who's real part is 0.

So if $v$ has components $x, y, z$ in 3D space, then to specify it as a quaternion, you would write $v = 0 + xi + yj + zk$. Then the multiplication $qv\bar{q}$ will yield a new pure quaternion if $q$ is a unit quaternion. This new pure quaternion represents the point $v$ after the rotation has been applied.

Now back to the question of how to find a quaternion $q$ that will perform the desired rotation. Think back to complex numbers. To specify a complex number $z$ on the unit circle that makes some angle $\theta$ with the horizontal, you can write:

$z = \cos{\theta} + i\sin{\theta}$

Increasing $\theta$ will rotate a point around the circle passing through $1$ and $i$. But instead of multiplying $\sin{\theta}$ by $i$, we could multiply it by any unit vector that is orthogonal to the real axis and we would still get a unit circle. So let's do exactly that.

$q = \cos{\theta} + \sin{\theta}(xi + yj + zk)$

We are multiplying $\sin{\theta}$ by the vector part of a quaternion! And in fact, the whole equation describes a single quaternion whose real part is $\cos{\theta}$ and vector part is $\sin{\theta}(xi + yj + zk)$.

Now instead of making a circle that passes through $1$ and $i$ like complex numbers, we have made a circle that passes through $1$ and any arbitrary point on the 3D unit sphere (3D because there are only 3 components in the vector part of the quaternion that is multiplying $\sin{\theta}$). But remember that this point in 3D space is entirely orthogonal to the real axis (it is the red region in the first schematic), so we're still forming a perfect unit circle assuming that $x^2 + y^2 + z^2 = 1$.

And this also guarantees that the whole quaternion will still have length $1$ since $\cos^2{\theta} + \sin^2{\theta} = 1$ is always true.

Now think back to the quirk of quaternion multiplication. It will rotate two circles: the one passing through $1$ and the vector $xi + yj + zk$, and the perpendicular circle to that. And if we were to negate the vector part of $q$ (which results in the conjugate of $q$, denoted $\bar{q}$), both circles would rotate the opposite direction. But like before, if we right multiply by $\bar{q}$ instead of left multiply, we will only negate the rotation direction of the one circle passing through $1$ and the vector part.

Just like before, we can then multiply $qv\bar{q}$ where $v$ is a pure quaternion, both opposite rotations that pass through $1$ and the vector part will cancel out, and the rotation orthogonal to that will be doubled! But the rotation orthogonal to that will be entirely in the ijk space since it's orthogonal to the real axis. In fact, it will be a rotation exactly around the vector $xi + yj + zk$ since the circle must also be orthogonal to that vector! So we know exactly what rotation this multiplication will produce, and it occurs entirely in the ijk space which is a 3-dimensional space. This means we can specify any 3D vector we want in the ijk space and rotate it about any axis also specified in the ijk space!

A side effect of this doubling of the angles is that there are two ways to specify any orientation in 3D space using a quaternion and its conjugate. Specifically, we can achieve the other identical orientation of $q$ with $-q$. Negating a unit vector corresponds to a 180 degree rotation, but the conjugate quaternion doubles this angle resulting in a 360 degree rotation which is the same orientation!

This property becomes especially useful when you want to interpolate between two orientations. It allows the programmer to choose whether to take the long path or short path to rotate to the new orientation. The illustration above shows the difference in path lengths interpolating from $\frac{\pi}{2}$ to $2\pi$. If you would like to take the shorter path to $2\pi$, simply negate $q$ before interpolating.

Hopefully this has been insightful. Another thanks to 3Blue1Brown for making such an amazing introduction to quaternions which I still recommend you look at if you haven't yet.

Geometric Interpretation of Complex Multiplication

You probably know that multiplication of two complex numbers results in a third complex number whose angle with the horizontal can be found by adding the two input angles, and whose magnitude can be found by multiplying the two input magnitudes.

It works out really nicely but... Why? How does this geometric interpretation come about by using the simple defintion that $i=\sqrt{-1}$?

Let $z$ be a complex number of the form $a + bi$ where $a, b \in \mathbb{R}$, and $i$ is the imaginary unit.

The magnitude of $z$ is $\sqrt{a^2 + b^2}$. We will call this $r$ for radius.

$r = ||z|| = \sqrt{a^2 + b^2}$

We can now divide $z$ by $r$ resulting in a unit vector (or unit complex number I guess).

$z = r\frac{z}{r} = r(unit\_vector)$

Now let's think of a way to rewrite "unit_vector" because it's not doing us much good right now... Well, $\cos{\theta} + \sin{\theta}$ is guaranteed to lie on the unit circle, so this is promising! Of course we're dealing with the complex plane, so we'll multiply $\sin{\theta}$ by $i$ so that $\sin{\theta}$ will represent the imaginary component which is perpendicular to the real component.

Rewriting our new and improved equation, we get:

$z = r\frac{z}{r} = r(\cos{\theta} + i\sin{\theta})$

Ok great! We've written it in a form where the magnitude and direction are separated so it's easy to keep track of each one. Maybe this will let us discover what happens to magnitude and direction during multiplication!

Let's go ahead and multiply two complex numbers written in this form and see what happens:

$r_1(\cos{\theta} + i\sin{\theta}) \cdot r_2(\cos{\beta}+ i\sin{\beta})$
$= r_1 r_2(\cos{\theta} + i\sin{\theta})(\cos{\beta} + i\sin{\beta})$
$= r_1 r_2(\cos{\theta}\cos{\beta} + i\cos{\theta}\sin{\beta} + i\sin{\theta}\cos{\beta} - \sin{\theta}\sin{\beta})$
$= r_1 r_2(\cos{\theta}\cos{\beta} - \sin{\theta}\sin{\beta} + i(\sin{\theta}\cos{\beta} + \cos{\theta}\sin{\beta}))$

It's pretty obvious that the magnitudes are being multiplied which explains half of the puzzle! But it looks like the angles have become a little... messy.

Let's take an intermission from this problem, and give linear algebra a quick visit. In fact let's just derive the angle addition formula, just a totally random unrelated activity to get our minds off complex numbers.

Recall the 2D rotation matrix:

$\left[\begin{matrix}\cos{\theta} & -sin{\theta}\\ sin{\theta} & cos{\theta}\end{matrix}\right]$

So then if we first rotate by angle $\beta$ followed by a rotation of angle $\theta$, we can write this either as a rotation by angle $\theta + \beta$ or as the multiplication of two matrices representing the rotation of angle $\beta$ and $\theta$ respectively:

$\left[\begin{matrix}\cos(\theta + \beta) & -sin(\theta + \beta)\\ sin(\theta + \beta) & cos(\theta + \beta)\end{matrix}\right]$
$= \left[\begin{matrix}\cos{\theta} & -sin{\theta}\\ sin{\theta} & cos{\theta}\end{matrix}\right]
\left[\begin{matrix}\cos{\beta} & -sin{\beta}\\ sin{\beta} & cos{\beta}\end{matrix}\right]$
$= \left[\begin{matrix}\cos{\theta}\cos{\beta} - \sin{\theta}\sin{\beta} &
-cos{\theta}\sin{\beta} - \sin{\theta}\cos{\beta}\\
sin{\theta}\cos{\beta} + \cos{\theta}\sin{\beta} &
-\sin{\theta}\sin{\beta} + \cos{\theta}\cos{\beta}\end{matrix}\right]$

Therefore,

$\cos(\theta + \beta) = \cos{\theta}\cos{\beta} - \sin{\theta}\sin{\beta}$
$sin(\theta + \beta) = sin{\theta}\cos{\beta} + \cos{\theta}\sin{\beta}$

We just derived the angle addition formulas!! And it looks like we can use it to make some substitutions where we left off on our complex number multiplication!

...
$= r_1 r_2(\cos{\theta}\cos{\beta} - \sin{\theta}\sin{\beta} + i(\sin{\theta}\cos{\beta} + \cos{\theta}\sin{\beta}))$
$= r_1 r_2(\cos(\theta + \beta) + i\sin(\theta + \beta))$

And that's it! We can now see clearly that multiplying two complex numbers will result in a new complex number whose magnitude is multiplying the input magnitudes, and whose angle is the addition of the input angles.

This can also be shown using Euler's Formula:

$e^{ix} = \cos{x}+i\sin{x}$

Just multiply by some radius so you're no longer restricted to unit vectors, multiply two of them together and watch the magic.

$r_1 e^{i\theta} \cdot r_2 e^{i\beta} = r_1 r_2 e^{i(\theta + \beta)}
= r_1 r_2(\cos(\theta + \beta) + i\sin(\theta + \beta))$

Euler's Formula also gives rise to the ubiquitous Euler's Identity: $e^{i\pi}=-1$.
There is much more to be said about Euler's Formula and its derivation, but this post is long enough.