Building the Engine: PixiJS, Next.js, and 60 FPS

A short engineering note: how the engine is structured, what runs on the CPU vs the GPU, and why PixiJS + Next.js was the right call for a browser-based swarm simulation.

The engine has three layers: a pheromone grid (typed arrays), an agent layer (worker ants, soldiers, predators), and a render layer (PixiJS). All three live in a single simulation step that runs at 60 FPS in the browser.

Pheromones are stored as flat typed arrays. Each cell holds two values: to-home and to-food. Updates use exponential decay and convolution-style diffusion. The grid is small enough that the entire simulation fits in L2 cache.

Agents use a steering behavior: seek the strongest nearby pheromone, avoid walls, and switch role based on whether they are carrying food. There is no central brain; the colony emerges.

The render layer is pure PixiJS. We avoid canvas text and CSS-heavy overlays; everything is a sprite. That keeps the GPU happy even with hundreds of agents on screen.