Reference

Diagram Gallery

Every diagram in the course, indexed — plus two that live only here. The animated ones have PLAY / STEP / RESET controls; STEP is the best way to study them.

All diagrams by topic

Diagram	Type	Where
System block diagram — CPU, RAM, ROM, video, I/O, slots on one bus	Static	Lecture 01 §3
6502 register set — A, X, Y, SP, PC and the flag byte	Static	Lecture 02 §2
Fetch–decode–execute — a real 2-instruction program, bus transaction by bus transaction	★ Animated	Lecture 02 §3
Memory map — $0000–$FFFF with every named region	Static	Lecture 03 §1
Memory-mapped I/O — keyboard read and speaker click through the address decoder	★ Animated	Lecture 03 §2
Text-screen interleave — address-order memory landing on screen rows	★ Animated	Lecture 04 §2
Hi-res byte anatomy — 7 pixels + palette bit	Static	Lecture 04 §3
Lo-res byte anatomy — two blocks per byte	Static	below
Double buffering with page flipping	★ Animated	below

Lo-res byte anatomy

Static: why lo-res is 40×48. GR mode reuses text memory: each byte's low nibble colors the top half of the cell and the high nibble the bottom half, 16 colors each. PLOT x,y with even/odd y just edits one nibble of the right byte.

Double buffering with page flipping

The technique from Lecture 03 §4, animated: a ball moves smoothly because we always draw on the page the viewer can't see, then flip the display switch ($C054/$C055) between frames. The eye never catches a half-drawn frame.

Animated: page flipping. The bright border marks the page currently on display; drawing always happens on the other one. Each "flip" is a single soft-switch access — instant, tear-free. The same idea drives every modern GPU's swap chain.

Want more?

Each animated diagram's source is plain SVG + a small list of steps in the page's script — view-source on any page to see how they work, or use the pattern (in site.js) to build your own. A good exercise after Lecture 04: an animated hi-res row interleave diagram, which nests the text screen's trick three levels deep.