Elements of Hypermedia Design - 28. Algorithm Animation by Scripting

28. Algorithm Animation by Scripting

Algorithm animation systems are normally either implemented with procedural or object-oriented programming languages or with an interactive animation system. In the first case, implementors usually added an algorithm animation specific library package to the programming language containing routines for the display of the screen elements and the synchronization of the algorithm with the animation. Balsa -II is a typical representative of this type of system [Bro88]. In the later case, animators either adopted an existing computer animation system to their needs or they built their own, as exemplified by XTango [Sta89] or Pavane [Cox94]. In this chapter we suggest a third approach, based on an algorithm animation scripting language.

Some animations in the Animated Algorithms System introduced in chapter II.2 have been implemented based on this approach, although the scripting language interface has been hidden to the end user in order to keep the user interface simple and easy to use. Particularly, hashing algorithms [Vel92], binary search trees and red-black trees [Has92] have been implemented in that fashion. In the following we illustrate the general principles with examples of the red-black tree animation. For an introduction to the algorithmic basics of red-black trees see [Cor90].
A scripting language for algorithm animation facilitates three different tasks:

Play back of animations that have previously been recorded interactively
This is the most obvious use of a scripting language. This allows, for example, to record algorithm animations for different, specific input data sets that produce "special cases".

Use of the scripting language to build the animations
The scripting language can be used to build new animations as any other programming language could be used. The goal is, of course, to be much more productive by using an animation language that is targeted towards algorithm animation.

Use of the scripting language for interactive quizzes and exams
The idea is to have the student manually reconstruct algorithmic operations. The system records a script of the student's actions. After students have completed their task, the system compares the recorded script with the correct solution. (Example: the student does an red-black-tree-insert (RB-insert) for a red-black- tree [Cor90] by manually inserting the node in the tree on the screen with the mouse and rearranges the tree to maintain the RB property.

The use of an algorithm specific animation language has the additional advantage that it takes away from the teacher or application programmer the burden of having to implement algorithmically correct animations. Instead, the system is responsible for correct execution of the algorithm. This means, for example, that an RB-insert command automatically inserts the node at the correct position in the red-black tree. It is up to the system to make sure that the red-black properties of the tree are not violated.

In Animated Algorithms, the "WYSIWYG" direct manipulation interface is closely coupled with the scripting language in the sense that the interactive actions of the user directly call the commands of the scripting language. For the red-black tree animation, e.g., a click on the "insert"-button calls the command "RB-insert". Optionally, the command "insert" can also be recorded to a log to be replayed later. The whole animation system thus is implemented based on the scripting model.

The scripting language actually consists of two layers, subsequently called primitive layer and semantic layer (Figure II.30).

Figure II.30 Two-layered scripting language architecture

Primitive layer:
The lower layer primitive language elements provide the functionality for the graphical animation of the screen elements. For example, for graphs the command insertNode position value displays the node at the desired location.

Semantic layer:
The higher layer includes the algorithm specific language elements. Using this commands, it is very easy to modify existing animations or to construct new ones. For example, RB-insert value inserts the language element at the correct position in a RB-tree.

Table II.1 shows the low-level primitive command set for the animation of tree graphs. The language already contains commands "colorRed" and "colorBlack". Note that these commands do nothing but actually color the node on the screen. In particular, the low-level language elements do not know about the algorithm, which means that invalid red-black-trees can easily be constructed by a sequence of algorithmically wrong commands. The advantage of this approach is that the same low-level primitives can be used for animations of any graph algorithms. In Animated Algorithms the graph manipulation command set has been used for red-black trees and binary trees.

Table II.1 Low-level graph manipulation language for trees

Figure II.31 shows a screen dump from the red-black tree animation of Animated Algorithms using the low-level command set.

Figure II.31 Red-black tree animation created with low-level commands

Normally the user does not see the commands displayed in figure II.31, as these are being called transparently by the high-level commands of the semantic language layer as listed in table II.2. Hitting the "play"-button in the palette in the lower left of fig. II.31 prompted the user to load the script shown in lower right corner. Playback of the script produced a movie resulting in the red-black-tree depicted in the upper window of fig. II.31

Table II.2 High-level red-black-tree commands

Contrarily to the low-level primitive commands, the red-black-tree-specific commands listed in table II.2 will always produce correct red-black trees. These commands "know" about the red-black tree algorithm and thus make it very easy for the teacher or algorithm-animator to produce animations.

Figure II.32 Red-black tree animation created with high-level commands

Figure II.32 shows a red-black tree that has been created interactively by clicking subsequently on the "insert"- and "delete"-buttons on the palette in the lower left corner. The script window in the lower right shows a recording of the commands. The user can now save the script and play it back by clicking the "play" -button and reloading the script. This offers an extremely convenient and rapid way to create animations of various red-black tree cases for, e.g., playback in the classroom.

Figure II.33 Overview map of various red-black-tree animations in Animated Algorithms

Figure II.33 displays an overview map of various interesting cases of red-black tree inserts for different data sets. If users click on any of the cases, the system jumps to the animation viewer and loads the appropriate script for playback.

Using such a scripting mechanism affords thus a very effective way of producing many similar animations. Of course, there is some initial overhead in that the low- and high-level command sets first need to be implemented. Nevertheless, we are convinced that this approach offers tremendous gains in productivity and flexibility, once this initial hurdle has been overcome.