Sandpile

What it is

The Abelian sandpile is a cellular automaton with one rule: integer heights sit on a square grid, and any cell holding four or more grains topples, losing four and giving one to each of its four neighbours; a grain pushed off the edge of the table is lost. Bak, Tang and Wiesenfeld introduced it in 1987 as the model of self-organised criticality, and when a very large number of grains is dropped on a single cell and allowed to settle, the stable pile is a fractal with the full symmetry of the square — self-similar arches, triangles and lace, coloured by how many grains each cell holds. This page is that pile, live, on a plain 2D HTML canvas with no WebGL: 262,144 grains (2 to the 18th) were dropped on one cell and toppled to rest offline, and that finished pile, 375 cells across, is the first frame.

The pile is stored as a single octant of 17,766 cells in a run-length, base-64 code and unfolded by the eight symmetries of the square when the page mounts, so the canvas's first frame is the finished figure in any browser. It is drawn one cell per texel into an ImageData through a colour lookup table and scaled with nearest-neighbour sampling, snapping to a whole number of device pixels per cell wherever that costs less than a fifth of the figure, so the lattice reads as a lattice. The four tones come from the site theme: on the light page empty cells are the page and three grains is dark ink; in dark mode the tiers glow from the page colour through the accent toward white. A cell that topples is tinted toward a fifth flash tone for that frame and fades back over the next four — the accent's complement on the light page, white on the dark one.

Then you touch it. A tap drops 256 grains on a pile that is already critical, and the avalanche propagates outward as a visible tinted wave — the readout counts it in topplings, and a burst on the centre of the finished pile runs past four million. A drag pours 160 grains a frame under the pointer and grows a ridge that eats into the symmetry. Pour streams grains onto the centre cell so you can watch the figure build itself from nothing; Two sources pours at two cells 65 grid cells either side of the centre so two piles grow toward each other and merge; Line scatters grains along the middle row. The Rate dial runs on a log scale from 60 to 12,000 grains a second, starting at 600. Clear empties the table and Reset brings the baked pile back; the readout shows the grains on the table, any that have fallen off the edge, the height under the cursor and the size of the current or last avalanche.

The engine is the abelian property made practical. Dhar showed in 1990 that the stable pile a configuration settles into does not depend on the order in which cells topple, so a cell holding h grains can topple floor(h / 4) times in one operation and a whole pass can sweep every active cell at once, with a result provably identical to toppling one grain at a time — a claim the unit tests pin against the slow definitional rule. Each pass moves an avalanche front exactly one cell in every direction; the page runs four passes a frame for the first thirty frames after the pile goes active, so the wave is visible, then ramps the pass count by 12 percent a frame up to a thousand inside a nine-millisecond budget, so the long tail of a big avalanche settles in seconds. With reduce-motion on, nothing flashes and the sweep simply runs as fast as the frame budget allows. A resize or rotation carries the pile over, centred, rather than discarding what you built.

How to use it

• Tap anywhere to drop 256 grains and watch the avalanche spread through the pile.
• Drag to pour a trail of grains under your finger.
• Tap Pour, Two sources or Line to stream grains; slide Rate from 60 to 12,000 a second.
• Clear empties the table; Reset brings the 262,144-grain pile back.
• Hover for the height under the cursor; the readout counts each avalanche in topplings.

More experiments

• Rolling Shutter — Canvas, Photography, Optics
• Foam — Canvas, Computational Geometry, Physics
• Chladni Plate — canvas, physics, simulation

See every experiment