Subscribe
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.
8 comments:
Wow you can really make some cool patterns with this...
Try bubblesort, numelems:100, width: 900, height:1200
Cool stuff...
This is really beautiful. Thanks for doing it, very nice job :)
Yes, lovely art of algorithms,
btw, would love to see also radix sort or gnome sort etc...
excellent, excellent work. these are really fun to play with!
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?
@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.
@Jacob: Thanks! That's cool.
This is so great!
Post a Comment