Splashery.ContentsPlayground
Sorting Machine, a still.

Fig. 41. §3 AI and Computing

Sorting Machine

A sorting algorithm is a step-by-step recipe a computer follows to put things in order.

PlaygroundHow to play

1Facts

Shelf
AI and Computing
Kind
Built from a recipe
Sound
Yes
Hands-on
Yes
Licenses
Own work (made in the page)

2How to play

Tap it to sort. Hands-on: pick a piece up and drop it on another place to swap them.

3Its controls

Table I. Every control on this Splash.

ControlKindRangeStart
Sort the barsTap
SortButton
AlgorithmList8 choicesBubble sort
ViewList4 choicesBars

4About it

A sorting algorithm is a step-by-step recipe a computer follows to put things in order. Bubble sort keeps swapping neighbors that are the wrong way around; quicksort picks one item and splits the rest into smaller and bigger piles; merge sort sorts small groups, then merges them. On a long list, some need far fewer steps than others.

Tap it: eight bars sort themselves, each gliding to its new place, while a counter counts the swaps, or moves for merge sort; then they shuffle back. Pick one of eight algorithms in the Splash tab. Listen too: each comparison plays the two bars' notes softly, each swap the moving bar's note, every algorithm on its own instrument, so you hear how it works. The View option shows the same steps as crates of different sizes, a ring of colored pucks that sorts into a color wheel, or the classic dots. The steps come from each algorithm's real code, checked step by step against separate reference code. With ✋ Hands-on on, drop a piece on another place and the two swap.

5Details

Splats
Opens at 200,000 at Mid Detail, 59,999 at Low, and up to 830,000 at Max

6Is it right?

All eight implementations match independent comparison and array-change traces. The display counts swaps, except that merge sort counts single-item moves. The bar animation omits comparisons that do not change the array.

  1. Correct.

    Bubble sort compares adjacent items in shrinking passes.[1]

    It runs all shrinking passes, including any pass with no swaps.

  2. Correct.

    Quicksort uses the Lomuto partition.[2]

    The last item is the pivot, values strictly below it move left, self-swaps are omitted, and left partitions run first.

  3. Correct.

    Merge sort combines runs bottom up and stably.[3]

    Runs double in size. Equal values stay left; each needed right item is moved ahead of a left item.

  4. Correct.

    Insertion sort moves each new value into the sorted prefix.[4]

    Adjacent swaps move the value left until it is in order.

  5. Correct.

    Selection sort selects the minimum of each remaining suffix.[5]

    It exchanges the selected minimum with the current destination, omitting self-swaps.

  6. Correct.

    Cocktail sort alternates forward and backward sweeps.[6]

    Both sweeps shrink the active bounds and compare neighboring values.

  7. Correct.

    Shell sort uses gaps 4, 2, 1.[7]

    Each gap performs insertion by exchanges within the interleaved subsequences.

  8. Correct.

    Heap sort builds and drains a max heap.[8]

    Heap construction starts from the last parent and repeated extraction moves the maximum to the sorted suffix.

  9. Correct.

    The counter counts swaps or merge moves.[3][1]

    For every recorded stage of all eight default traces, the seven-segment display shows the stage count and uses MOVES for merge, SWAPS otherwise.

  10. Simplified.

    Animated bar movements show only the exchanges or moves.[3][1]

    Only changed arrays are saved; comparisons with no array change have no visible step. Merge insertion is one move, not a count of every write.

  1. [1]Bubble sort, NIST Dictionary of Algorithms and Data Structures
  2. [2]Quicksort, Sedgewick and Wayne, Princeton Algorithms
  3. [3]Mergesort, Sedgewick and Wayne, Princeton Algorithms
  4. [4]Insertion sort, NIST Dictionary of Algorithms and Data Structures
  5. [5]Selection sort, NIST Dictionary of Algorithms and Data Structures
  6. [6]Bidirectional bubble sort, NIST Dictionary of Algorithms and Data Structures
  7. [7]Shell sort, NIST Dictionary of Algorithms and Data Structures
  8. [8]Priority queues and heapsort, Sedgewick and Wayne, Princeton Algorithms
Simplified
There are eight fixed bars in the picture. Comparison-only work is invisible. Merge counts one insertion move even when that move rewrites several array slots, so its counter is not comparable to a count of memory writes.

7Sources and credits

Made in Splashery. Its code is MIT.

8Share it

This link opens it in the Playground. To put it on your own page, add the element and one script tag. Every option.

https://splashery.app/play/?toy=sorting-machine
<script type="module" src="https://splashery.app/play/src/element.js"></script>
<splashery-toy toy="sorting-machine"></splashery-toy>

9Nearby