Fractals - Chaos Game

The chaos game is one of the simplest ways to draw a fractal: mark the sides vertices of a regular polygon, drop a point anywhere, then repeat — pick a random vertex and move the point some fraction (ratio) of the way toward it. A handful of iterations are discarded as warmup so the point settles onto the attractor before any of it gets plotted.

At sides = 3 and ratio = 0.5 — halfway to a random triangle corner, every time — the points trace out the Sierpinski triangle, no matter where the first point started. That's the special case: with only three vertices there's nowhere for the point to go except into ever-smaller copies of the triangle, leaving the middle empty at every scale. Add a fourth vertex, or move ratio away from 0.5, and that constraint disappears — the point can reach anywhere inside the polygon, so the attractor fills in as a solid or diffuse cloud instead of a clean self-similar hole pattern. Slide sides and ratio around to watch the triangle's hole pattern dissolve into a fill.

The square is the extreme version of that dissolve: at sides = 4, the touching ratio is also exactly 0.5, but four vertices don't share the triangle's forced empty middle — the point can drift into any corner of the square with equal ease, so instead of a fractal it fills in as one uniform, featureless square. It's the one point on the touching-ratio curve where "touching ratio" stops meaning "interesting ratio." Jitter breaks the symmetry that causes this — nudge it up at sides = 4 and structure reappears, tilted like a 3D projection of a Sierpinski tetrahedron.

Each vertex pulls the whole pattern into a shrunken copy of itself pinned to that corner — that copy is the full polygon scaled down by 1 − ratio. There's a precise ratio for every polygon at which neighboring copies grow just large enough to touch corner-to-corner without overlapping, which is why changing sides here jumps ratio straight to that value: it's the ratio most likely to show clean fractal structure instead of a filled-in blob. For a triangle or square it's exactly 0.5. For a pentagon it's exactly 1/φ ≈ 0.618034 — the reciprocal of the golden ratio — which falls straight out of the same trigonometry that makes a pentagon's diagonals and sides golden-ratio proportioned in the first place. Past a pentagon the touching ratio keeps climbing toward 1 as sides grows, since a point on a near-circular polygon barely has to move to reach whichever vertex is nearest. Feel free to nudge ratio off that value afterward — below it the copies pull apart into disconnected islands, above it they start to overlap.

Jitter is unrelated to the chaos game itself — it just displaces each vertex by a random offset within the given radius before the game runs. The vertices are no longer perfectly on a circle, but the attractor is built from whatever polygon they do form, so the overall shape stays recognizable even as its corners and edges wobble. Those random offsets are drawn once and held fixed — dragging ratio or points re-renders against the same displaced polygon rather than reshuffling it; hit Regenerate to roll a new one.

Forbidding a repeat pick — the checkbox — changes the rules of the game itself, not just the polygon: right after visiting a vertex, the point can never immediately move back into the small copy pinned to that same corner. That opens up an extra family of empty regions on top of the usual ones, so the attractor ends up sparser and more textured than the unrestricted version at the same sides and ratio.

Color by vertex is purely cosmetic — it tints each plotted point by whichever vertex it just moved toward, rather than plotting everything black. Since every point's position is entirely determined by the sequence of vertices that produced it, coloring this way makes the self-similar structure visible directly: each shrunken copy of the whole shape ends up dominated by the color of the vertex it's pinned to, and copies nested inside it blend in the colors of whichever vertices came before.

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

1. Create a new fractal page, much simpler than IFS: pick a regular polygon's number of sides, drop a point, and repeatedly move it halfway (or by an adjustable ratio) toward a random vertex. Controls for number of sides, ratio, and number of points; hardcode a small warmup.
2. Allow more sides, up to 24.
3. Is there a formula for the ratio at which the smaller shapes touch? When I change the number of sides, automatically set the ratio slider to that touching value (but leave it alone if I adjust ratio myself afterward). Add a note about it to the Algorithm section, and definitely mention the pentagon's golden-ratio special case.
4. Add an optional Jitter parameter: a radius slider, 0 meaning off, that randomly moves the vertices around. The shape should remain recognizable even if the points aren't perfectly on a circle.
5. Add a checkbox for not picking the same vertex twice in a row.
6. Jitter needs a Regenerate button — the random offsets shouldn't reshuffle on every unrelated slider change.
7. Add a note to the Algorithm section about the square special case at sides = 4, ratio = 0.5: it fills in solid instead of forming a fractal, unlike every other shape on the touching-ratio curve.
8. Add a "Color by vertex" checkbox, tinting each point by the vertex it moved toward instead of plotting everything black. Built on a new shared lib/larsi.org/point-cloud-renderer-2d.js, extracted alongside a matching "color by transformation" checkbox on the IFS page since both needed the same last-write-wins categorical coloring.