About this simulation
A (p,q) torus knot is a closed curve that wraps around the surface of an invisible torus: p times around the central axis (longitudinally) and q times through the hole (meridionally). When gcd(p,q) = 1 the result is a genuine, single-component knot; when gcd(p,q) > 1 the curve splits into that many separate loops, forming a torus link. The default (2,3) configuration is the famous trefoil knot — the simplest non-trivial knot in existence. Every frame the GLSL shader re-lights the surface using Fresnel reflectance, a cosine-palette colour cycle, and a subtle ambient-occlusion ring term so the tube's curvature reads clearly against the dark background.
🔬 What it shows
The 3D curve of a (p,q) torus knot rendered as a tube with real-time GLSL shading. The Stats panel displays the current p and q values and whether the curve is a true knot (gcd = 1) or a multi-component link. Changing p or q instantly rebuilds the geometry via Three.js TorusKnotGeometry.
🎮 How to use
Drag the p slider (1–7) to set longitudinal winds and the q slider (1–9) for meridional winds. Adjust Tube thickness for a fat or slender rope. Pick a Colour mode — Iridescent shifts hue with viewing angle, Rainbow cycles along the tube length, and Metallic gives a warm gold/silver sheen. Hit Random knot to jump to a curated preset, or drag the canvas to orbit freely.
💡 Did you know?
Torus knots appear in biology (the shape of certain DNA supercoils), physics (vortex tubes in fluid dynamics), and art. The (2,3) trefoil is chiral — its mirror image cannot be continuously deformed back into itself without cutting. The (2,5) knot is the cinquefoil, and (3,5) gives the torus knot used in Celtic knotwork. Any torus knot can be parametrised with just two coprime integers.
Frequently asked questions
What is the difference between a torus knot and a torus link?
When the two winding numbers p and q are coprime (gcd(p,q) = 1) the curve is a single closed loop — a genuine knot. When they share a common factor d = gcd(p,q) > 1 the curve breaks into d separate interlocked loops, which together form a torus link. For example, (2,4) gives a 2-component link because gcd(2,4) = 2, while (2,3) is a knot because gcd(2,3) = 1. The Stats panel shows the current type live.
Why does the shape change so dramatically when I move only one slider?
The topology and geometry depend on both p and q together. Adding one extra longitudinal wind (incrementing p) can turn a trefoil into a completely different knot class, change crossing number, or shift the curve from a knot to a link. Even small changes to either parameter alter how many times the tube crosses itself and how it weaves through the torus surface — the shape is extremely sensitive to the ratio p : q.
What does each colour mode actually do in the shader?
All three modes use a cosine-palette formula: colour = a + b·cos(2π·(c·t + d)). Iridescent drives t with tube-length position plus Fresnel (viewing angle) plus time, so the hues shift as you orbit the camera. Rainbow ignores the view angle and simply cycles full-spectrum hues along the tube length over time. Metallic uses warm gold/silver palette coefficients and a slower time rate, giving a polished metal appearance.
What is Fresnel shading and why does it make the knot look iridescent?
Fresnel reflectance describes how surfaces reflect more light at grazing angles than head-on. The shader approximates this with Schlick's formula: fresnel = (1 − N·V)^3.5, where N is the surface normal and V is the view direction. At grazing angles (edges of the tube) the Fresnel term is near 1, boosting both the base colour and the rim highlight. In Iridescent mode the palette phase also depends on N·V, so different parts of the tube surface shift to different hues depending on your viewpoint — that angle-dependent colour shift is iridescence.
Can I reproduce any specific classic knot with these sliders?
Yes. The trefoil is p=2, q=3 (the default). The cinquefoil (5-crossing knot) is p=2, q=5. The (3,4) torus knot (8 crossings) is p=3, q=4. The (3,5) torus knot (10 crossings) is p=3, q=5. The (2,7) torus knot (7-crossing twist knot) is p=2, q=7. All of these are available from the Random knot preset list, or you can dial them in manually.