Afterglowscreensavers

Chaos Game Screensaver

Chaos Game is a free, in-browser screensaver that draws fractals the stochastic way. Start at any point, pick one of a handful of shrinking maps at random, apply it, plot the result, and repeat thousands of times per frame: the points fall onto the attractor of the system, and the Sierpinski triangle, Barnsley’s fern, the Heighway dragon, a maple leaf and more condense out of pure randomness. Nothing to download, and ESC exits at any time.

Live preview

Chaos Game screensaver — Fractals condensing out of randomness.

Press ESC to leave fullscreen. Settings are saved in your browser only.

How the Chaos Game screensaver works

An iterated function system is a small set of affine maps — each one scales, rotates, shears and shifts the plane — chosen so that every map shrinks. Their attractor is the unique shape that is exactly the union of its own images under the maps: the fern is four smaller ferns, the triangle is three half-size triangles.

The chaos game finds that shape without ever describing it. Pick a map at random (weighted, for the fern, so the stem map is rarely chosen), apply it to the current point, plot the point, repeat. After a few hundred throwaway steps every point landed on lies on the attractor, and with enough points the attractor fills in.

Points are drawn additively with very low opacity, so density becomes brightness and the picture develops like a photograph. Each map gets its own colour by default, which reveals the self-similar structure: you can see exactly which shrunken copy of the whole each region belongs to.

Before drawing, the attractor is probed for a few thousand steps to find its bounds and fit it to the screen. In cycle mode each figure develops for half a minute, fades, and the next begins.

The mathematics behind a random picture

The pictures here rest on a theorem about contraction mappings. A map that shrinks every distance by a fixed factor below one has exactly one fixed point, and a finite set of such maps has exactly one nonempty compact fixed shape: the attractor. John Hutchinson formalised iterated function systems in 1981, and Michael Barnsley later popularised them, including the fern, in his book Fractals Everywhere.

The simplest case needs no matrices. Mark three corners of a triangle, start anywhere, and repeatedly jump halfway toward a randomly chosen corner. Each jump halves the distance to that corner, so any early error shrinks geometrically and the points soon trace the Sierpinski triangle. The randomness decides only the order in which the attractor is visited, never its shape.

What the game cannot do is draw an arbitrary picture. Only shapes that are made of shrunken copies of themselves can be produced this way, though a result known as the collage theorem shows that many natural outlines can be approximated by choosing maps that tile them with small copies. Drawing by random choice of maps is the most common algorithm for rendering these systems.

A worked example

At the defaults — Cycle, 5000 points per frame, one colour per map — the Sierpinski triangle appears within a second as three coloured sub-triangles, then the fern unfurls frond by frond in four hues with the near-invisible stem map picking out its spine, then the dragon, the maple leaf and the rest. Pick Barnsley fern alone and raise points to 20000 to watch it reach photographic density.

Settings & tips

Frequently asked questions

What is the chaos game?
Michael Barnsley’s name for drawing an iterated function system by random iteration: apply a randomly chosen map to a point, plot, repeat. The randomness averages out and the points trace the system’s attractor, which is a fractal.
Why does the fern need unequal probabilities?
Because the four maps cover very different areas of the fern. Picking them equally often would over-plot the stem and starve the big fronds; weighting them by area keeps the density even across the whole leaf.
Will this slow my computer down?
It is tuned to run smoothly on an ordinary laptop. If it feels heavy, raise the Pixel size or lower the speed in the settings; every control takes effect immediately.
Is the Chaos Game screensaver free?
Yes. It runs free in your browser with nothing to download or install, and it keeps working offline once the page has loaded.
How do I exit the Chaos Game screensaver?
Press the ESC key at any time to leave fullscreen and return to the page.
Why does the picture appear even if the start point is far away?
Every map shrinks distances, so the gap between the current point and the attractor shrinks with each step. After a few dozen iterations the starting position has been forgotten.
Is the result different each time because it is random?
The finished shape is identical; only the order and spacing of the dots differ. More points simply fill in finer detail of the same attractor.
Can the chaos game draw things other than fractals?
Only attractors of the maps in use, which are self-similar by construction. Smooth, non-repeating pictures such as a face are out of reach, apart from rough approximations.

← All Generative screensavers