Data-Oriented Design, by picture

Two tanks on a grid of walls, built data-first in C, WebAssembly, and WebGPU: a bitset grid, fixed-point integer math (no floats), batch transforms over structure-of-arrays, an auto-steering movement contract, and a clean split between simulation and rendering so the whole thing is tested natively. Every data structure is live and pokeable on the page.

A 4×4 world of screen-grids on one big toroidal grid, with scrolling, two tank classes (manual + self-pathing), and hierarchical pathing built as precomputed tables read by a per-tick lookup: a per-screen all-pairs distance (store the metric, derive the arrow) and an edge-point next-hop matrix composed on top of it. The flow field, edge points, and next-hop matrix are all live on the page.

A thousand mites — an enemy faction — that wander, gossip the last place they saw a tank, then 80% hunt it while 20% carry it home to a nest. The lesson is scale: a fixed pool with no allocation, a uniform-grid index rebuilt every tick, a crowding cap enforced by a deterministic reservation, a single integer PRNG, shared knowledge that is one cell and one timestamp copied on contact, and a handful of shared route fields standing in for a thousand routes. The per-cell occupancy, the diffusing belief field, the four nests, and the live route count are all on the page.

The same world, the same tanks, the same 4096 mites — redrawn as a top-down perspective 3-D scene, changing not one byte of the simulation. The lesson is the payoff of a one-way sim/render split: a perspective model-view-projection matrix in the shader, a z-buffer for occlusion and a painter's key for the glow, flat per-face shading, and late-bound low-poly art swapped through a kind→mesh table — all proven by a test that the sim's state-hash is identical to chapter 3, tick for tick. The minimap stays top-down: the same data drawn two ways at once.