Design a site like this with
Get started

Quaternions: a geometrical interpretation.


Quaternions have been always a tough subject to understand for those without a deep mathematical background. They’re built on top of imaginary numbers, and let’s be honest, imaginary numbers aren’t the easiest things to understand. So to make my life a little bit easier, I always try to get a geometrical interpretation of those hard mathematical concepts that often slip my mind. So this is my attempt at doing exactly that, get a geometrical interpretation of what a quaternion does when it is used to rotate a point in 3D space.


So, first of all, what’s a quaternion? I’m not going to explain anything fancy about them, just the basic concepts we will need for our geometrical journey. A quaternion is composed of four elements q = ⟨qx, qy, qz, qw. Here we can identify two parts, the vector or imaginary part, let’s call it qv = ⟨qx, qy, qz, and the scalar or real part qw. When we’re using quaternions to rotate things, they should be normalized quaternions, and in that case, we have the following data encoded in them:

  • qv = ⟨qx, qy, qz⟩ = v̂ · sin(α/2) (a)
  • qw = cos(α/2) (b)

where  is the normalized axis vector we’re going to rotate around, and α is the angle of the rotation itself. Here we have an important point: a quaternion “represents” an axis and an angle of rotation, so we want to visualize how exactly those elements are applied to rotate a vector in terms of geometry (vectors, points, angles, etc).

Rotation expressed by a quaternion

The Problem

Imagine that you have your point p, and you want to rotate it around an axis vector  an angle of α degrees. Then you can transform that point using quaternions in at least three ways:

  1. The canonical method says that you should use something called Hamilton multiplication q·p·q′. That implies the use of the conjugate and applying two times the multiplication. We can forget about it because it’s not going to help us in our path to a geometrical interpretation.
  2. You can use a matrix that represents the rotation encoded by a quaternion. As before, nothing helpful for our purpose.
  3. In video game programming, we usually use a simplified form that let us transform a vector by the axis/angle rotation encoded in a quaternion, the Fabien Giesen simplification (thank you Mr. Giesen for your fantastic work). This expression was developed to get a more performant operation because it involves fewer adds/multiplications than the Hamilton canonical product. And this form is going to be our door to achieving our goal of understanding the quaternion in geometrical terms. Here is this beauty:

q·p = p + 2 * (qv x (qv x p)) + 2* qw * (qv x p) (c)

It’s still not clear what is going on here, but we can start to see geometrical elements that are going to be the key to our interpretation. We can say a couple of things by looking at the components of the expression: we have the sum of our point and two perpendicular vectors. We know that they are vectors because they are the result of two or more cross-product multiplied by some scalars (2 and qw, which if you remember is cos(α/2) from (b) ). And it’s clear that they are perpendicular if you take:

t = (qv x p) (d)

applying to (c):

q·p = p + 2 * (qv x t) + 2 * qw * t (e)

so we have two vectors:

2 * qw * t (f)

2 * (qv x t) (g)

Forgetting about the scalar parts ( 2 * qw in (f) and 2 in (g)), we can see that in (g) we have a cross product of qv and t, and the result of a cross product is always a vector perpendicular to both initial vectors. So (g) is some vector perpendicular to (f). A point and two perpendicular vectors, is that good? Yes, that’s exactly what we’re looking for. Let’s think about what a 3d rotation should look like.

Axis/angle rotation in 3D

When we want to rotate a point p around a   axis and an angle α we get:

b = v x p (h)

a = b x v (i)

when p rotates around  , we can visualize a circumference with its center in s (the projection of p on v). This circumference lies on a plane with normal v. And we can think on two perpendicular axes and b, which creates the basis for a 2D space on the plane previously mentioned. This is a derivation of the Rodrigues rotation formula. We can calculate b =  x p and a = b x v̂.  Again, two perpendicular vectors. Does any of this ring a bell? We’re getting close. So we can reduce our 3D rotation to a simple well-known 2D rotation like this:

Where p’ is simply a * cos(α) + b * sin(α). When we give α the values in the range [0..2π] we get this:

This is nice but it would be nicer if we could express the rotation in terms of our initial point p, using that point as the origin of this reference system instead of the center of the circumference s. That can be done easily with this transformation: p’ = p + (1 – cos(α)) (-a) + b * sin(α). Now we use the vector a with the opposite direction ( now is calculated as b x v̂ instead of x b  ) and (1 – cos(α)) that instead of going from 1 to -1 when α goes from 0 to π, goes from 0 to 2. And that’s exactly what we need to get the same circumference but expressed from the point of reference p.

With this new idea, we can express our initial 3d rotation like:

p’ = p + (1 – cos(α)) (v̂ x (v̂ x p)) + sin(α)(v̂ x p) (j)

Wow, this looks super familiar, doesn’t it? We have the Giesen form of the vector/quaternion transformation and an expression that comes directly from the geometrical interpretation. If we can prove that both are the same, we will reach our goal. Let’s do it:

p + 2 * (qv x (qv x p)) + 2 * qw * (qv x p) =

p + (1 – cos(α)) (v x (v x p)) + sin(α)(v x p)

is this equality true?

Let’s analyze each of the components of the sum:

  • p = p
  • 2 * (qv x (qv x p)) = (1 – cos(α)) (v x (v x p))
  • 2 * qw * (qv x p) = sin(α)(v x p)

The first one is easy, so let’s go with the second one:

2 * (qv x (qv x p))

we can use qv = sin(α/2) * v̂ and we get:

2 * (sin(α/2) * v̂) x ((sin(α/2) * v̂) x p)

now we can group sin(α/2):

2 * sin(α/2) 2 * (v̂ x (v̂ x p))

and finally using 2 * sin(α/2) 2 = 1 – cos(α), we reach our goal:

(1 – cos(α)) (v̂ x (v̂ x p))

Only one more left, let’s dig into the third one:

2 * qw * (qv x p)

we can expand qw using qw = cos( α/2):

2 * cos( α/2) * (qv x p)

again, using qv = sin( α/2) * v̂:

2 * cos( α/2) * sin(α/2) *(v̂ x p) =

and finally, we can apply the double-angle identity 2 * cos( α/2) * sin(α/2) = sin(α), which gives us our goal:

sin(α) *(v̂ x p)

So indeed we have proven that p + 2 * (qv x (qv x p)) + 2 * qw * (qv x p) = p + (1 – cos(α)) (v x (v x p)) + sin(α)(v x p), and then from now on, we can understand how the components of the Giesen form of the vector/quaternion transformation correspond to the initial point p, and two perpendicular axes multiplied by the corresponding magnitudes (1-cos(α) and sin(α)) to perform exactly the axis/angle rotation that we theorically know that it performs.

q.p = p + 2 * (qv x (qv x p)) + 2 * qw * (qv x p)

That’s the end of our journey, and I hope that all of this makes sense to you and helps you a little bit in order to better understand our previously feared and now beloved quaternions. Remembering the above diagram will give you the power from now on to understand what exactly a quaternion is doing in a geometrical/visual way.

Thanks to: Jose Moreno and Juan José Lledó for their suggestions to  improve this post.


One response to “Quaternions: a geometrical interpretation.”

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: