Visualization mode shows how algorithms work, not how fast.
Animation duration and frame count are not reliable measures of algorithmic speed —
each algorithm defines “one step” differently.
For honest speed comparison use the ⏱ Compare All button
below the controls: it runs every canonical algorithm at full CPU speed on the
current data and produces accurate ranked timings.
What It Does
SuperSorter visualizes fifteen sorting algorithms and benchmarks their actual computational speed on demand. A field of dots is displayed on the canvas — each dot’s vertical position represents its value. Sorting arranges the dots so their heights increase from left to right, producing a smooth diagonal slope. The app has three modes: Visualize (watch each algorithm step by step), Compare All (benchmark all canonical algorithms at CPU speed), and the companion Algorithm Reference page (plain-English explanations with code in 3 languages).
Sorting Algorithms
- Dumb Bubble (1) — Repeatedly scans the full array, swapping adjacent out-of-order pairs on every pass. No early exit — always runs O(n²) comparisons regardless of input. Keyword: adjacent
- Smart Bubble (2) — Same as Dumb Bubble but stops early if a pass makes zero swaps. O(n) on already-sorted data. Keyword: adjacent, adaptive
- Cocktail Shaker (3) — Bidirectional bubble sort. Alternates left-to-right and right-to-left passes, eliminating the “turtle” problem (small values near the right end that creep slowly leftward in standard Bubble Sort). Keyword: bidirectional
- Selection (4) — Scans the unsorted portion for the largest value and moves it to its final position. Always O(n²) but makes the fewest swaps of any simple algorithm — exactly n−1. Keyword: minimum scan
- Insertion (5) — Picks up each unsorted element and slides it left into its correct position among the already-sorted elements. O(n) on nearly-sorted data. Core of Timsort’s run-extension phase. Keyword: lift and shift
- Shell Hybrid (6) — Shell’s n÷2 gap sequence with a Bubble Sort inner loop (repeats until settled at each gap). Not canonical Shell Sort — it’s a hybrid. Faster than plain Bubble Sort; slower than canonical Shell Sort at large n. Keyword: gap, bubble, hybrid
- Shell Sort (7) — Donald Shell’s 1959 algorithm: first to break the O(n²) barrier. Same gap sequence as Shell Hybrid, but one insertion-sort pass per gap level — no repeat until settled. Compare with Shell Hybrid at n=10,000 on reversed data to see the difference empirically. Keyword: insertion, gap, one-pass
- Heap Sort (8) — Two-phase: build a max-heap (visible as one immediate canvas jump), then repeatedly extract the maximum. Guaranteed O(n log n) with O(1) extra space. The only simple algorithm that is simultaneously O(n log n) always AND uses no extra memory. Keyword: heapify
- Merge Sort — Bottom-Up (9) — Iterative bottom-up merge: starts with width-1 sub-arrays, doubles each pass. O(n log n) always; stable. About log⊂2;(n) animation frames. Keyword: iterative, bottom-up, merge
- Merge Sort — Recursive (10) — The classic textbook divide-and-conquer Merge Sort, implemented as a JavaScript generator (
function*) so the recursion is real and the animation is frame-by-frame. Watch: left half organises first, then right half, then final merge. About n−1 frames. Open DevTools > Sources and pause to see the live call stack. Recommended n: 100–400. Keyword: recursive, top-down, generator
- QuickSort — Stack (11) — Partitions the array around a middle-element pivot, then processes each side using an explicit work-item stack. One partition per frame. Keyword: pivot, iterative stack
- QuickSort — Recursive (12) — Same algorithm as QuickSort (Stack) but implemented as a recursive generator. The call tree is live in memory during the sort — visible in DevTools. Identical visual output to the Stack version; entirely different internal structure. Keyword: recursive, generator, yield
- Comb Sort (13) — Like Bubble Sort, but starts with a large gap (n÷1.3) that immediately moves “turtle” values far from their correct position. Gap shrinks by ÷1.3 each pass; at gap=1 becomes standard Bubble Sort. O(n log n) best case. Keyword: shrinking gap, turtle
- Timsort (14) — The default sort in Python, Java (objects), Android, and Chrome/Node.js. Two phases: (1) insertion-sort each minRun-sized chunk — visible as sorted stripes forming across the canvas; (2) bottom-up merge. The only common algorithm that is simultaneously O(n log n) worst-case AND deeply adaptive. Keyword: run detection, adaptive, merge
- Bogo Sort (15) — Randomly shuffles the entire array and checks whether it happens to be sorted. Expected time O(n · n!). Not a real algorithm — included as a pedagogical extreme case that makes every other algorithm look fast. Capped at 8 dots. See the Bogo Sort Estimator for expected runtimes. Keyword: random
⏱ Compare All — Algorithm Speed Benchmark
The Compare All button (below the sliders) runs twelve canonical algorithms on the current dot field at full CPU speed using performance.now() for accurate sub-millisecond timing. Results appear in a ranked table with inline bar charts showing relative speed. Algorithms that would take too long at large n (O(n²) algorithms when n > 5,000) are automatically skipped with a note. For the most dramatic results: set dots to 2,000, click Reverse Dots, and run Compare All.
Perlin Noise
When the Perlin Noise slider is raised above zero, dot heights are generated using Perlin noise rather than pure random values, producing smooth wave-like distributions. Algorithms like Smart Bubble and Insertion Sort exploit this existing order and finish noticeably faster. This also benefits Timsort: smooth data creates longer natural runs that the real Timsort (and this simplified implementation) can exploit.
How to Use It
- Choose a sorting algorithm from the drop-down menu.
- Click Sort to begin the step-by-step animation.
- Click the canvas at any time to pause or resume.
- When sorting is done, click Reload Dots to restore the original unsorted positions, or Reverse Dots to load a worst-case arrangement.
- Click ⏱ Compare All to benchmark all canonical algorithms on the current data and see a ranked speed table.
- Use Reset to stop sorting and restore all controls to their defaults.
Controls
- Frame Rate — Adjusts animation speed (1–120 fps). Lower values make each step easier to observe; higher values let algorithms run to completion faster.
- No. of Dots — Sets how many dots are in the field. Shell Hybrid, Shell Sort, Comb Sort, and Timsort all unlock a much higher maximum (50,000 dots). Bogo Sort caps at 8 dots. Note: Compare All skips O(n²) algorithms automatically when n > 5,000.
- Perlin Noise — When > 0, uses Perlin noise for initial dot heights, producing smoother wave-like distributions that reveal adaptive algorithm behaviour.
- Reload Dots — Restores dots to their original random positions.
- Reverse Dots — Before sorting: reverses the array for a worst-case input. After sorting: mirrors the sorted line to create a perfectly descending arrangement (hardest input for bubble-family algorithms).
- ⏱ Compare All — Runs all canonical algorithms at full CPU speed and displays a ranked timing table. Does not affect the canvas state or the current animation mode.
- Canvas color picker — Changes the canvas background. Click the label to reset.
Algorithm Reference
The Sorting Algorithms Reference page covers all eleven canonical algorithms in plain English at a high-school level, with real-world analogies, Big O complexity tables, and code implementations in JavaScript, Java, and Python. Each algorithm has a “View Code” button that opens a code panel with a copy button. The page is designed to be read alongside the visualisation and the benchmark: visualize to understand the mechanism, benchmark to see the speed difference, read the reference to understand why.
Tech Stack
Built with p5.js for canvas rendering, Bootstrap 5.3.3 for layout, Font Awesome 6.5 for icons, and vanilla JavaScript (ES6+) for all sort implementations. The benchmark uses performance.now() for high-resolution timing and the Algorithm Reference page uses a separate superSorterAlgorithmScript.js containing CODE_SNIPPETS for 12 algorithms × 3 languages.