Home▸Game Development▸Wave Function Collapse (2D)

🧵 Wave Function Collapse (2D)

A genuine 2D Wave Function Collapse solver drawn on a plain canvas: real per-cell superpositions, entropy-guided cell selection, weighted random collapse, stack-based constraint propagation over socket-matching adjacency rules, and real backtracking on contradiction. Roads and Pipes tile sets, adjustable grid size and speed.

Game Development2DAdvanced60 FPS📱 Mobile-adapted⇄ 3D version

Details

CategoryGame Development

RenderingCanvas 2D

DifficultyAdvanced

Target FPS60

ControlsNew Map resets and restarts generation, Step advances one collapse, and Auto loops continuously at the selected speed (Slow/Med/Fast: 200, 30 or 0 ms per step). A grid-size slider spans 10-46 cells per side, and two tile sets (Roads / Pipes) can be switched live. Click any uncollapsed cell to force its collapse by hand and watch the constraint wave and any resulting backtrack ripple out from it.

wave function collapseprocedural generationconstraint propagationtile-based mapentropybacktracking2d

Related simulations

Interactive Ragdoll Physics SimulationExplore the dynamics of a 2D ragdoll character! Adjust gravity, damping, and constraint…

Field of View — NPC SightShadow-casting visibility polygon for a stealth-game NPC. Cast rays to obstacle corners,…

Procedural Dungeon GeneratorGenerate game levels three ways: BSP partitioning with rooms and corridors, random room… ⊞ All 64 in Game Development →

🧵 Wave Function Collapse (2D) — Tile Constraint Solver

A plain-canvas 2D implementation of the Wave Function Collapse algorithm: real superpositions, entropy-guided cell selection, weighted collapse, stack-based constraint propagation, and genuine backtracking when a contradiction is hit.

🔬 What It Demonstrates

Every cell starts holding every tile that could ever occupy it. The uncollapsed cell with the fewest remaining candidates (lowest entropy) is chosen next; one candidate is picked at random, weighted by how common that tile should be. Propagation then removes any neighbouring tile whose facing socket no longer matches, rippling outward until the grid stabilises — or a cell is left with zero options, which triggers a real backtrack: the last collapse is undone, that choice is forbidden, and the search resumes.

🎮 How to Use

Pick Roads or Pipes, set a grid size and speed, then press New Map. Step advances one collapse at a time; Auto runs continuously. Click any uncollapsed cell to force its collapse by hand and watch the constraint wave spread from it.

💡 Did You Know?

Unlike a purely visual demo, this solver actually rewinds its own history: each collapse is snapshotted before it happens, so a dead-end can be undone exactly, the offending tile excluded, and generation retried from that point rather than silently forcing a fallback.

⚙ Under the hood

A genuine 2D Wave Function Collapse tile solver on a plain canvas: real per-cell superpositions, entropy-guided cell selection, weighted collapse, stack-based constraint propagation over socket-matching adjacency rules, and real backtracking when a contradiction is hit.

wave function collapseprocedural generationconstraint propagationtile-based mapentropybacktracking2d

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install