A tile-based world that assembles itself one consistent cell at a time.
Every cell starts out able to be any tile. The algorithm repeatedly picks the cell with the fewest remaining options, collapses it to one tile at random, and propagates the consequences: neighbors lose every option whose edges would no longer match. The result is a coherent landscape of coasts, rivers, roads and forests that nobody designed, built one cell at a time, with the remaining uncertainty shown as a shimmer of possibilities.
Try it. Click to generate a new world. Hover over the map, or press and hold, to speed it up.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an animated Wave Function Collapse map generator 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, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Use a dark background.
- Define a tileset in code, no image files: each tile is the terrain at its four corners, using water, sand and grass, with corners at most one step apart. Generate every valid combination and give each a weight.
- Two tiles fit side by side when the two corners along their shared edge match.
- Make a grid of about 30 by 20 cells, each starting with every tile possible.
- Each step, find the uncollapsed cell with the lowest entropy (fewest weighted options, with a tiny random tie-breaker), pick one of its tiles at random by weight, then propagate: repeatedly remove tiles from neighbors that no longer have a compatible tile next to them.
- Run a few steps per frame. Draw collapsed cells from their corner terrains, and uncollapsed cells as the average color of their remaining options, dimmer when more remain.
- If a cell ever runs out of options, start over.
Once that works, make it beautiful:
- Prerender every tile once into a small offscreen canvas: blend the corner heights bilinearly, add noise that fades to zero at the tile edges so coastlines wiggle but still line up, and add foam along the shore.
- Add forests and mountains as more terrain levels, with little trees and peaks drawn on top.
- When the map is done, hold it for a few seconds, then generate a new one. Click to start over right away.
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 roads and rivers as edge sockets, backtracking instead of restarting, or biasing the weights with a noise map so the world forms continents.
