/ lab / chaos

there is no chaos — only motion you don't yet have the equations for

Lines through one center; every dot's path is exact. Add lines, stagger them, flip to 3D.

ease motion0 fps

lines3stagger45%duration3.2szoom100%opacity100%

equations

the greek letters (and how to say them)

: θ theta · “THAY-ta” — an angle — how far around you have turned, measured in degrees (a full circle is 360°) or radians (a full circle is 2π).
: π pi · “pie” — half a turn (180°), and the famous number ≈ 3.14159 that ties a circle to its width.
: φ phi · “fye” (rhymes with eye) — the golden angle here, ≈ 137.5° — the one turn that never lines up with itself, so repeated turns spread out instead of stacking.
: δ delta · “DEL-ta” — a step or difference — here, how far each line is delayed behind the one before it.
: τ tau · “taw” (rhymes with raw) — a placeholder for time. Writing s(τ) means “the dot’s position at moment τ”; feeding it s(t − offₖ) just asks for an earlier moment, which is what delays a line.

sin & cos — points on the unit circle

(cos θ, sin θ)

A direction pointing at angle θ has horizontal part cos θ and vertical part sin θ — cos rides the x-axis, sin rides the y-axis, and both swing between −1 and 1. At θ = 0° → (1, 0), straight along +x; at θ = 90° → (0, 1), straight up. That one idea — (cos θ, sin θ) is the point on the circle at angle θ — is reused for every line here, in 2D and 3D.

θ60°

cos(60°) = 0.500

sin(60°) = 0.866

2D · equal angles

θₖ = k · π ⁄ N

Spacing 180°/N — a line and its 180° flip coincide. 2 lines → +, 3 lines → ✳.

k = 0	0 × 180 ÷ 3 = 0°
k = 1	1 × 180 ÷ 3 = 60°
k = 2	2 × 180 ÷ 3 = 120°

3D · how the directions are chosen, step by step

dₖ = (cos φ·√(1−y²), y, sin φ·√(1−y²))

There is no perfect way to spread N directions evenly on a sphere for every N. The Fibonacci method — also called the Fibonacci lattice or Vogel’s sunflower model (1979) — gets very close: climb the sphere in equal-height steps while spinning by the golden angle. Read the formula as four moves.

1
yₖ = 1 − (k + ½) ⁄ N
Height. As k goes 0 → N−1, y steps down in equal slices from ≈1 (top) to ≈0 (the equator). Equal height-steps make equal surface-area bands — that’s Archimedes’ hat-box theorem — so the points spread evenly. We stop at the equator (a hemisphere, not −1) because each line already reaches out the far side (−d), so the bottom half is covered for free; using the whole sphere would create duplicate lines.
2
rₖ = √(1 − yₖ²)
Radius of the horizontal circle at that height — just Pythagoras on the unit sphere: x² + z² = 1 − y².
3
φₖ = k · π(3 − √5)
Turn. Each step spins by the golden angle (≈137.5°), the “most irrational” turn, so points never line up into spokes — they keep filling the gaps. Same reason sunflower seeds pack so tightly.
4
dₖ = (cos φ·r, y, sin φ·r)
Place. Drop the point onto that circle at angle φ — the same (cos, sin) unit-circle move as 2D, now in the horizontal x–z plane, with y as the height.

Example, N = 4: k=0 sits near the top (y ≈ 0.875), k=3 near the equator (y ≈ 0.125), each rotated 137.5° further around. The 2N = 8 tips — every dₖ and its opposite −dₖ — then tile the whole sphere.

This is phyllotaxis — the rule real plants use. Look down the y-axis and the 3D figure is a sunflower head: each seed set 137.5° from the last. Because that angle never lets seeds line up, they pack tight and the eye picks out spiral arms (parastichies) — and you always count a Fibonacci number of them (8 one way, 13 the other below; sunflowers reach 34, 55, 89). That’s where “Fibonacci sphere” gets its name.

build it · one 3D direction, step by step

yₖ = 1 − (k+½)/N

Step down to height yₖ. Each k drops one equal slice, from the top (k=0) toward the equator — equal slices spread the points evenly up and down.

directionk=3

from the side

from above

yₖ	0.56
r	0.83
φₖ	413° − 1×360° = 53°
dₖ	(0.50, 0.56, 0.66)

3D · Fibonacci sphere

yₖ = 1 − (k+½) ⁄ N · φₖ = k · 137.5° (mod 360)

Add directions one at a time. Each new k drops to height yₖ and turns 137.5° (the golden angle) from the last — looking straight down the y-axis it spirals out like a sunflower. The table shows every number.

Fibonacci12358132134

