Logical Art
Interactive explanations of difficult machines.
A hole punched in card stock in 1928 and a neural network trained in a browser tab are the same idea a century apart. Everything here sits somewhere on that line, and all of it is working: every number live, every failure honest, nothing faked.
New here? Punch a card takes about a minute. Front Panel (on frontpanel.dev) is the one to sit down with.
99 of them open with a crash course: the least you need to know to work the thing, and what you can safely skip. It is nibbles and bytes that carry one, because a bit is already that size.
A few ways in
The list below is a chronology, which is the only order that needs no opinion. These are not a second index: each is a handful of machines from that same list, read in an order somebody chose, because at a hundred entries the relationships between machines are worth saying out loud.
How memory became an illusion
Every layer here lies about where your data is, and each one lies to cover for the layer below it.
How networks survive
Nothing in a network is reliable, so every one of these is a way of being wrong safely.
How computers catch mistakes
From noticing that something broke, to knowing which part, to handing the missing part back.
Why concurrency lies to you
Each of these is the machine underneath doing something the program you wrote never asked for.
And now the machines, oldest first
Every one of them is on this list, in the order they were built rather than the order that would be tidy. The controls below narrow it; nothing removes anything.
Showing 113 built
-
Flip-Flop
Feed a circuit its own output. What does it do now that it could not do before?
/bits/flip-flop/ -
Rangekeeper (on rangekeeper.dev)
The answer is on both sides of the equation, so it had to be a machine.
rangekeeper.dev -
Stored Program
Instructions are numbers. They live in the same memory as the data.
/bits/stored-program/ -
Sampling
The same samples fit two different waves, and nothing in them says which one you had.
/nibbles/sampling/ -
The Middle Square
An early way of making random numbers by arithmetic, and it dies: every seed there is falls into one of eight short cycles.
/nibbles/middle-square/ -
Score Reel
An electromechanical table cannot add, it can only count at the speed of a motor.
/nibbles/score-reel/ -
Huffman
The two rarest symbols marry, and the tree that falls out is provably the best.
/nibbles/huffman/ -
Carry-Lookahead Adder
Stop waiting for the carry to ripple and work out where every carry is born.
/nibbles/carry-lookahead/ -
The Call Stack
Recursion spends memory that appears in no line of the source. You can work out the exact depth it dies at.
/nibbles/call-stack/ -
Garbage
Memory becomes garbage when nobody can reach it, not when somebody says it is finished.
/nibbles/garbage/ -
Reed-Solomon
Erase the bytes you can see are gone and the equations hand them back.
/nibbles/reed-solomon/ -
The Pipeline
The next instruction starts before this one finishes, until it needs something that does not exist yet.
/nibbles/pipeline/ -
Round Robin
Every program believes it owns the processor because none of them gets to keep it.
/nibbles/round-robin/ -
The System Call planned
The same instruction runs in one mode and traps in the other, and the trap is the only door.
-
Context Switch
Your program is stopped mid-instruction, its registers are copied somewhere, another program runs for a while, and then everything is put back so precisely that it cannot tell.
/nibbles/context-switch/ -
The Shuffle
The obvious way to shuffle a list cannot be fair, and you can prove it by counting rather than by measuring.
/nibbles/seeded-shuffle/ -
Packet Switching
The message is cut into pieces that find their own way, so the network can route around what is gone.
/nibbles/packet-switching/ -
Out of Order
The processor reorders your instructions, runs them in an order you never wrote, and is required to produce the answer you would have got anyway. Most of the time it manages.
/nibbles/out-of-order/ -
Deadlock
Each program is waiting for the other to release the thing it cannot release.
/nibbles/deadlock/ -
The Semaphore planned
The count is the permission, and no process has to know which other one is waiting.
-
Fragmentation
There is enough free memory for the request and the request still fails.
/nibbles/fragmentation/ -
SIMD
One instruction, many lanes, and the speedup stops being the number of lanes the moment the data disagrees.
/nibbles/simd/ -
Fifteen Planes
It passes every easy test. Then everything lands on fifteen planes.
/nibbles/fifteen-planes/ -
DRAM Refresh
The bit disappears unless the machine keeps reading it and writing it back.
/nibbles/dram-refresh/ -
Regular Expressions
The search holds every state at once, which is why it never has to go back and can never be made to take forever.
/nibbles/regex/ -
Page Replacement planned
Giving a program more memory can make it fault more, and the obvious algorithm is where it happens.
-
Metastability
Catch a flip-flop at the wrong instant and it cannot promise when it decides.
/nibbles/metastability/ -
Backoff
Two machines transmit on the same wire. Both back off for a random interval.
/nibbles/backoff/ -
Sequence Numbers
The stream arrives in order and nothing underneath it is in order.
/nibbles/sequence-numbers/ -
Z-Buffer
Draw the triangles in any order and every pixel still keeps the nearest one.
/nibbles/z-buffer/ -
Front Panel (on frontpanel.dev)
A working 1975 Altair 8800 you program by flipping switches.
frontpanel.dev -
Diffie-Hellman
The secret is not among the things that crossed the wire, and everything that did is on the screen.
/nibbles/diffie-hellman/ -
Arithmetic Coding
The whole message becomes one number in an interval that keeps shrinking.
/nibbles/arithmetic-coding/ -
Two-Phase Commit
Everyone promises before anyone acts, and one silent machine blocks them all.
/nibbles/two-phase-commit/ -
Logical Clock
The clocks disagree and the machines still agree which event happened first.
/nibbles/logical-clock/ -
Branch Prediction
The processor runs an instruction before knowing whether it should exist.
/nibbles/branch-prediction/ -
Write-Ahead Log
The database says done before half the database has been written.
/nibbles/write-ahead-log/ -
Eight Sprites
Eight per scanline and the ninth is dropped, which is why they flickered.
/bits/eight-sprites/ -
Premultiplied Alpha
The edge of the cut-out is wrong unless you multiply before you blend.
/nibbles/premultiplied-alpha/ -
Quantum Interference
Measured once it is fifty-fifty, and the same step twice gives one answer every time.
/nibbles/quantum-interference/ -
Spanning Tree
One spare cable and the network drowns; cut the right links and it is safe.
/nibbles/spanning-tree/ -
Slow Start
Nobody tells TCP how fast it may send. It finds out by hurting the network.
/nibbles/slow-start/ -
Vector Clock
Each machine counts everyone's messages, so it can tell concurrent from caused.
/nibbles/vector-clock/ -
Catastrophic Cancellation planned
Subtracting two close numbers throws away the digits you still needed.
-
Winsock (on winsock.dev)
The two seconds after the modem stopped screeching, before anything worked.
winsock.dev -
PNG Filters
The compression happens after something else has made the bytes boring.
/nibbles/png-filters/ -
Gamma
The numbers are not brightness, which is why the average of two of them is the wrong colour.
/nibbles/gamma/ -
Consistent Hashing
Add one more server and almost every key stays where it was.
/nibbles/consistent-hashing/ -
AES
Sixteen bytes go in, and every byte that comes out depends on every byte that went in.
/nibbles/aes/ -
Merge Collapse
The sort in every standard library, and the invariant it did not keep.
/nibbles/merge-collapse/ -
Merkle DAG
A commit holds hashes pointing at hashes, and never holds your repository.
/nibbles/merkle-dag/ -
Majority
A write counts once most machines have it, and no later majority can miss it.
/nibbles/majority/ -
Consensus planned
One of them is elected to speak, and the decision survives losing it.
-
TLS Handshake
Everybody hears the conversation that agrees the key nobody else has.
/nibbles/tls-handshake/ -
LLM Lab (on watchitlearn.com)
Train a tiny language model and watch every number as it learns.
watchitlearn.com
Why these machines
A hole punched in card stock and a weight in a matrix are the same kind of object: a decision written down somewhere a machine can read it back. Everything here is a point on that line, and the line is the reason the set is what it is.
The big ones are not chosen from a syllabus. Each is something I actually sat in front of. I toggled a program into an Altair through the front panel switches in the late 1970s, and ran bulletin boards in the 1980s when getting online meant listening to a modem negotiate at 300 baud. In college and on contract work I punched decks and leased mainframe time by the hour on an AS/400 and an IBM 9221, in FORTRAN, COBOL, PL/I, RPG and REXX. I served aboard the USS Missouri in Desert Shield and Desert Storm, where the guns were still being aimed by a mechanical analog computer designed in the 1930s. In 1994 I was at Spry when the web stopped being something you had to already be inside. Now I build with language models.
That constraint costs a lot of good subjects, and it buys the one thing this studio is for: I can tell you where the simulation departs from the real machine, because I used the real machine. Every one of them ends with a section saying what is faithful, what is approximated, and what is simply wrong on purpose, with the sources that settle it.
The work is sized in three, named after what they are. The rule about my own history applies only to the largest, which is what lets the small pieces cover subjects that are worth building and are nobody's biography.
- Bit
- One idea, with nothing in it handing off to anything else. Lives on logicalart.us. 14 here
- Nibble
- One mechanism in three or four stages, each one reachable only through the one before. Lives on logicalart.us. 97 here, 92 built
- Byte
- A complete machine you operate, on its own domain, with its own sources and honesty ledger. 7 here
Nothing here is a video of a machine. If a number is on the screen, something computed it. How that is checked, what counts as a source, and what happens when this is wrong: the method. Words the machines share, each pointing at the one that explains it: words. Something wrong, or a machine worth building: corrections. New machines arrive in the feed.