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:
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).
- Insertion Sort
- Selection Sort
- Quick Sort - Lomuto
- Quick Sort - Hoare
- 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.
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).