Check out my
new book!
HTML5 Games book
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 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.
⇓ 23 comments Lukas

Wow you can really make some cool patterns with this...

Try bubblesort, numelems:100, width: 900, height:1200

Cool stuff...

April 15, 2009 at 7:44 AM
Cristobal Viedma

This is really beautiful. Thanks for doing it, very nice job :)

April 15, 2009 at 2:11 PM
pixelero

Yes, lovely art of algorithms,
btw, would love to see also radix sort or gnome sort etc...

April 16, 2009 at 11:16 AM
timb

excellent, excellent work. these are really fun to play with!

April 16, 2009 at 4:19 PM
Brian M. Franklin

Can 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 at 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 at 2:14 AM
Brian M. Franklin

@Jacob: Thanks! That's cool.

April 20, 2009 at 10:25 AM
面经

This is so great!

April 23, 2009 at 3:41 AM
herana

It 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.
By Air Jordan shoes

May 10, 2010 at 5:34 PM
eray

thnk you for sharing. travestitravesti

June 24, 2010 at 6:20 AM
Daniel LaLiberte

I 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 at 6:36 PM
Jacob Seidelin

@Daniel: Nice work! I like the added information, definitely an important element when comparing sorting algorithms.

July 12, 2010 at 11:56 PM
merfuz

Can 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?
bayan escort

October 13, 2010 at 9:34 PM
escort

beatiful escort bayan

October 29, 2010 at 3:51 AM
coach outlet

I came across this article. ... so nice to see you
Thank you for bringing this to our attention. very nice!

November 1, 2010 at 4:51 AM
Matt Sitense

Nice site, I have bookmarked your site yet and I will come back again! You have a greatest site! free car ads

October 18, 2012 at 6:20 PM
Kaan Tekin

Very Nice web thanks

[url=http://www.escortbayaniz.org]escort[/url]
[url=http://www.escortbayaniz.org]escort bayanlar[/url]
[url=http://www.escortbayaniz.org]escort bayan[/url]

[url=http://www.elitvipescort.com]escort[/url]
[url=http://www.elitvipescort.com]escort bayanlar[/url]
[url=http://www.elitvipescort.com]escort bayan[/url]

kalıcı makyaj

ipek kirpik

kuaför


escort

escort bayanlar

escort bayan

bayan escort

bayan escortlar


escort

escort bayanlar

escort bayan

November 6, 2012 at 3:14 AM
Kaan Tekin

Thanks
kalıcı makyaj

ipek kirpik

kuaför


escort

escort bayanlar

escort bayan

bayan escort

bayan escortlar


escort

escort bayanlar

escort bayan


escort istanbul

escort bayanlar istanbul

escort bayan


bayan escort

bayan escortlar

escort istanbul

escort bayanlar istanbul

escort bayan istanbul



November 6, 2012 at 3:14 AM
cengiz anic

Türkiyenin en kaliteli web sitesinin isimlerini sizlere sunuyorum.
çin topu
kamagra
fx15
fx15
fx15
cialis
pepper time
lipitabs
geciktirici sprey
maurers
maurers
maurers
maurers
magna rx
panax
fx15
v-pills
v-pills
lida
biber hapi
likit fiber
film izle
indir
e-ticaret

yukarıda belirttiğimiz adreslerde hem program download edebilirsiniz. hemde aynı zamanda zayıflama haplarının en kalitelisiniz siz degerli dostlarımla paylaşıyorum...

July 19, 2013 at 2:21 PM
cengiz anic

Türkiyenin en kaliteli web sitesinin isimlerini sizlere sunuyorum.
çin topu
kamagra
fx15
fx15
fx15
cialis
pepper time
lipitabs
geciktirici sprey
maurers
maurers
maurers
maurers
magna rx
panax
fx15
v-pills
v-pills
lida
biber hapi
likit fiber
film izle
indir
e-ticaret

yukarıda belirttiğimiz adreslerde hem program download edebilirsiniz. hemde aynı zamanda zayıflama haplarının en kalitelisiniz siz degerli dostlarımla paylaşıyorum...

July 19, 2013 at 2:24 PM
Avcı Mimarlık

Ankara Escort
Ankara Escort
Ankara Escort

Eskişehir Escort

March 28, 2014 at 5:09 PM
Avcı Mimarlık

Ankara Escort
Ankara Escort

March 28, 2014 at 5:10 PM
Avcı Mimarlık


Gaziantep Escort
Adana Escort
Mersin Escort
İzmit Escort
kocaeli Escort
Bodrum Escort

March 29, 2014 at 2:57 PM
Post a Comment