Cooling lava cracks into columns that drift toward hexagons, on an isometric causeway.
A cooling lava flow shrinks and cracks, and as the cracking front steps down into the rock each crack can shift a little to relieve stress more evenly, so a random patchwork drifts toward hexagons. Here the crack network is a Voronoi diagram and each cooling cycle is one step of Lloyd's algorithm, moving every seed to its cell's centroid; the seeds glide between cycles and the diagram is rebuilt every frame by clipping each cell with its nearest neighbors' bisectors, found through a grid with an early exit. The panel counts the sides of interior cells, so you can watch the share of hexagons climb. Each cell is extruded into a prism and drawn back to front in isometric view: a cliff of tall columns with banded faces, stepping stones running into the sea, and a cut-away block, with side faces drawn only where they rise above the neighbor in front. Faster cooling gives more, thinner columns.
Try it. Drag to turn the coast, click a column to knock it down a step, keys 1 to 5 (or up and down) set the cooling rate and start a new flow, and space pours fresh lava.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a basalt column simulation 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.
- Scatter about 200 random seed points in a unit square and compute their Voronoi cells: start each cell as the square and clip it with the perpendicular bisector to every other seed (Sutherland-Hodgman, one half-plane at a time).
- Draw the cells flat from above, then run Lloyd's algorithm: every half second, move each seed to the centroid of its cell and rebuild the diagram. Animate the seeds gliding between steps.
- Count the sides of each interior cell and show a small histogram of 4 to 8 sides, so you can watch the share of hexagons grow.
Once that works, make it beautiful:
- Give each cell a height from a simple terrain (a tall cliff at the back, low steps toward the front) and draw the cells as prisms in isometric view, sorted back to front.
- Shade the side faces by which way they face the light, add faint horizontal bands on tall faces, and draw a flat translucent sea that the low columns sink under.
- Start the rock hot: dark tops with glowing orange cracks that fade as the cycles go on.
- Add a cooling-rate control that changes the number of seeds, so faster cooling makes thinner columns.
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 finding neighbors with a grid so the diagram can be rebuilt every frame, rotating the view, or a cut-away front that shows the columns in section.
