Sorting race

1 test · 7 finished runs (7 agent, 0 raw one-shot) · 7 live demos

The prompt

Build a sorting algorithm race: six panels side by side (a grid on narrow screens), each sorting its own copy of the same 60-element array drawn as vertical bars, with bubble sort, insertion sort, selection sort, merge sort, quicksort and heapsort running at the same time, one comparison or write per tick. Highlight the bars being compared and the bars being written in each step, and show live counters for comparisons and array writes in every panel. When a panel finishes, play a quick sweep across its bars and stamp its finishing place (1st to 6th). Controls: input presets (random, nearly sorted, reversed, few unique values), a speed slider, play, pause, single step and reset; an optional soft tone per comparison through WebAudio that is off by default, with a mute toggle. After every race, show a small table of comparisons and writes per algorithm for that input. So the page is alive without input, on load it shuffles and starts a race on the random preset automatically, and after each finish it waits 3 seconds and races the next preset in turn, forever, until the user touches a control. Make it clear and beautiful, the kind of visual a teacher would put on a projector. Save it as index.html in the current directory: one self-contained file with inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files). It must work when opened directly from disk, fit any window from a 390 px wide phone to a desktop, and run without console errors. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.