The 3-sphere as linked circles, projected into nested tori of pastel rings.
The 3-sphere in four dimensions is a union of great circles, one over every point of an ordinary 2-sphere, and any two of them are linked exactly once. Each dot on the little base sphere picks a circle (its fiber), which is stereographically projected from S3 into space as an exact round ring: circles of latitude lift to nested tori, the equator to the Clifford torus ruled by Villarceau circles. Tube thickness follows the projection's conformal scale, faint bands slide along every fiber to show the circle action, and thousands of shaded quads are depth sorted and painted back to front.
Try it. Draw on the base sphere in the corner to add fibers, and hover its dots to pick out their rings. Drag to orbit, click or press Space for the next pattern (1 to 5 choose one), C clears, F pauses the flow.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an interactive Hopf fibration viewer 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. Use a dark navy background.
- For a point (a, b, c) on the unit sphere, its Hopf fiber is the circle q(t) = ((1 + c) cos t, a sin t - b cos t, a cos t + b sin t, (1 + c) sin t) / sqrt(2 (1 + c)) on the 3-sphere in 4D. Sample it at about 100 values of t.
- Stereographically project each 4D point to 3D with (q1, q2, q3) / (1 - q0), rotate the 3D points with a slowly turning camera, and draw each fiber as a closed polyline in perspective.
- Pick 12 points around the equator of the base sphere and draw their fibers. You should see a ring of interlocking circles on a torus. Then add two more circles of latitude to get nested tori.
- Color each fiber by its base point, with the hue from its longitude, in soft pastels.
Once that works, make it beautiful:
- Turn each fiber into a tube: build a ring of 8 vertices around every sample point, make quads between neighbouring rings, skip quads that face away from the camera, shade each one with a Lambert term plus a small specular highlight, sort every quad of every tube by depth and fill them back to front.
- Make the tube thicker where (1 + |P|^2) / 2 is larger, so it looks like an evenly thick tube in 4D.
- Draw a small base sphere in a corner and let the user click or drag on it to add fibers.
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 animating a 4D rotation before projecting, sliding colored bands along each fiber to show the circle action, or checking numerically that every pair of fibers has linking number one.
