What It Does
SuperSorter visualizes how common sorting algorithms work. 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 steadily from left to right, producing a smooth diagonal slope when complete.
Searching Algorithms
After a sort completes, a Searching Algorithms panel appears. Choose a technique, set a target value with the slider, and click Search to watch the algorithm probe the dot field one step per frame.
-
Linear Search — Starts at index 0 and checks each dot in order until it finds the closest match. On unsorted data this is the only correct approach, because there is no guarantee about where the target might be — every element must be inspected. On sorted data an early exit is possible: once the dot values pass the target, all remaining dots are farther away, so the search can stop. Keyword: one by one
-
Binary Search — Requires sorted data. Repeatedly cuts the remaining search range in half by comparing the target against the middle element: if the middle value is too large, discard the left half; if too small, discard the right half. Each probe eliminates half the remaining candidates, so at most ⌈log₂(n)⌉ comparisons are ever needed — just 10 probes for 1 000 elements, 17 for 100 000. Keyword: divide & conquer
- When you use the Binary Search animation, you'll notice that the searching is so fast you can barely see the animations! Adjust the frame rate so you can slow the process down and see the probes in action.
Sorted vs. Unsorted — Why It Matters
When Linear Search is selected, a Showing: Sorted Data / Showing: Unsorted Data toggle appears. Clicking it instantly swaps the canvas between the sorted slope and the original random scatter so you can run linear search on both and directly compare the cost:
- Sorted data — Early exit fires as soon as the probe passes the target. On average roughly half the array is examined.
- Unsorted data — No early exit is possible. Every element must be checked. With 300 dots the comparison count is always 300; with 10 000 dots it is always 10 000.
Binary Search requires a sorted array. Switching to it automatically returns the canvas to sorted data and hides the toggle.
Sorting Algorithms
- Dumb Bubble — Repeatedly scans the full array, swapping adjacent out-of-order pairs on every pass. Simple but slow: always runs O(n²) comparisons regardless of input. Keyword: adjacent
- Smart Bubble — Same as Dumb Bubble, but shrinks the scan range after each pass and stops early if no swaps occurred. Can be O(n) on nearly-sorted data. Keyword: adjacent, adaptive
- Cocktail Shaker — A bidirectional bubble sort that alternates direction each pass. Keyword: bidirectional
- Selection — Scans for the largest value and moves it to its correct position. Always O(n²), fewest swaps. Keyword: smallest
- Insertion — Slides each dot left into sorted position. Efficient on small or nearly-sorted arrays. Keyword: insert
- Shell — Enhanced insertion sort; sorts widely-spaced pairs first. Keyword: jump
- Heap Sort — Builds a min-heap (O(n)), then extracts minimum elements one per frame. O(n log n). Keyword: heapify
- Merge Sort — Iteratively merges adjacent sorted sub-arrays; O(n log n) guaranteed. Keyword: merge
- QuickSort — Partitions around a pivot per frame; explicit stack avoids recursion issues. Keyword: pivot
- Bogo Sort — Randomly shuffles every frame and checks if sorted. Pedagogical joke only. Keyword: random
Perlin Noise
When the Perlin Noise slider is above zero, dot heights are generated with Perlin noise instead of pure random, producing gentle waves. Algorithms like Smart Bubble and Insertion Sort finish faster on this structured data; Merge Sort is unaffected.
Tech Stack
Built with p5.js for canvas rendering, Bootstrap 5 for layout, and vanilla JavaScript (ES6+).
📖 Go deeper: Searching Algorithms — Linear & Binary — concepts, comparisons & code in JavaScript, Python, and Java