Two armies of 3,600 units pour across a river map, steered by one Dijkstra each.
Rather than plan a path per unit, each army runs Dijkstra once from its rally point over the whole map, adding up terrain costs (grass, forest, mud; rock and water are impassable) into an integration field: the cheapest cost from every cell to the goal, drawn as isochrone rings. The flow field points down that field's gradient, or straight at the goal wherever a ring-by-ring pass finds clear line of sight, and units read it with bilinear interpolation. Each unit steers toward its flow direction at a speed set by the ground under it and pushes off neighbours found through a spatial hash, so the crowd behaves like a liquid: it pours around rocks, jams on the bridges where the armies meet head on, and settles into a puddle at the banner. Both fields recompute in about a millisecond, so every change reroutes the whole army in the same frame, and a bright front sweeps the overlay in the order Dijkstra settled the cells.
Try it. Click to move the blue army's banner and Shift-click or right-click to move the orange one; drag to sweep it around. Pick Rock, Mud or Erase to paint terrain and watch both armies reroute instantly. Cycle the overlay between the heat isochrones, flow arrows and nothing (F or Space), and press N for a new map. Keys 1 to 4 pick the tool. Left alone, the armies keep trading objectives across the river.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a strategy-game crowd simulation in JavaScript and the HTML canvas element, where thousands of units navigate a map using a flow field. 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 grid of about 80 x 50 cells that fills a canvas, sharp on high-DPI screens. Each cell is grass (cost 1), mud (cost 4) or rock (impassable). Scatter some rock and mud with a little noise function you write yourself.
- Run Dijkstra once from a goal cell over the whole grid with a binary heap, using 8 neighbours (diagonals cost about 1.41 times as much, and never cut a corner past a rock). The result is the integration field: the cheapest cost from every cell to the goal.
- Build the flow field: for each cell, a unit vector pointing toward its cheapest neighbour.
- Spawn 2,000 units. Each frame, read the flow vector under each unit, accelerate toward it, slow down on mud, and slide along rocks instead of entering them.
- Click to move the goal and recompute everything. It takes a millisecond or two, so the whole crowd turns at once.
Once that works, make it beautiful:
- Add separation: bucket units into a spatial hash and push apart any pair closer than their diameter. Now the crowd flows like a liquid and piles up around the goal.
- Sample the flow with bilinear interpolation between the four nearest cells so headings are smooth, and draw the integration field as faint coloured isochrone rings.
- Let me paint rock and mud with the mouse and watch the army reroute live.
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 a second army with its own field, a line-of-sight pass that removes the 45 degree zigzags, or hierarchical fields for huge maps.
