Rotation Toy

Quaternions are really useful, but they're also really confusing! Rotation matrices are equally as useful but have four times as many terms! Thankfully in this day and age we have computers to do tedious calculations for us! Understanding how to do them by hand is not particularly useful, but learning how to use them is immensely so.

This is more or less just a toy to show the non-commutative nature of rotations, the hope being that you're at least aware of (one of the possible reasons) why your rotations are wonky! Play with the sliders, then click the animate viewer to view each rotation being applied in the specified order. Now try composing a rotation in your head and trying to figure out which ordering produces the result you were imagining.

For fun, try pointing your finger, bending your wrist, then twisting your wrist around the axis that finger describes. Reset your wrist, twist, then bend. Why are you pointing at yourself now?

The rotations in this example are all composed with quaternions because they're actually really straightforward to work with. For all practical purposes, combining rotation matrices is mechanically (that is, in code) basically identical. For example (in Unity C#) on a Yaw Pitch Roll ordered rotation you could combine it like this:

Quaternion yaw = Quaternion.AngleAxis(yawAngle, Vector3.up); // yaw is left-right on the horizon
Quaternion pitch = Quaternion.AngleAxis(pitchAngle, Vector3.right); // pitch is up-down
Quaternion roll = Quaternion.AngleAxis(rollAngle, Vector3.forward); // roll is, well... roll
Quaternion finalRotation = yaw * pitch * roll;

If you come away from this toy with anything it should be this: quaternions and rotation matrices are time consuming and difficult to do by hand, but easy to create with APIs.