A spinning T-handle in zero g flips end over end, again and again.
This is the Dzhanibekov effect, or tennis racket theorem: a rigid body with three different moments of inertia spins steadily about its largest and smallest axes, but about the middle one any tiny wobble grows until the body flips over, settles, and flips back. Euler's equations are integrated with a symplectic splitting in which every step is an exact rotation of the angular momentum about one principal axis at a time, so its length is conserved to rounding error and the energy stays bounded, which keeps the flips clean and periodic forever. The sphere on the right is the angular momentum seen from the body. It must stay on that sphere and on an energy ellipsoid at once, so it runs along their intersection: loops around the stable axes, and an X through the unstable one.
Try it. Drag on the sphere to throw the handle with a different spin axis. Drag the space view, or use the arrow keys, to orbit the camera. Click the view, then press 1, 2 or 3 to spin about each principal axis, S for slow motion, or R for the next scene.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a simulation of the tennis racket theorem (the Dzhanibekov effect) with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Paint it near-black.
- Model a rigid body with principal moments of inertia 1, 2 and 3. Keep its angular momentum L in the body frame and its orientation as a quaternion.
- Integrate Euler's equations with a splitting method: the energy is a sum of three terms L_i^2 / (2 I_i), and each term alone is an exact rotation of L about one axis (and of the body the other way). Do half a step of axis 1, half of axis 2, a full step of axis 3, then half of 2 and half of 1. Explain why this keeps |L| exact.
- Draw a simple 3D T-handle (a few boxes) by rotating its corners with the quaternion and projecting them in perspective, sorting faces back to front.
- Start it spinning almost exactly about the middle axis and watch it flip every few seconds. Show |L| and the energy so I can see they hold steady.
Once that works, make it beautiful:
- Shade the faces with a light direction and a specular glint, and leave fading trails behind the tips.
- Beside the body, draw a sphere showing L in the body frame, with the curves where it meets energy ellipsoids, and a moving dot for the current state. The X through the middle axis is the separatrix.
- Let me click the sphere to choose a new spin axis and drag the 3D view to orbit it.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as comparing against a Runge-Kutta integrator to watch its energy drift, a real wing nut mesh, or measuring how the flip period depends on the starting wobble.
