🧭 2D Quaternion Rotation
A from-scratch 2D quaternion visualizer: real Hamilton-product quaternion rotation of orthographically-projected 3D points, a genuine Euler-angle gimbal-lock proof, and real SLERP interpolation, all on a plain 2D canvas.
🧭 What It Demonstrates
This is a genuine 2D companion to the 3D quaternion simulation: every rotation on screen comes
from real quaternion algebra — q = w + xi + yj + zk, real Hamilton-product
multiplication, real conjugate/inverse, and real vector rotation via
q·v·q⁻¹ — applied to actual 3D points that are then flattened with a fixed
oblique orthographic projection for 2D display. The left cube instead uses a
classic yaw-pitch-roll Euler sequence built from three literal rotation matrices, and the panel
below it runs a live numerical proof of gimbal lock: at pitch = 90°, two
different (yaw, roll) pairs are shown to produce the exact same rotation matrix, so one
rotational degree of freedom is provably gone. The same Δ-test applied to the quaternion's
axis-angle parameters produces a non-zero difference at every angle, including 90°, because
axis-angle/quaternion parameterisation has no equivalent singularity. A separate SLERP mode
interpolates smoothly between two independently-chosen quaternions along the shortest arc on
the 4D unit hypersphere.
How to Use
- Drag Yaw / Pitch / Roll to rotate the Euler cube; tick Force gimbal lock to pin pitch at 90°.
- Reveal the Test Δ slider and watch the matrix-difference readout drop to (numerically) zero — two genuinely different axis combinations producing an identical rotation.
- Switch the quaternion panel to Axis · Angle and run the same Δ-test on θ/φ: the difference stays non-zero even with the angle forced to 90°.
- Switch to SLERP to set two quaternions qA and qB and either scrub t by hand or let it animate — the quaternion cube eases along the shortest 4D arc with constant angular velocity.
Did You Know?
For the Euler sequence used here (yaw about Z, then pitch about Y, then roll about X), the
combined rotation matrix at pitch = 90° reduces algebraically to a function of yaw − roll
alone — the two angles become mathematically interchangeable, which is exactly what the live
difference readout confirms at zero. Quaternions built directly from an axis and an angle never
pass through an equivalent step, which is why every modern 3D engine stores orientation as a
quaternion internally even though artists and animators still author it with Euler-style
controls.
A genuine 2D quaternion visualizer: real Hamilton-product quaternion multiplication, conjugate/inverse and vector rotation via q·v·q⁻¹ applied to 3D points orthographically projected to 2D, side by side with a numerically-verified Euler-angle gimbal-lock proof and real SLERP interpolation between two quaternions.
2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install