Canvas Visualizations of Sorting Algorithms
Via Simon Willison, I was made aware of an old but interesting post dealing with visualizing of sorting algorithms. Aldo Cortesi explains his dislike for animated visualizations and argues that their explanatory power equals that of a "glob of porridge flung against a wall".
He decided to make something better and ended up with some pretty cool static visualizations rendered with Python using the Cairo graphics library. Now, I don't know if these are really that much more informing than other attempts (especially if you're comparing algorithms), but I do think they're quite pretty.
Anyway, I thought they could use a little
See the canvas visualizations here
You can adjust the number of elements in the array and the dimensions of the canvas. When you click the "Render" button, an array of length NumElements is filled with random numbers and sorted using the algorithm of choice.
And make sure to read Aldo's original post for the full story.
Via Simon Willison, I was made aware of an old but interesting post dealing with visualizing of sorting algorithms. Aldo Cortesi explains his dislike for animated visualizations and argues that their explanatory power equals that of a "glob of porridge flung against a wall".
He decided to make something better and ended up with some pretty cool static visualizations rendered with Python using the Cairo graphics library. Now, I don't know if these are really that much more informing than other attempts (especially if you're comparing algorithms), but I do think they're quite pretty.
Anyway, I thought they could use a little
canvas love so I've spent my morning making a quick and dirty JavaScript / canvas port of Aldo's original Python program. It's a bit rushed and I don't have much experience with Python, so I might have missed a few details in the code, but it looks to be producing similar results.
See the canvas visualizations here
You can adjust the number of elements in the array and the dimensions of the canvas. When you click the "Render" button, an array of length NumElements is filled with random numbers and sorted using the algorithm of choice.
And make sure to read Aldo's original post for the full story.
Wow you can really make some cool patterns with this...
April 15, 2009 7:44 AM Cristobal ViedmaTry bubblesort, numelems:100, width: 900, height:1200
Cool stuff...
This is really beautiful. Thanks for doing it, very nice job :)
April 15, 2009 2:11 PM pixeleroYes, lovely art of algorithms,
April 16, 2009 11:16 AM timbbtw, would love to see also radix sort or gnome sort etc...
excellent, excellent work. these are really fun to play with!
April 16, 2009 4:19 PM Brian M. FranklinCan you add a feature that allows the same random number seed to be used across multiple algorithm renderings (so that the elements that are being sorted start out the same every time) for comparison purposes?
April 20, 2009 1:18 AM Jacob Seidelin@Brian: Sure. There's now a "Reuse array" checkbox. Check it and the current array of numbers will be reused until you either uncheck it or change the number of elements.
April 20, 2009 2:14 AM Brian M. Franklin@Jacob: Thanks! That's cool.
April 20, 2009 10:25 AM 面经This is so great!
April 23, 2009 3:41 AM heranaIt is so lucky to read your article, from this i can get some information that i didn’t know before. Your high quality articles are so great, and can we buy some ads from you? If you agree, just emial me the ad type and fee per month. If you own some other high quality related blogs, selling ads would be welcomed.
May 10, 2010 5:34 PM erayBy Air Jordan shoes
thnk you for sharing. travestitravesti
June 24, 2010 6:20 AM Daniel LaLiberteI was very impressed with this visualization, but I wanted to add some representation of the comparisons involved, since they are an important component of the sorting process. So I copied the code and modified it. You can see the result at my blog: http://roundcorneredbox.blogspot.com/2010/05/visualizations-of-sorting-algorithms.html
July 12, 2010 6:36 PM Jacob Seidelin@Daniel: Nice work! I like the added information, definitely an important element when comparing sorting algorithms.
July 12, 2010 11:56 PM merfuzCan you add a feature that allows the same random number seed to be used across multiple algorithm renderings (so that the elements that are being sorted start out the same every time) for comparison purposes?
October 13, 2010 9:34 PM escortbayan escort
beatiful escort bayan
October 29, 2010 3:51 AM coach outletI came across this article. ... so nice to see you
November 1, 2010 4:51 AMThank you for bringing this to our attention. very nice!