Topology explorer

Six interactive demos covering perception, Möbius strips, paradoxes, Klein bottles, dimensional slicing, and prime number constellations. Drag, click, and play. Zero WebGL — pure Canvas 2D and SVG.

01 — perception

Hexagon to cube

Same lines, different reading. Click through to watch your brain flip from 2D to 3D.

A hexagon. Six sides, flat.

Under the hood: All three states draw the same 6 vertices via cos() and sin(). The "cube" fills three polygons with different purple shades — your brain does the rest.
02 — Möbius strip

One side, one boundary

Drag to rotate. The orange dot is the ant — it takes two full laps to return, proving one-sidedness. Select a cut to watch the ant slice along it and reveal the surprising topology.

Zoom Speed
Lines: Axis:

Drag to rotate. The ant's two-lap path proves one-sidedness.

Under the hood: No WebGL — pure Canvas 2D wireframe. Every point comes from x = (R + v·cos(u/2))·cos(u), projected with a perspective divide. The half-twist hides in cos(u/2). The line-coloring reveals topology: watch how colored bands twist and connect (or don't) across the half-twist. In spirograph mode, the ant oscillates across the strip's width while traveling around it — the trail reveals how the surface wraps.
03 — paradox

The grandfather paradox

Click a year to see how each event and its opposite sit on locally-opposite sides of the Möbius strip — which is actually one continuous side.

Walking the strip cycles through every event AND its opposite. Cause and effect close into one self-consistent loop.

Under the hood: Pure SVG — no library. Sometimes the right "interactive" is just well-placed labels and opacity toggling.
04 — Klein bottle

No inside, no outside

A closed surface with no boundary — yet no inside or outside. It can only truly exist in 4D; this is its 3D shadow. Drag to rotate.

Zoom Speed
Lines: Axis:

The self-intersection is an artifact of forcing 4D into 3D — like the cube's edges crossing on a flat screen.

Under the hood: Same wireframe engine as the Möbius strip. The formula uses sin(v) and sin(2v) cross-terms to create the neck. The line-coloring reveals how u-bands flow through the neck and back — proving the surface truly has no boundary. Zero WebGL — just math and lineTo().
05 — dimensions

Squirrel's view

How would a 2D creature perceive a 3D object? By slicing. Drag the slider to pass a shape through Squirrel's flat plane.

Slice

Drag the slider to pass the shape through Squirrel's plane.

Under the hood: The sphere cross-section is Pythagoras: r = √(R² − d²). The tetrahedron shrinks linearly. Vanilla JS + SVG.
06 — primes

Do primes have a pattern?

Map every prime p into 3D using itself as the angle: x = p·sin(p)·cos(p), y = p·sin²(p), z = p·cos(p). Start with the first hundred and keep going — butterfly wings unfold into a helix. Drag to rotate.

Zoom Speed Size Trail
Axis:

100 primes. The first sparks of the butterfly — two lobes forming as sin and cos compete.

Under the hood: Each prime p becomes its own angle in radians. The parametric mapping (p·sin·cos, p·sin², p·cos) stretches prime gaps into 3D structure. The Opposide mirror is NOT negative primes. Plugging −p into the formula gives x = (−p)(−sin p)(cos p) = +p·sin·cos — same x! "Negative primes" would only flip y and z. The mirror flips all three axes — a spatial reflection of the output, not the input. The primes stay positive. The Möbius connection: sin(p)·cos(p) = sin(2p)/2 creates a double-frequency crossover (the figure-eight). When mirrored through the origin and connected, the crossover acts as a half-twist — the same topology as a Möbius strip.
07 — π

The digit-circle mandala

Place digits 0–9 evenly around a circle. For each consecutive pair of digits in π (3→1→4→1→5→9…), draw a chord. With enough digits, the chaos resolves into a colored mandala. Drag to spin, scroll to zoom, and filter by which starting digit a chord came from.

Style: Show:
Only digit:
Zoom Speed

100 digits. The first chords — still random-looking.

Under the hood: 10 points fixed on a circle, one per digit. The first 10 000 digits of π are precomputed via Machin's formula (π = 16·arctan(1/5) − 4·arctan(1/239)) and embedded in the page. Each chord is colored by its position in the sequence (blue → red), and alpha is scaled by 1/√N so density grows smoothly instead of saturating to white. Bowed vs. straight: straight chords reveal the raw 45-position structure — every line lands on one of C(10,2) = 45 possible chord positions. Bowing each chord by an amount that depends on its index spreads the overlapping lines into a colored fan, which is why the mandala has visible petals. Why a mandala? If π's digits were truly uniform, every chord position would be hit equally often and the result would be a uniform glow. The structure you see is a fingerprint of how often each specific transition (say 3→7) actually occurs in the first N digits.

Is it π, τ, or √2?

Same algorithm, three different irrational numbers. Run the chord-walk on their digits and the mandalas all end up oddly similar — that's the point. Borrowed from OpenSourcES. Guess which is which, then reveal.

A
B
C
Digits:
What is τ (tau)? τ = 2π ≈ 6.2832. Michael Hartl's Tau Manifesto argues that one full turn — not half a turn — is the more natural unit, so the "circle constant" should be τ, the ratio of a circle's circumference to its radius, not its diameter. With τ, a quarter turn is τ/4 instead of π/2, "e to the i τ" equals 1, and sin/cos have period τ. The cost is rewriting two centuries of textbooks. Why does this matter for the mandalas? τ's digits are just 2 × π's digits (with carries), and √2's digits are independent again — yet all three are conjectured to be normal (every finite digit string appears with the expected frequency), and after a few thousand chords the mandalas all converge to nearly the same pattern. The visualization is a Rorschach test for digit statistics: structure visible at small N, uniformity at large N.
08 — φ

The most irrational number

φ = (1 + √5)/2 ≈ 1.6180. It shows up in sunflowers, pine cones, and continued fractions because it's the irrational number that's hardest to approximate with simple fractions — every rational approximation is provably bad. Four views of why.

Seeds Angle drift +0.00°

Phyllotaxis: 1500 seeds at the exact golden angle. Drift off zero and the spiral collapses into arms.

Why is φ "the most irrational"? Every irrational has a continued-fraction representation [a₀; a₁, a₂, …]. The convergence speed depends on those aᵢ: large terms produce excellent rational approximations (which is why π's continued fraction [3; 7, 15, 1, 292, …] gives 22/7 and 355/113 as famously good approximations). φ has the smallest possible terms: [1; 1, 1, 1, …]. That makes every Fibonacci-ratio truncation the best possible rational approximation, but each one is barely better than the last. Why sunflowers? A plant placing each new seed at angle θ around a growing stalk wants no two seeds to align radially (sun, water, room to grow). Any rational θ aligns seeds into arms; only an irrational θ avoids this — and the more irrational, the better the packing. φ is the optimum. The four demos: the sunflower is φ as packing optimum; the continued fraction is φ as worst-rational-approximation; the golden-angle walk is φ as never-repeating on the circle; the Fibonacci squares are φ as limit ratio of consecutive Fibonacci numbers.
09 — perception

What your brain fills in

Three demos of perception inventing motion or color from discrete flashes. The first two share a Greek letter with the golden ratio but have nothing to do with it — Wertheimer just needed a label. The third is real physics, included because it's what people mean when they hear "red coming, blue going."

ISI 60 ms Separation

Plain phi: with the right ISI, you see motion between two stationary flashes.

Phi vs. beta motion. Wertheimer (1912) distinguished β-motion (an object visibly translating between positions, at moderate ISI) from pure φ-motion (a featureless "movement" without a moving object, at shorter ISI). The two get conflated in casual writing — what you see in this demo at 60–120 ms ISI is closer to β. Color phi (Kolers & von Grünau, 1976). Two dots of different colors alternate. With the right timing, viewers report seeing one dot translate AND change color partway across, before the second dot is shown. Daniel Dennett used this in Consciousness Explained to argue against any single "Cartesian theater" timeline in the brain — the color-change report is constructed after both flashes have been processed. Doppler. Distinct phenomenon, same Greek letter coincidence isn't here. A moving source emits wavefronts at fixed intervals; the side it moves toward sees them piled up (higher frequency, blue end of spectrum for light); the side it moves away from sees them stretched out (red end). At source speed = 1 the wavefronts pile up into a single shock front; above 1 you get a sonic-boom cone.
10 — impossible math

The 1982 SAT coin paradox

"A small coin rolls without slipping around the outside of a coin of the same size. How many full rotations does it make in one trip around?" The 1982 SAT listed 1, 3/2, 2, 3, and 4. The intended answer was 1 — same circumference, one lap. Three students wrote in noting the real answer is 2, and the College Board threw the question out. Why 2, not 1? Watch.

Small coin size (r/R) 1.00× Speed

After one full lap, the small coin has rotated (R+r)/r times — not 1.

Why does 2 win over 1? The intuition "same circumference → 1 rotation" is what happens when the small coin rolls along a straight line of length equal to the big coin's circumference. Rolling around the outside of a curve adds an extra full rotation, because the small coin's center isn't tracing a path of length 2πR — it's tracing a circle of radius (R+r), so a path of length 2π(R+r). The contact constraint gives 2π(R+r) = 2πr · N, hence N = (R+r)/r = 1 + R/r. For equal coins, N = 2; for r = R/2, N = 3; for r → 0, N → ∞. The POV trick. If you stand on the small coin and rotate with it, you see exactly one lap. The extra rotation only appears from the external (lab) frame, where you're also rotating with the lap itself. That's the same kind of frame-dependent extra rotation as the sidereal vs. solar day on Earth, or parallel transport on a curved surface. The 1982 fallout. The mistake propagated because the question's authors confused "rolling distance" with "rotation count." Three students out of ~300,000 caught it; the question was thrown out and credit refunded to all test-takers. The classic Martin Gardner column on coins and the cycloid is a great follow-up read.
11 — π ∩ primes

Every prime, folded into one number

Euler showed in 1737 that π²/6 = ∏ p²/(p² − 1) over all primes — a single irrational number is the limit of a product that touches every prime exactly once. This is the Basel problem in its prime form. Watch the partial product crawl toward π²/6 = 1.6449… as primes get folded in one at a time.

Speed Scrub
X axis:

Folding in primes one at a time. Each prime p contributes p²/(p²−1).

How this connects π to the primes. Euler started from the harmonic-style sum ζ(2) = Σ 1/n² (Jakob Bernoulli's "Basel problem", unsolved for 90 years until Euler closed it in 1734 with the answer π²/6). He then noticed every positive integer factors uniquely as a product of primes, which lets you rewrite 1/(1 − x) as a geometric series and reorganize: Σ 1/n² = ∏ 1/(1 − 1/p²) = ∏ p²/(p² − 1). The same trick gives ζ(s) = ∏ p^s/(p^s − 1) for any s > 1 — the "Euler product" — and that identity is the doorway to the entire analytic theory of primes. Why the convergence is so slow. Each prime cuts the error roughly by a factor of 1 − 1/p². For small primes that's a big jump (going from 1 to 4/3 to 3/2 in the first two steps); past ≈100, every prime contributes less than 0.01%. To match π²/6 to 8 decimal places you need primes well into the thousands, and to 16 places you need around 10⁸.

Buffon's needle, primes edition

Drop random needles on a striped floor; count the ones that cross a stripe. With needle length = stripe spacing, the crossing rate is 2/π, so π̂ = 2N/C. Two estimators run on the same drop sequence: one uses every needle, one uses only needles dropped at prime indices (the 1st, 2nd, 3rd, 5th, 7th, 11th, …).

Drops/frame

Press play. Each needle that crosses a stripe is a Buffon hit; counting hits over drops gives a Monte-Carlo estimate of π.

Buffon, 1733. A needle of length L dropped on a floor with parallel lines spaced d apart crosses a line with probability 2L/(πd) for L ≤ d. So π = 2L·N / (d·C), where N = total drops and C = crossings. This was the first geometric-probability formulation of π, predating Monte-Carlo simulation by two centuries. Why prime-indexed drops? If π's digits are a fair Bernoulli source for randomness, then any deterministic thinning of "which drops to count" should give the same expectation. So both estimators converge to π, but the prime-indexed one uses only ≈ N/ln(N) drops by the prime-counting theorem — its standard error is √(ln N) times the all-drops error. The point isn't that primes help; it's that picking a deterministic subset of supposedly-random samples still gives the right answer. Color key. Red = crossing needles (all-drop estimator); gold = crossings on a prime-indexed drop (used by the prime estimator). Gray and blue are misses.

The polar prime plot

Plot every prime p at polar coordinates (r = p, θ = p radians). The spiral arms that emerge aren't a property of the primes — they're a property of the rational approximations to π. Zoom out and the arm count changes at each convergent of π's continued fraction.

Zoom presets:

Drag to rotate. Scroll to zoom. Watch how the arm count changes at each scale.

Why arms? A point at radius p sits at angle p radians (mod 2π). Two integers p, p+k land at almost the same angle when k is close to a multiple of 2π — i.e., when k/m is a good rational approximation of 2π for some integer m. The convergents of 2π's continued fraction are 6, 44, 710, … (because 2π ≈ 6.2832, and its CF starts [6; 3, 1, 1, 7, 2, …]). So you see 6 arms near in, 44 once the radius reaches the next convergent's scale, and 710 after that. This isn't about primes. Plot every integer — same arms. Primes just produce a thinned-out version with the same skeleton. The reason the plot is famous is that for small radii the 6-arm pattern looks structured, like primes were trying to follow a rule, when really it's just π peeking through. Pedagogical history. The image circulated on Math StackExchange in 2017 with the title "Why do primes form spirals?" — the answer is "they don't; 2π does." 3Blue1Brown made the canonical explainer video the same year.

π's digits, thinned by primes

Two copies of section 07's chord mandala, both built from π's digits. The left one draws every consecutive-digit chord (k = 1, 2, 3, …, N). The right one only draws chords at prime indices (k = 2, 3, 5, 7, 11, …). If π's digits are normal, the two pictures should be statistically indistinguishable.

All k
k prime only
Chord indices considered:

Both mandalas use the same digits of π. The right one draws only chords at prime indices.

What we're testing. If π's digits are normal (every finite string appears with the expected uniform frequency in the long run), then any deterministic subsequence with positive density should also be uniform. The set of prime indices has density 1/ln(N), so the right mandala draws ~π(N)/N ≈ 1/ln(N) as many chords — meaning at N=2000 the right side has ~303 chords vs. 2000 on the left, so its overlap density is ~6.6× lower. After accounting for that, the two mandalas should look like the same texture at different exposure levels. What we're not testing. This isn't a real normality test. Visual indistinguishability of two chord-mandalas is a coarse check; rigorous normality of π is still open (the conjecture is widely believed but unproven). For a stronger test you'd compute the χ² statistic on chord-position histograms between the two — left as an exercise.

π's continued-fraction terms

π = [3; 7, 15, 1, 292, 1, 1, 1, 2, 1, 3, 1, 14, 2, 1, 1, …]. The Gauss–Kuzmin distribution predicts the frequency of each integer as a term in a "random" irrational's continued fraction — independent of which irrational, as long as you pick it from the Gauss measure. Does π's CF actually follow this distribution?

π's continued fraction starts [3; 7, 15, 1, 292, …]. The famous 292 is a Gauss–Kuzmin tail event, not a sign π is special.

Gauss–Kuzmin (1928). For "almost every" real number x (in the Gauss measure on [0,1]), the asymptotic frequency of integer k appearing as a CF term is P(a_n = k) = log₂(1 + 1/(k(k+2))). That gives P(1) ≈ 41.5%, P(2) ≈ 17.0%, P(3) ≈ 9.3%, … — most terms are small. The distribution has a heavy tail though: the probability of seeing some term ≥ k decays like 1/k, which is why "outliers" like 292 are entirely expected over a few hundred terms. The 292 isn't special. It's just the first term big enough to make a good rational approximation (355/113), which is why everyone learns about it. There are larger terms further on: a_{431} = 20776 in π's CF, which gives a freakishly accurate approximation. Computation. Done client-side with BigInt: p = ⌊π · 10⁹⁹⁹⌋, q = 10⁹⁹⁹, then iterate (p, q) := (q, p − ⌊p/q⌋·q) and record each ⌊p/q⌋. Precision-limited bailout gives ~400 reliable terms from 1000 digits.