Live Demo
Ready
Choose an algorithm, adjust the number of bars and animation speed, then click Sort to watch the algorithm work step-by-step. Click Shuffle to randomize the array at any time.
One of the first projects built outside of a classroom. The original was written in Processing (a Java variant designed for visual applications), and this web version recreates the same visualizations using HTML5 Canvas and JavaScript.
Six comparison-based sorting algorithms are implemented:
- Bubble Sort — O(n²) — repeatedly swaps adjacent out-of-order elements
- Insertion Sort — O(n²) — builds a sorted subarray one element at a time
- Selection Sort — O(n²) — finds the minimum unsorted element and places it next
- Shell Sort — O(n log² n) — generalized insertion sort that compares elements separated by a gap
- Merge Sort — O(n log n) — divide-and-conquer algorithm that recursively splits and merges subarrays
- Quick Sort — O(n log n) avg — partitions around a pivot and recursively sorts each side
Each algorithm animates element comparisons and swaps in real-time, making it easy to see how different strategies traverse and reorder the data.
Above: the original Processing-based visualization.