A five-stage RISC pipeline as an isometric factory: bubbles, bypasses and flushes.
Instructions are crates riding a conveyor through fetch, decode, execute, memory and write back, one station per clock cycle. Underneath is a cycle-level simulator of a classic five-stage RISC: a tiny assembler, real register and memory values, load-use and read-after-write hazard detection, bypasses from the EX/MEM and MEM/WB latches (drawn as arcs carrying the forwarded value), and branches resolved in EX that flush two crates into smoke when the guess was wrong. The textbook pipeline diagram builds alongside, and the comparison bars come from silently running the same program under all four settings, so the live CPI counter converges on its bar.
Try it. Toggle forwarding (F) and the 2-bit branch predictor (B), switch programs (P) and change speed with + and -. Click a line of the program and drag it, or use Up and Down, to reschedule it: moving addi between lw and add in Array sum removes the load-use stall. Space pauses, and the right arrow (or a click on the factory while paused) steps one cycle.
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 visualization of a five-stage CPU pipeline 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:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Use a dark background.
- Write a tiny program as data: about eight instructions such as addi, add, lw, sw and bne, each with its destination and source registers. A short loop that sums an array is perfect.
- Simulate the classic pipeline: five slots named IF, ID, EX, MEM and WB. On every clock tick each instruction moves one slot to the right and a new one is fetched. Execute each instruction when it reaches EX so register values are correct.
- Detect hazards. If the instruction in ID needs a register that an older instruction in EX or MEM has not written back yet, hold IF and ID in place and insert an empty bubble into EX.
- Draw the five stages as labeled boxes in a row with each instruction as a colored card inside, and below them the textbook diagram: one row per instruction, one column per cycle, each cell labeled with its stage.
- Tick about once a second with requestAnimationFrame and show the running cycles per instruction (cycles divided by instructions completed).
Once that works, make it beautiful:
- Animate the cards sliding between stages with easing, and draw bubbles as translucent circles so stalls are obvious.
- Add forwarding as a toggle: when it is on, only a load followed by its consumer stalls, and draw a glowing arc from MEM or WB back to EX carrying the forwarded value.
- Resolve branches in EX: if the next instruction fetched was wrong, flush the two younger cards with a burst of particles.
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 2-bit branch predictor, letting me drag instructions to reschedule them, or drawing the stages as an isometric factory.
