Algorithms in Action (AIA) is an award winning algorithm animation system. It displays views of data structures in sync with highlighting lines of pseudocode as they execute. Sounds familiar, right? However, a unique feature is that the pseudocode can be viewed at different levels of abstraction, and the animation details adjust accordingly. For example, at the highest level of abstraction, Heap Sort can be described in just two lines of pseudocode: first, convert the unsorted array into a heap, then convert the heap into a sorted array. The animation proceeds in just two steps, displaying both the array and tree views so the heap structure is clearer. There is also a textual background explaining the algorithm and explanations attached to the lines of pseudocode. Lines of pseudocode can be expanded to reveal more code details and the animation then has more steps and displays more detailed information.
Stepwise refinement is key to how we explain algorithms, how we develop algorithms and how we write code. To be a good programmer you must use abstraction (both procedural and data abstraction). One of the things I really like about the AIA design is how it reinforces forms of abstraction. Students use AIA to learn about particular algorithms, but in the process they learn valuable lessons about how to think like a good programmer.
AIA was first developed many years ago under the supervision of Linda Stern, Harald Sondergaard and myself, using a very early version of Java. It was gradually left behind as Java developed. The current system is a re-implementation of the original core ideas using Javascript and more modern software infrastructure (the React framework and Node.js). The core was developed by final year software engineering students and multiple students groups have contributed extra functionality over the years. More recently, I have been involved in coding to improve/extend functionality and remove some long-standing bugs.
More details are available via: