Six sorting algorithms cross-stitch a scrambled sampler back into a rainbow.
Every column of the sampler is its own shuffled array, and six real algorithms (quicksort, merge sort, heapsort, LSD radix sort, Shell sort and a bitonic network) each sort a band of columns at once, one comparison or write per tick. Each algorithm is a generator paused between steps, so you watch the true order of operations: quicksort's nested partitions, merge sort's doubling runs, heapsort's tree layers, radix sort's digit stripes and bitonic's butterflies each leave a texture you learn to recognize. The flat color image is turned into embroidery by overlaying a procedurally drawn cross-stitch tile on Aida linen. Tapestry mode runs all six on the same input and weaves every write as a new row, so time hangs downward and each tapestry's pattern (and length) is the algorithm's fingerprint.
Try it. Drag across the sampler to scramble stitches and watch each column re-sort from where it stands. Click a band label to run that algorithm everywhere, click elsewhere to reshuffle. M switches between cross-stitch and tapestry, O cycles the starting order (random, nearly sorted, reversed, organ pipe), P swaps the rainbow for a sunset picture that sorting reassembles, 1 to 6 pick one algorithm, 0 races all six and the arrow keys change speed.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a sorting algorithm visualizer with JavaScript and the HTML canvas element, where every column of an image is its own array and different algorithms sort different columns at the same time. 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.
- Create 60 columns, each an array holding the numbers 0 to 63 in a random order. Color each value with a rainbow (hue from red to violet), so a sorted column is a smooth gradient from top to bottom.
- Write two sorting algorithms, quicksort and heapsort, as generator functions (function*) that yield after every comparison and every swap. Give the left half of the columns quicksort and the right half heapsort.
- Each frame, call next() a few times on every column's generator and redraw the grid. Draw it into a small offscreen canvas with one pixel per cell, then drawImage it scaled up with image smoothing turned off.
- Click to reshuffle every column and start again.
Once that works, make it beautiful:
- Add merge sort, radix sort, Shell sort and bitonic sort so six bands race side by side, each labeled with its name and its comparison and write counts.
- Flash cells toward white for a moment whenever they are compared or written, so you can see where each algorithm is working.
- Add a second view that runs every algorithm on the same input and stacks a snapshot of the array after every write as a new row, so time runs downward. Each algorithm weaves a pattern you can recognize.
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 cross-stitch texture over the cells, letting the mouse scramble cells and watching them re-sort, or a nearly sorted starting order to show which algorithms adapt.
