Sorting RaceMotion · ZainSpire ← Library

Algorithms · side by side · with sound

Two algorithms.
One race.

Both lanes get exactly the same numbers and the same number of steps per second, so the faster idea wins, not the faster computer. Turn on the sound to hear each comparison as a note, or type your name and watch its letters fall into order.

HTML · CSS · JavaScript · no librariesDownload the code ↓

Why it is a fair race

Same data, same step budget

Each algorithm is written as a list of small steps: compare two bars, swap them, or write one value. Every frame both lanes get the same number of steps, so you see how much work each idea really needs.

What the colours mean

Look and compare

The two bars being compared rise and darken. Bars that are known to be in their final place turn grey. When a lane finishes, a wave runs over it and it shows the total comparisons and writes.

Why some are so much faster

n² against n log n

Bubble, insertion and selection sort compare almost every pair, so 100 bars need thousands of steps. Merge, quick and heap sort split the problem in halves, so the same bars need only a few hundred.