Home▸Geometry▸2D Quaternion Rotation

🧭 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.

Geometry2DAdvanced60 FPS📱 Mobile-adapted⇄ 3D version
2d-quaternions ↗ Open standalone

🧭 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.

⚙ Under the hood

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.

QuaternionGimbal LockSLERPEuler AnglesOrthographic ProjectionHamilton Product

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)