Introduction to quaternions

Note: due to LinkedIn not having formatting options for mathematical terms, they are all shown as images. It is recommended then to view this on desktop, as on mobile some of the images may be stretched

If you’ve ever used a game engine like Unity, you’ll probably have seen that it uses quaternions instead of Euler angles to represent rotation. This is because Euler angles suffer from something known as gimbal lock. This is where you lose a degree of freedom (meaning you can only rotate in 2 axes instead of 3). Quaternions however do not suffer from gimbal lock, which is why they are used.

In this article, instead of jumping straight to quaternion, I will first be explaining complex numbers. This is because quaternions are very similar to complex numbers, so I think it is easier to understand quaternions when you also understand complex numbers. 

Introduction to complex numbers

One of the things you might remember from solving quadratic equations is that you can’t square root a negative number. However, this is only true if we want the result to be a real number. Let’s assume for now that we can. Let’s start with x which is a positive number. We now take the root of negative x,

As you may recall,

Hence,

The square root of -1 is commonly represented as i. So we can simplify to

Now we can go back to the example of solving quadratics. If we want to solve the following equation

So, by allowing the square root of -1, we were able to find solutions to the equation.

To get a complex number, we add a real and imaginary number together. So, any complex number can be represented in the form a + bi, where a and b are both real numbers. As you will see later on, there are other ways of representing this number that will be useful to us.

Adding and subtracting complex numbers

When adding or subtracting complex numbers, we work separately on the real and imaginary parts of the number. So, if we have two complex numbers a + bi and c + di, then the sum is (a + c) + (b + d)i. Additionally, when subtracting the two numbers, the result is (a - c) + (b - d)i.

Multiplying complex numbers

Multiplying complex numbers just requires us to expand brackets. So, if we have a + bi and c + di, then the product is equal to

As i is the square root of -1, i^2 = -1. So the result is

Argand diagrams

To represent complex numbers graphically, we use an argand diagram which has the real part as the x-axis and imaginary part as the y-axis. So, if we wanted to plot the solutions from above and -2 -3i, the resulting argand diagram would look like this

Complex conjugate

If we have a complex number in the form z = a + bi, then the complex conjugate is defined as z^* = a - bi. We can use the conjugate to find the inverse of a complex number.

Firstly, we know that

As, the conjugate of z = a - bi,

Hence,

To test this, we will let z = 5 + 10i

Rotational properties of complex numbers

If we start with 1, and we repeatedly multiply by i, the following pattern occurs: 1, i, -1, -i, 1. If we plot this on an argand diagram, it becomes clear that multiplying by i represents a 90° rotation anticlockwise

However, rotating a number by just 90° isn’t all that useful to us. It would be better if we could generalise this for rotating by any angle about the origin. This is where alternate ways of representing a complex number come in.

Instead of writing a complex number as a + bi, we can write it as r(cosθ + isinθ). To prove this, consider the complex number a + bi. Using an argand diagram, we can draw a line from the origin to this point. We can then extend this to a triangle by drawing a line from the point to either axis. The horizontal distance from the origin to the point will always be the absolute value of a, and the vertical distance will be the absolute value of b. So, we get the resulting triangle

From Pythagoras’s theorem, we know that

Additionally, we know that for any right angled triangle,

Subbing in the terms from our triangle,

We can now rearrange both terms to get a = rcosθ and b = rsinθ. Hence, a + bi = r(cosθ + isinθ).

If we let r = 1 and multiply the resulting number by another complex number, we should get a rotation of angle θ. So, going back to the example of a 90° rotation, if θ = 90, then cosθ + isinθ = 0 + i = i. This agrees with what we saw earlier, multiplying by i represents a rotation of 90°. 

To prove that multiplying a complex number by cosθ + isinθ causes a rotation of angle θ, we can compare the result to that of the rotation matrix. We can represent a + bi as a vector with x component a and y component b. The result of multiplying by the rotation matrix is as follows

Additionally, if we multiply a + bi by cosθ + isinθ, we get acosθ - bsinθ + (asinθ + bcosθ)i, which is the expected result. 

Introduction to quaternions

As we just saw, complex numbers could be represented on a 2D plane and could be used to rotate points in 2D space. So, for 3D we should be able to use a 3-component number, right? Sadly, this is not the case. Instead, we have to use a 4 component number; a quaternion.

Quaternions have one real component and three imaginary components i, j and k. These are all defined such that

There are several ways of writing a quaternion. The first is similar to what we did with complex numbers earlier: q = s + xi + yj + zk. The second is to write it as a sum of a scalar and a vector: q = s + (x, y, z) or q = s + v.

Adding and subtracting quaternions

Now that you have been introduced to quaternions, the first thing to learn is how to add and subtract quaternions. Consider quaternions q1 and q2, where

