The applet is made up of three main interface elements discussed below...
The Visualization Display
The visualization display is used to demonstrate the inner workings of
the heap sort algorithm at an abstract level. Nodes are connected together
via thin lines and are colored yellow. Inside the node boxes contains a
number that represents the value for that node. The leftmost node visible
on the display is a root node, and the nodes proceeding toward the right
are children of the nodes they are connected to.
The Array Display
The array display, found underneath the heap visualization, is considered a
part of the visualization display and shows the current state of the array that
is to be sorted. When the algorithm begins, the array values presented in
the white colored boxes are equivalent with those entered into the utility
bar (mentioned later). As the heap visualization display changes with
the current state of the algorithm, so likewise does the array display change.
The Code Display
The code display, found alongside the visualization display on the right,
shows an actual Java implementation of the heap sort algorithm. As will
be seen later, the code visible on the screen is the actual code that
is being executed during the visualization process. To receive an explanation
for a particular line of code, simply move the mouse cursor over the desired
line and left-click on it. An explanation box should appear giving a short
synopsis of that particular line of code's function.
The Utility Bar
All applet functions are performed with the utility bar. Starting from the
far left is where any array from 1 to 15 numerical elements
may be entered and applied toward the algorithm. Invalid elements are replaced
with "0" and elements beyond the limit are excluded. Next to the array entry
control lies the apply button that causes the applet to use the supplied
array and reset its state information. In the middle of the utility bar,
the execute button starts the algorithm running, or resumes operation
of the visualization and the algorithm if it has been stopped. The execution
granularity list can be found next to the execute button. From here, the amount
of code executed from the current point in the algorithm forward can be
determined anywhere from the entire algorithm to the next statement. When the
granularity is reached during execution, execution then stops until the
execute button is pressed again. Finally, to stop execution of the
visualization and the algorithm at any point, just press the pause
button located on the far right.
Here is a closeup the granularity steps provided by the execution granularity
list. The items listed are fairly self explanatory in terms of the amount of
code to execute.
Applet features
This next section will provide some of the features not listed in the above sections which the applet contains that enhance the visualization.
Lines of code
As seen above in the image of the code display, the current line of code that
is executing is highlighted in cyan. As code continues to execute, the current
highlighted line changes to match that line of code in the algorithm that is
currently executing. When the algorithm is finished, or has not even begun,
then no line is highlighted.
Heap node comparisons and swaps
The heap visualization display uses colors and animation to portray the
action taking place in the algorithm. When two nodes are ripe for swapping,
a slow blink occurs between the two nodes in the color green. When nodes
actually do swap, they smootly glide over each other until ultimately trading
places in the display.
The array display reflects the activity of the array. As when heap nodes
are compared, likewise the corresponding array elements also blink in the
color green. When a swap takes place, the array elements trade positions.