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.
⇓ 17 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
Anonymous

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
brianmfranklin

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
brianmfranklin

@Jacob: Thanks! That's cool.

April 20, 2009 at 10:25 AM
面经

This is so great!

April 23, 2009 at 3:41 AM
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
Unknown

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
Anonymous

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
Unknown

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
Unknown

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
Unknown

Ankara Escort
Ankara Escort
Ankara Escort

Eskişehir Escort

March 28, 2014 at 5:09 PM
Unknown

Ankara Escort
Ankara Escort

March 28, 2014 at 5:10 PM
Unknown


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

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