I recently learned about P5 and Processing by watching The Coding Train. The framework is powerful and simple enough that I was able to build a Sorting Algorithm Visualizations in a weekend:

• https://sort.khoi.io
• https://github.com/khoi/sorting-visualization

I also rendered a much larger version of the website to videos and post it on Imgur, and the post made “The Most Viral Post of the day”, which is encouraging.

The visualizations will be moved from Imgur to this post for longevity.

Here is how they are animated: each row contains the same set of values (colors) but shuffled differently. Hence although each row starts differently, at the end of the sort, they should have the same order (sorted).

Index

• Index
  • Insertion Sort
  • Selection Sort
  • Quick Sort - Lomuto Partitioning
  • Quick Sort - Hoare Partitioning
  • Merge Sort
  • Bubble Sort
  • Heap Sort
  • Shell Sort
  • Radix Sort - LSD
  • Comb Sort

Note: It takes a while to load the videos, be patient please.

Insertion Sort

Selection Sort

Disclaimer: This animation makes Selection sort looks fast. In fact, it’s one of the slowest ( complexity O(n^2) )

The reason for it is I can only animate when there is a swap. Although selection sort requires very little swaps, to find the index for swapping is slow (this part is not animated).

Quick Sort - Lomuto Partitioning

Quick Sort - Hoare Partitioning

Merge Sort

Bubble Sort

Heap Sort

Shell Sort

Radix Sort - LSD

Comb Sort