A heap as a warehouse: crates turn white, grey and black, then the dead get swept.
Every object is a crate on a warehouse floor of numbered addresses, every reference is a cable strung between lids, and the stack frames on the left are the roots. A small program keeps allocating, rewiring and popping frames while an incremental tri-color collector works alongside it: roots' targets turn grey, each step scans one grey crate and paints it black, and a Dijkstra write barrier (the lightning bolt) catches the program hiding a white crate inside a black one. Then a sweeper rolls down the aisles freeing every white crate, first-fit allocation fragments the floor, and a sliding compactor packs it back together. Switch to the generational collector to see bump allocation in a nursery, Cheney-style copying of the few survivors, promotion to old space, and card marking for old-to-young pointers.
Try it. Click a crate to cut every reference to it, or click the top stack frame to pop it. Buttons or keys: G switches collector, C collects now, A allocates a burst, F pops a frame, S changes speed, Space pauses, R restarts. Left alone, it alternates between the two collectors.
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 garbage collector visualization 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:
- Model a heap as a grid of 12 by 8 cells. An object is a box that occupies one to three adjacent cells in a row and has up to three reference fields. Keep a few "stack frames" on the left whose slots are the roots.
- Write a tiny mutator that runs a few times per second: allocate an object (first fit) and link it from a root or from a live object, rewire a random field, push a frame, or pop one so whatever only it referenced becomes garbage.
- Draw the grid in isometric projection: each cell maps to a diamond, and each object is a box with a top and two side faces, drawn back to front so nearer boxes cover farther ones. Draw references as curved arrows arcing from lid to lid.
- When the heap is more than about 60% full, run a mark-sweep collection: mark everything reachable from the roots, then free everything that was not.
Once that works, make it incremental and beautiful:
- Use tri-color marking: the roots' targets turn grey, each step takes one grey object, greys its white children and turns it black, while the mutator keeps running between steps.
- Add a write barrier: if the program stores a white object into a black one, shade the white object grey and flash a little lightning bolt.
- Sweep with a visible cursor moving through the addresses, and fade out freed boxes.
- Plot heap occupancy over time next to the live data, to show the allocation sawtooth.
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 sliding compaction to fight fragmentation, a generational nursery with copying collection, or reference counting with a cycle detector.
