This web page was heavily inspired by the Numberphile video The Golden Ratio (why it is so irrational):

The Spiral Flower pattern is generated by placing circles along an Archimedean Spiral:

• It uses the polar coordinate system, which defines a point by a distance r (radius) from the pole (origin) and an angle θ (theta) from the positive x-axis, represented as (r, θ).
• This system is often used for circular symmetries, whereas Cartesian uses (x, y) for horizontal and vertical distances.
• For each stepᵢ, each circleᵢ sits at (r, θ)ᵢ = (i × Δr, i × Δθ) and the circle's radius grows linearly from ○∧ to ○∨.
• The polar coordinate (r, θ) is converted to Cartesian (x, y) coordinates using (x, y) = (r × cos(θ), r × sin(θ)) (the inverse conversion (r, θ) = (√(x²+y²), arctan(y/x)) is not used here).
• The value of Δθ (with θ = frac(Δθ) × 360°) controls the pattern — rational fractions produce spokes, irrational ones fill the spiral more evenly.
• How uniform the packing is depends on "how irrational" the number is — an irrational number with a good rational approximation will still create easily recognizable spokes, like π ≈ 22/7 or 355/113. The golden ratio frac(φ) ≈ 0.618 gives the densest uniform packing — the sunflower pattern found in nature.

The whole page was created with Claude Code. These were the most significant prompts that shaped this page:

1. Create a D3 webpage with a center circle and a spiral using polar coordinates, theta += deltaTheta, radius += deltaRadius, count = 100
2. Add an input and slider to control deltaTheta
3. Change theta from degrees to radians
4. Change the input and slider to a fraction of 2π (0.5 = π, 1 = 2π)
5. Add 10 quick-set buttons (golden ratio, √2, √3, √5, π, e, etc.)
6. Change width/height to 980×640
7. Add 6 more quick-set buttons
8. Change preset values to real constants and use % 1 at click time
9. Generate buttons from a { label, value } array dynamically
10. Add play/pause animation button with frame rate parameter
11. Add inverse input (value⁻¹) linked to the fraction input
12. Set count = 200, deltaRadius = 2 (later changed to computed from canvas diagonal)
13. Add circleRmin, circleRmax, deltaRadius inputs
14. Replace fixed circle radius with linear growth from min to max
15. Make presets a 2D array rendered as separate rows
16. Move presets to the bottom of the page
17. Combine the two control rows into one
18. Add the algorithm description above the canvas