To get the sum and difference of q1 and q2, you add or subtract the individual components. Hence

Multiplying quaternions

As stated earlier, we can write quaternions as a sum of the components. To show how multiplication works, it is easier to write them in that form. The product of q1 and q2 can then be written as such

We can expand the brackets and use the previously defined rules to get

Finally, we can rewrite this as a sum of a vector and scalar, so

This can be rewritten using the vector dot and cross product. Explanations of these concepts are outside the scope of this article, so if you have not previously come across them, I would recommend you read this and this. 

Conjugate and inverse of a quaternion

Recall that for a complex number a + bi, the conjugate is a - bi. The same method is used to find the conjugate of a quaternion,

The method for finding the inverse of a quaternion is similar to finding the inverse of a complex number. Consider q = s + v

As with complex numbers, a quaternion multiplied by its conjugate equals the magnitude squared, so

Matrix representation

We can represent the product of two quaternions as a matrix-vector product. To do this, we can work backwards from the result. If we make q1 the matrix and q2 the vector, then the following matrix-vector product represents q1q2

To confirm that this is correct, let q1 = 5 + (2, 4, 8) and q2 = 8 + (3, 6, 2). Using the previously defined method,

Now, using the matrix method we get the following,

This matches the above result.

We can also swap which of the quaternions is the matrix and which is the vector. If we made q2 the matrix, then the following matrix-vector product would represent q1q2

Pure quaternions and unit quaternions

Pure quaternions are simply quaternions for which the scalar component = 0, that is that q = 0 + (x, y, z)

A unit quaternion is a pure quaternion with a vector component that has a magnitude of 1, that is that

Unit normalised quaternions

Unit normalised quaternions are similar to unit quaternions, except instead of the vector having a magnitude of 1, the entire quaternion has a magnitude of 1. To convert a quaternion to a unit normalised quaternion,

As we will be working with rotations, we can write a unit normalised quaternion in the form q = cos(θ/2) + sin(θ/2)v̂. The reason for using θ/2 will become clear soon.  

Rotation via quaternions

Consider a pure quaternion, p, which contains the point in 3D space that we want to rotate and a unit norm quaternion q. Let q = cosθ + sinθ*v̂ and p = 0 + p. v̂ is the vector that we will rotate about. 

If v̂ is perpendicular to p,

However, if v̂ is not perpendicular to p, then

In this case, we are not left with a pure quaternion. As we want our end result to be another point in 3D space, we need the end result to be a pure quaternion.

To resolve this, we can multiply our result by inverse q. This may seem counter intuitive, so let’s run through an example.

We will rotate the point (2, 0, 1) 45° about the z-axis. So, p = (2, 0, 1), v̂ = (0, 0, 1) and q = cos45 + sin45 * v̂

As stated above, our result is not a pure quaternion. So, let’s try multiplying it by inverse q. q is in terms of cosθ and sinθ, the magnitude of v̂ = 1 and cos^2(θ) + sin^2(θ) = 1, so the magnitude of q = 1. Hence,

Notice that we now have a pure quaternion, however our point has been rotated by 90° instead of 45°. So, to rotate our point by angle θ, q = cos(θ/2) + sin(θ/2)*v̂

Quaternion rotation via matrices

At this point, we know how to rotate a point using quaternions and we know how to represent quaternion multiplication as a matrix. The final hurdle is combining these two. Recall that the rotated point = qpq^-1. Firstly, let q = s + (x,y,z) and p = 0 + (a,b,c) , where q is a unit normalised quaternion. When rotating p, we first multiplied it by q and then q^-1. So, let’s get the matrix representations of qp and pq^-1.

 For pq^-1, we want p to be the vector part. Recall from above that we can represent quaternion multiplication as two different matrix-vector products. If we use the second form, then we will have p as the vector for both matrices. Remember that the magnitude of q is 1, so q^-1 = conjugate of q. So,

From this we have matrices for both q and q^-1. As the order we apply them is q then q^-1, we need to find (q^-1)qp to get the final rotated point.

We know that the magnitude of q = 1. So, we can begin to simplify the diagonal terms of the matrix. 

This same pattern occurs on the bottom two corner terms. Hence, 

The first row and column have no effect on the result, so we can ignore them. Leaving us with the final result of

We can verify this with an example. We will rotate (2, 5, -10) 90° about the x-axis. So, p = (2, 5, -10), v̂ = (1, 0, 0) and q = cos45 + sin45 * v̂. Our final result should be (2, 10, 5). Subbing the values for q into the matrix, we get

Which is the expected result.

Further reading

If you want to do more reading around quaternions, I would highly recommend John Vince's 'Quaternions for Computer Graphics'. I used it as my main source when researching this article, and found that it explained quaternions in a clear manner, while also providing some history around them.