Animated Algorithms(algomation.com)
algomation.com
Animated Algorithms
http://www.algomation.com/
35 comments
Instead of the animation speed setting it should have a slider (like, for instance, here http://debug.elm-lang.org/edit/Mario.elm). Otherwise, it's more like a nice animation than a learning tool.
Great site! I would suggest a list of "related algorithms" on each animation, for example if you want to look through all the sorting algorithms.
...working on a search term extraction algorithm as we speak :)
I'm not sure if the site is having issues, or if I am just searching the wrong algorithms :(
Can you link me directly to an algorithm to check out the animation?
Can you link me directly to an algorithm to check out the animation?
Site appears to be hammered -- no algorithms are showing up for me either, and search isn't returning.
Google returns http://www.algomation.com/algorithm/quick-sort-visualization as an example URL, but it's not returning anything at the moment, and Google cache won't finish loading it either.
Google returns http://www.algomation.com/algorithm/quick-sort-visualization as an example URL, but it's not returning anything at the moment, and Google cache won't finish loading it either.
more dynos added....should be smoother now.
Awesome thanks! The site looks great. It would be cool if you could add some support for algorithms that a lot of new programmers would be looking for. eg: DFS, BFS, and maybe Dijkstras. I didn't see any of those :(
Same here. Dijkstra's was the first I tried to search, to no avail :(
This is really great. I always wished something like this existed when I was going through CS undergrad (and grad, for that matter). Have you tried reaching out to any CS professors to tell them about it? You might also spread the word by telling some "coding interview" blogs about it.
Feature plea: it would be awesome to have legible YouTube screencast videos of all the algorithms from sites like this for lecture purposes.
I teach various CS classes and love using these kinds of sites. It really is a powerful way to demonstrate concepts. Usually what I do is go to the site, choose an algorithm, then show the algorithm working with the default options. Then I'll change a few options and try it again. Then I might pick a different algorithm and do another demo. Then I'll share the link with the class and encourage students to experiment on their own to really understand the algorithm.
It would be convenient to have screencast demos doing the exact same thing as a backup for lectures in case there are any problems. Problems I've encountered: general Flash/JavaScript failure, projected screen resolution so bad that the site is unusable, site temporarily slow or down, sites with ads showing inappropriate content for classroom use. Video backup lets me not worry about any of that.
I teach various CS classes and love using these kinds of sites. It really is a powerful way to demonstrate concepts. Usually what I do is go to the site, choose an algorithm, then show the algorithm working with the default options. Then I'll change a few options and try it again. Then I might pick a different algorithm and do another demo. Then I'll share the link with the class and encourage students to experiment on their own to really understand the algorithm.
It would be convenient to have screencast demos doing the exact same thing as a backup for lectures in case there are any problems. Problems I've encountered: general Flash/JavaScript failure, projected screen resolution so bad that the site is unusable, site temporarily slow or down, sites with ads showing inappropriate content for classroom use. Video backup lets me not worry about any of that.
maybe ensure it can support the traffic first ;)
Sadly the website seems to have fallen over for me.
I am really interested in how it works. From what I could see it seems a bit more cumbersome, than my approach of a using full JS interpreter: http://will.thimbleby.net/algorithms/doku.php?id=bubble_sort
I am really interested in how it works. From what I could see it seems a bit more cumbersome, than my approach of a using full JS interpreter: http://will.thimbleby.net/algorithms/doku.php?id=bubble_sort
agreed, but compiling the code does have the benefit of providing syntax checking and you are assured the full benefits of whatever JS engine your browser is running. How do I create new algorithms on you site? I could not figure that out.
I make use of Tailspin [1], which is a JS-in-JS interpreter and almost fully ES262 compliant. The visualisation gets called on every line of code and updates itself based on inspecting the interpreter state.
Two benefits are, the visualisation code is kept completely separate from the code being visualised. And secondly Tailspin offers the ability to step back in time.
In terms of creating algorithms, it's a bit of an awkward wiki syntax at the moment, see the tutorial [2] and bubble sort example [3].
[1] http://wthimbleby.github.io/tailspin/ [2] http://will.thimbleby.net/algorithms/doku.php?id=creating_an... [3] http://will.thimbleby.net/algorithms/doku.php?id=algorithm:b...
Two benefits are, the visualisation code is kept completely separate from the code being visualised. And secondly Tailspin offers the ability to step back in time.
In terms of creating algorithms, it's a bit of an awkward wiki syntax at the moment, see the tutorial [2] and bubble sort example [3].
[1] http://wthimbleby.github.io/tailspin/ [2] http://will.thimbleby.net/algorithms/doku.php?id=creating_an... [3] http://will.thimbleby.net/algorithms/doku.php?id=algorithm:b...
When you restart a visualization, it automatically switches back to 'continuous' even if you had single-step selected. Making it easier to start from the very beginning would be beneficial I think. Just a suggestion.
Very pretty, reminds me of
http://www.cs.usfca.edu/~galles/visualization/Algorithms.htm...
Another cool algorithm animation site: http://rosulek.github.io/vamonos/demos/ uses Vamonos (http://rosulek.github.io/vamonos/). However, it looks like you have to write the algorithm twice, once in pseudocode to present to the reader and once in javascript to execute. In the Javascript code, you annotate the execution with the corresponding lines in the pseudocode so that the library can show what's executing.
I haven't dug into Vamono to figure out how that interacts with the browser's event loop. Duncan's use of ES6 generators for that interaction is clever, as is Will's Tailspin JS interpreter.
I haven't dug into Vamono to figure out how that interacts with the browser's event loop. Duncan's use of ES6 generators for that interaction is clever, as is Will's Tailspin JS interpreter.
Wow, that is super sweet. I have been planning to add user interaction to algomation.com but have not had the time yet. The input mechanism would need to support validation and defaults so that algorithms could always run unattended but otherwise very doable despite the web workers that I use on the site.
Djikstra's Shortest Path crashes my browser (Chrome 37.0.2062.120)
Needs a caching algorithm.
Nice! I don't understand how to link the algorithm to an animation when creating a new algorithm? I'm clearly missing something.
Damn where was this while I was in university! I'm definitely a visual learner and these are great! Thanks OP.
traffic issues aside, great job. Quality resource, will recomend to cs undergrad friends
I added a few more dynos...nice and smooth now. Apologies.
-duncan meech
Appears to be falling over.
Just searched for bubble sort.
Impressive! So much easier when you get to see an animation of what it does
http://www.algomation.com/algorithm/bubble-sort-optimized
Impressive! So much easier when you get to see an animation of what it does
http://www.algomation.com/algorithm/bubble-sort-optimized
Does it really need to reload the whole page to change to a new algo? Creates a crazy history trail you'll have to backspam through.
http://www.algomation.com/algorithm/towers-hanoi-recursive-v...
http://www.algomation.com/algorithm/dijkstra-graph-shortest-...
http://www.algomation.com/algorithm/reversi-othello-engine-n...
http://www.algomation.com/algorithm/heap-sort-priority-queue