Visual Sort Algorithms on Canvas
By Joshua KehnAbout
I created this page due to my recent frustrations with finding a good visual sort comparison. I wanted options, and I wanted no Applets. The majority were applets. Applets sucked for a couple of reasons, the first and foremost of which is they are impossible to run on computers without a JRE / Java plug-in. Due to these issues I elected to write JavaScript implementations of the sorts and use canvas to display them. Canvas is supported by every browser except IE. To get around IE I will use the EX canvas implementation. Will allow canvas to work, but has the issue of speed on IE browsers. I haven't tested this in IE. If you notice an issue please let me know. Regardless of preference, Chrome has the fastest JavaScript implementation and will provide the best overall performance. The original blog post is available.
Use
Using is rather easy. First select a data set, and then simply click on the sort you would like to perform. Options include changing the default array, setting the delay between redraws, and showing / hiding swaps. Showing swaps will introduce blue lines that will show what values are being moved or compared. Some algorithms do this by default (Selection / Insertion) because in order to correctly scale the time frames you to other sorts you need to show them. Otherwise Insertion looks lightening quick. It would also be good to make note of the number of swaps that are performed for every sort. The only sort with a skewed value is the improved selection sort, which happens to have an extremely low swap count because it internally selected the lowest value before performing the swap.
Notice
This page is based on open W3C standard technology. As such it is platform independent and only requires a modern browser. Some sorts (bubble) are particularly intensive and not recommended for older / slower computers. You will obtain best results from Google Chrome. Even though I browse in and recommend Firefox, Chrome's V8 JavaScript engine kicks ass. IE users will notice a overall sluggishness due to IE not implementing native <canvas> support. You have my sympathies.
Mobile Users
Please use the 1/10th second delay and small data set options on mobile devices for the smoothest animation. This has been successfully tested using Mobile Safari on iOS 4. Issues should be directed through the comments in the blog post.