k = 0	y = 1 − (0+0.5) ÷ 6 = 0.92	φ = 0 × 137.5° = 0°
k = 1	y = 1 − (1+0.5) ÷ 6 = 0.75	φ = 1 × 137.5° = 138°
k = 2	y = 1 − (2+0.5) ÷ 6 = 0.58	φ = 2 × 137.5° = 275°
k = 3	y = 1 − (3+0.5) ÷ 6 = 0.42	φ = 3 × 137.5° = 413° − 1×360° = 53°
k = 4	y = 1 − (4+0.5) ÷ 6 = 0.25	φ = 4 × 137.5° = 550° − 1×360° = 190°
k = 5	y = 1 − (5+0.5) ÷ 6 = 0.08	φ = 5 × 137.5° = 688° − 1×360° = 328°

motion + stagger

dot±ₖ = ± s(t − offₖ) · dₖ

Two dots ride each line. s(t) slides a dot back and forth between the ends; the ± puts one dot at +s and its mirror at −s, so the pair crosses at the center. offₖ delays each line by a little, so they don’t all pulse together.

offₖ = (k ⁄ N)·T — even spread; never repeats, re-balances on every +.

offₖ = k·δ — phases wrap: lines coincide every 100 / gcd(p, 100) lines.

Reading s across one cycle T: it starts at −5 (one end), reaches 0 (the center) a quarter of the way in, hits +5 (the far end) at the half-way mark, then comes back. With ease on it’s a smooth sine; off, a constant-speed bounce.

color

hueₖ = (k ⁄ N) · 360°

hueₖ = (k ⁄ N)·360° — from the line angle, so it never collides.

k = 0	0 ÷ 6 × 360 = 0°	rgb(235, 71, 71)
k = 1	1 ÷ 6 × 360 = 60°	rgb(235, 235, 71)
k = 2	2 ÷ 6 × 360 = 120°	rgb(71, 235, 71)
k = 3	3 ÷ 6 × 360 = 180°	rgb(71, 235, 235)
k = 4	4 ÷ 6 × 360 = 240°	rgb(71, 71, 235)
k = 5	5 ÷ 6 × 360 = 300°	rgb(235, 71, 235)

color · why hue is in degrees

hsl( h, 80%, 60% )

A colour here is built from three numbers — hue, saturation, lightness (HSL). Saturation (80%) and lightness (60%) stay fixed; only the hue changes. Hue is an angle on a wheel: 0° red, 60° yellow, 120° green, 180° cyan, 240° blue, 300° magenta, then back to red at 360°. It’s measured in degrees because colour loops — there is no first or last colour, so spinning the angle is exactly what gives each line its colour.

hue40°

hue	= 40°
rgb	(235, 180, 71)

where that order comes from

Screens mix red, green and blue light, so those are the primaries. Picture every colour as a point in the RGB cube, then look straight down its black-to-white diagonal: black and white collapse to the centre and the six pure corners fan out into a hexagon. The primaries R, G, B land 120° apart; the secondaries — where two primaries mix — sit halfway between as yellow, cyan and magenta. Walking around gives 0° red, 60° yellow, 120° green, 180° cyan, 240° blue, 300° magenta. That hexagon, formalised as HSV/HSL in 1978 and baked into CSS hsl(), is the hue wheel.

→

try it · an RGB LED

light = R + G + B

The cube is not just a metaphor — it is how a screen actually makes colour. One RGB LED packs three tiny emitters in a single dome: a red, a green and a blue chip. Each has its own leg with its own turn-on voltage: push a leg past its threshold and the chip lights, then brightens as you push further. Your eye blends the three into one colour — a live point inside the cube at (R, G, B). Drag the three voltages: all the way up is white, all the way down is black, and every mix in between traces a path through the cube the hexagon was built from. Notice blue stays dark the longest — it needs the most volts.

R2.40 V≥1.8 V255G2.60 V≥2.2 V128B0.00 V≥3.2 Voff

rgb(255, 128, 0)#FF8000hue = 30°

So why is a chip red or blue — what is the slider really doing? The colour is baked into the chip’s material, not dialled in. Current pushes electrons across an energy gap (the band gap); each one that falls back emits a single photon whose colour is fixed by the size of that gap. A wider gap means bluer light and a higher turn-on voltage — red ≈ 1.8 V, green ≈ 2.2 V, blue ≈ 3.2 V. Blue was so hard it needed a new material, gallium nitride, and won the 2014 Nobel Prize in Physics. Moving a chip past its turn-on voltage sets how much current flows — how many photons per second, the brightness — never the colour. Watts (volts × amps) is just the power driving it. Mixing three fixed colours at different brightnesses is what reaches every other colour.

what the symbols mean

N: number of lines (2D ≤ 200, 3D ≤ 1800)
k: line index, 0 … N−1
θₖ: angle of line k in 2D
π ⁄ N: angle between neighbouring lines
dₖ: unit direction of line k in 3D
φ: golden angle, π(3−√5) ≈ 137.5°
T: one dot cycle (the duration control)
t: elapsed time
s(τ): dot position along its line, −5 … 5
offₖ: animation delay for line k
δ: fixed stagger step, (%·T)
hueₖ: line color, from its angle

tap to fly

—hearts

/ lab / chaos

there is no chaos

Equidistant lines through one center, dots cascading along each. Add lines, stagger the motion, flip to a 3D Fibonacci sphere.