A circle for every fraction, and a dive into why the golden ratio is the most irrational.
Every fraction p/q in lowest terms gets a circle of radius 1 / (2q^2) resting on the number line at p/q. Two circles touch exactly when their fractions are Farey neighbors, and the circle in the gap between them belongs to their mediant, so the Stern-Brocot tree enumerates them: the demo walks that tree for the visible window, pruning subtrees that are off screen or smaller than half a pixel, which keeps a few hundred circles on screen at any zoom down to a billionth of the unit interval, and draws giant circles as closed-form arcs. A vertical line at x passes through the circle of p/q exactly when |x - p/q| < 1 / (2q^2), and the continued fraction convergents of x (hatched in amber) are the circles it hits as you descend. The bars measure how far from each center the line passes: pi cuts almost through the middle of 355/113, while the golden ratio, whose continued fraction is all ones, only ever clips its circles near 2 / sqrt(5) of the radius, Hurwitz's limit.
Try it. Hover anywhere to drop the probe line there and read its continued fraction and Stern-Brocot path. Click to lock a number (or click inside a circle to pick its fraction) and dive toward it; Stop or Space ends the dive. Pick pi, e, the golden ratio or the square root of 2 with the buttons or keys 1 to 4, scroll or pinch to zoom, and drag or use the arrow keys to pan.
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 picture of Ford circles 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. Give it a blueprint look: a deep blue background with a faint grid.
- Put the number line near the bottom of the screen, showing the interval from 0 to 1 across most of the width.
- For every fraction p/q in lowest terms with q up to about 60, draw a circle of radius 1 / (2q^2) whose bottom touches the number line at p/q. Use thin pale lines. You should see circles that touch but never overlap.
- Label each circle that is big enough with its fraction.
Once that works, make it beautiful:
- Generate the circles with the Stern-Brocot tree instead: start with 0/1 and 1/1, recurse on the mediant (a + c) / (b + d) between neighbors, and stop when a circle would be smaller than half a pixel or falls outside the view. This lets you zoom anywhere.
- Add zooming with the mouse wheel around the cursor and dragging to pan, keeping the number line at the bottom. Draw huge circles carefully, since canvas arcs with enormous radii break.
- Draw a vertical line at the golden ratio and at pi, with buttons to switch. Highlight in amber the circles the line passes through: their fractions are the continued fraction convergents, like 22/7 and 355/113 for pi.
- Show the continued fraction of the chosen number and, for each convergent, how far from the circle's center the line passes as a fraction of its radius.
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 an automatic dive that zooms toward the number forever, drawing the Stern-Brocot descent as a chain of tangent circles, or letting the mouse pick any number to analyze.
