A sorting network as a wooden marble run: brass gates swap marbles into order.
Each wire of a sorting network is a carved groove and each comparator a brass gate joining two grooves: when two marbles meet at a gate, the heavier one hops down to the lower groove. The gates never look at anything but their own pair and fire in a fixed order, yet every batch arrives sorted, which is why networks like these run in hardware and on GPUs. Comparators on different wires work at once, so the run is drawn in layers that each take the same time: depth is parallel time, and because the gates are fixed, new batches pipeline in behind the old. Four families are built from scratch (the best known networks, Batcher's odd-even merge and bitonic sort pruned from the next power of two, and odd-even transposition), and the 0-1 view pushes all 2^n binary inputs through the gates with bit tricks: by the 0-1 principle, sorting those proves the network sorts anything.
Try it. Click the board or press Space to drop a batch of marbles. T cycles the network family, N or the up and down arrows change the number of wires (4 to 16), Z switches to black and white marbles and the 0-1 principle proof, and left and right change the speed. Hover a gate to see which wires it joins and how often it has swapped.
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 sorting network with JavaScript and the HTML canvas element, drawn as a marble run where numbered marbles roll along wires and comparators swap them into order. 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 the optimal 4-wire network as a list of comparator layers: [[0,2],[1,3]], then [[0,1],[2,3]], then [[1,2]]. Draw 4 horizontal wires and, for each comparator, a vertical line with a dot on each of its two wires. Space the layers evenly from left to right.
- Put 4 numbered marbles (circles with a number in the middle) at the left end, one per wire, in random order.
- Move all the marbles to the right together. When they reach a comparator, if the marble on the upper wire has the larger number, animate the two swapping wires with a smooth vertical slide. Otherwise they roll straight on.
- When they reach the right end they are always sorted. Click to drop a new random batch.
Once that works, make it beautiful:
- Generate bigger networks in code: Batcher's bitonic sort for 8 or 16 wires, and odd-even transposition sort, grouping comparators into layers so that each layer takes the same time. Show the comparator count and the depth.
- Draw a wooden board with carved grooves, brass gates and glossy glass marbles with a highlight and a shadow, colored by number.
- Let new batches enter before the last one has finished, so the network works as a pipeline.
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 0-1 principle view with black and white marbles, checking every binary input to prove the network correct, or a hover tooltip showing how often each gate swaps.
