Open hexagons merge into a giant cluster the instant p crosses one half.
Every hexagon holds a fixed random number u and is open when u is below p, so the slider opens sites in a fixed order. Union-find labels the clusters each time the open set changes, the big ones keep a color tied to their oldest site, and the largest is gold. On this lattice the threshold is exactly 1/2: below it all clusters are finite, above it one spans the board, and at 1/2 they are fractals with holes at every scale. The white curve is the exploration path, which walks hexagon edges from the bottom middle keeping open sites on its left and closed on its right; Smirnov proved it converges to SLE(6). The inset gets the largest cluster for every p in a single union-find pass over the sites sorted by u.
Try it. Drag the p slider or use the arrow keys (C returns to 1/2). Click a hexagon to flip it, or drag to paint a wall or a bridge and watch crossings appear and vanish. Space or R draws a fresh random board. Left alone it sweeps p back and forth across the threshold.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an interactive site percolation demo on a hexagonal grid with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window and stays sharp on high-DPI screens. Lay out pointy-top hexagons in rows, with odd rows shifted half a hexagon to the right, about 90 across.
- Give every hexagon a random number u between 0 and 1, stored once. A hexagon is open when u is less than p, so changing p opens and closes sites smoothly instead of reshuffling them.
- Add a slider for p from 0.3 to 0.7. Draw closed hexagons dark and open ones light.
- Find the clusters of touching open hexagons with union-find (a parent array with path halving and union by size). Color each cluster from a small palette and the largest one gold.
- Show whether any cluster connects the left edge to the right edge. Slide p past 0.5 and watch a giant cluster appear almost all at once.
Once that works, make it beautiful:
- Only give the biggest dozen clusters their own colors and draw the small ones in a quiet gray-blue, so the fractal structure stands out at p = 0.5.
- Draw the exploration path: treat the left edge as open and the right edge as closed, start at the bottom middle, and walk along hexagon edges, always keeping an open hexagon on the left and a closed one on the right, until you reach the top. Draw it as a glowing white line. At p = 0.5 it is a random fractal curve called SLE(6).
- Let clicks flip a hexagon open or closed and redraw the clusters and the path immediately.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as plotting the largest cluster size against p, estimating the fractal dimension of the path, or comparing square and hexagonal lattices.
