Prime knots up to seven crossings, relaxed as tubes, with live Alexander polynomials.
Each knot from the trefoil to 7_7 starts as the closure of its braid word and relaxes under a repulsive knot energy: far-apart points push each other away like a discrete Moebius energy, edge lengths are held by position-based constraints, and a hard minimum distance between strands (the tube's thickness) means the curve can never pass through itself, so the knot type cannot change. The invariant is computed from what you see: the curve is projected, every crossing is found by segment intersection, the diagram is cut into arcs at the undercrossings, and the Alexander matrix is evaluated at roots of unity with complex elimination, then an inverse DFT turns the values back into integer coefficients. Turn or tangle the knot and the diagram changes completely, but the polynomial always matches the table.
Try it. Pull a strand to tangle the knot and let go to watch it relax. Drag the background to turn it, pick a knot from the table (or use the left and right arrows), press T to shake it up and R to rebuild it from its braid.
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 knot relaxation toy 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 warm off-white background.
- Represent a knot as a closed loop of about 120 points in 3D. Start with a trefoil from the formula x = sin t + 2 sin 2t, y = cos t - 2 cos 2t, z = -sin 3t.
- Relax it each frame: every pair of points that are far apart along the loop pushes apart with a force proportional to 1 / distance squared, neighbours are pulled back to a fixed spacing, and a small smoothing term averages each point with its neighbours. Never let two distant points get closer than a minimum distance, so the strand cannot pass through itself.
- Rotate the loop slowly and draw it as a thick dark polyline in perspective.
- Let the user drag a point to pull the strand, and let go to watch it relax.
Once that works, make it beautiful:
- Draw the loop as a shaded tube: rings of vertices around each point, quads between rings, backface culling, Lambert plus specular shading, and a depth sort so near quads are painted last.
- Add a soft blurred shadow under the knot and a two-tone color gradient along the strand.
- Add buttons for a few more knots, such as the figure-eight and the (2, 5) torus knot.
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 detecting the crossings of the 2D projection, computing the Alexander polynomial from those crossings, or building knots from braid words.
