Before delving into the technical documentation for the heap sort visualization applet, one may immediately view the applet's freely available source.
The primary goals of this project were two-fold. The first was to build a visual, graphical piece of software that beginning computer science students can play with in order to learn the heap sort algorithm. This software should be intuitive, non-obtrusive, and widely distributable and available. The second was to make this software an enabling teaching tool for instructors desirous of using a more visual, interactive aid in teaching common algorithms. This tool would not be a replacement, but a supplement to traditional teaching methods and text book material.
The objectives for this project were simple and included the following...
To meet the goals and objectives presented above, the following requirements were decided upon...
As can be seen above, three primary requirements were decided upon for this piece of software. To satisfy these requirements and support the fundamental goals and objectives of the project, the first design decision was to write the software as a Java applet for publicly available access via the World Wide Web.
The three requirements dictated three main functional units within the applet: a visualization display; a code display; and a utility or interface bar. These three units had to be functional to fully support their respective role, and cohesive so as to integrate well with the other units in support the applet's fundamental goals.
Visualization display
The visualization display's role is to display the following in support of the
first requirement...
Since arrays are usually presented left to right, horizontally in text books,
and most languages are read from left to right, it was decided that the
display would present the visual elements horizontally from left to right.
With this approach, the heap is presented visually as a horizontal binary tree
and the array as a series of adjacent blocks. To support the array-heap
correspondence, heap nodes and array blocks should maintain equivalent
horizontal positions so that vertically, the user may see such correspondence.
Code display
The code display's role is to display the following in support of the second
requirement...
Since code in itself can be daunting at first glance, providing explanations
in plain english not only enhances understanding of the algorithm but also
aids in the learning of the language which the algorithm was coded in.
Utility bar
The utility bar's role is to provide the following interface functionality in
support of the third requirement...
Providing scenarios facilitates discovering the algorithm's performance for
different input. Beginning students typically are not familiar with good
test inputs for an algorithm they are still learning, so providing these test
inputs via a choice makes for cleaner operation and learning.
The following is the Java class hierarchy for the visualization applet.
Each primary piece of functionality was delegated to a separate Panel
class underneath the main applet. The algorithm code is embedded within a
separate Thread class to distinguish the interface from the underlying
algorithm code. The source implementation
is entirely documented for each class, method, and attribute, and is
publicly available.
Displaying these elements provides all the visual information that pertains
to the heap sort algorithm and grapsing its inner workings. Providing too
many visual cues can be possibly distracting. Also, the correspondence between
the array and the heap further nurtures understanding of how the heap structure
enables the operation of the algorithm. Consequently, these display elements
provide the right amount of visual information to observe the algorithm's
workings at an abstract level.
Being able to see the entire algorithm on the screen makes following the course
of the algorithm much easier. Also, since code is typically read, and programmed
from left to right, top to bottom, it should be textually presented in like
manner. Display the current line of code is crucial in demonstrating the
algorithm, its current state, and its execution. The current line establishes
further correspondence between the abstract visualization and the code actually
being executed that matches such events. Highlighting the code line provided the
best method of representing the currently executing line without being visually
distracting, or hard to distinguish.
The first piece of functionality was easily served with a pause button. This
button had to have the functionality to immediately stop algorithm execution
as well as visual animation and code display changes. Pause buttons should act
their counterparts on VCRs, that is to completely freeze the action. The second
piece of functionality is likewise served by a run or execute button. Execute is
a slightly better terminology since this is an actual working program, and
programs or executed. The third piece of functionality could be handled by
either a speed control mechanism, a set of choices for execution chunks or
granularities. Having granularity choices was the better design decision because
execution precision is superior to having to pause at appropriate moments within
the algorithm's execution.