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.
103 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 117 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 code of its kind.
/nibbles/huffman/ -
Core Memory
Half a current does not flip the core. Reading the bit is what destroys it.
/nibbles/core-memory/ -
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
One digit of the function code decides whether the hardware obeys the instruction or files it.
/nibbles/system-call/ -
Context Switch
Your program is stopped between two instructions, 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 is biased above two cards, and you can prove it by counting rather than by measuring.
/nibbles/seeded-shuffle/ -
Packet Switching
Each station is destroyed at random, and the network is measured by how much of it still holds together.
/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.
/nibbles/out-of-order/ -
Deadlock
Each program is waiting for the other to release the thing it cannot release.
/nibbles/deadlock/ -
The Semaphore
The count is the permission, and no process has to know which other one is waiting.
/nibbles/semaphore/ -
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
Giving a program more memory can make it fault more, and the obvious algorithm is where it happens.
/nibbles/page-replacement/ -
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/ -
Compare and Swap
Change it only if the value is still the one you last read.
/nibbles/compare-and-swap/ -
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 a coordinator lost at the wrong moment blocks them all.
/nibbles/two-phase-commit/ -
Logical Clock
The clocks disagree and the machines still agree on an order that never puts an effect before its cause.
/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/ -
False Sharing
Two threads, two variables, nothing shared. In one cache line they still fight.
/nibbles/false-sharing/ -
Premultiplied Alpha
Average straight colour and the cut-out's edge picks up whatever the transparent pixels hide.
/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
The subtraction is exact and loses nothing, which is what makes it ruinous.
/nibbles/cancellation/ -
Longest Chain
History goes to the chain with the most accumulated work, not the one that actually cost the most.
/nibbles/longest-chain/ -
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 behind python, java, android and v8, 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, 96 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.