Automatic
Array Algorithm
Animation
in C++
Richard
Rasala
College
of Computer
Science
Northeastern
University
Boston
MA 02115
rasala@?ccs.neu.edu
Abstract
2. The Animation
This paper describes an elegant method for automatically
animating an arbitrary array algorithm in C++.
The main driver program is designedto allow a student to
executeand test one or more algorithms one or more times
with a variety of inputs. The goal of the driver program is
to be a model of an experimental algorithm test suite.
In terms of test data, the student can select the number of
data items, the maximum and minimum value of the items,
and how the items will be generated. The student has the
choice of randomly generateddata or piecewise linear data
in the shapeof a saw-tooth graph. The saw-tooth option
was introduced based on comments about testing sort
algorithms in a lecture given by Jon Bentley (see also [I]).
In terms of plot area,the student can select a single plot or
a double plot. In the latter case,the original data is plotted
on the left and the data that is evolving under the action of
the algorithm is plotted on the right. A double plot allows
the studentto do before-and-aftercomparisons.
In terms of plot style, the student can select a bar chart, a
dot chart (with a box or a circle at each data point), or a
line chart.
Finally, the student can choose whether to run in single
step mode in which eachaction requires a mouse click, to
run with a standardpausebetween actions, or to run at full
speed.
In Figure 1, we show a screen snapshot of a single plot
using the bar chart style.
Keywords
Animation, array, algorithm, template, C++.
1. Introduction
For many years, computer science educators have been
interestedin producing algorithm animations to explain the
behavior of standardalgorithms and to help students debug
algorithms that they are writing. A recent survey of the
variety of approachesused to provide such visualizations
may be found in [2]. All of these techniques require some
degreeof manual intervention by the programmer (teacher
or student) into the algorithm itself. This intervention can
take severalforms:
. insertion of explicit graphics calls;
. insertion of trace calls to signal events of interest to an
auxiliary animation system;
. explicit use of specialized data types or operations in
the code of the algorithm.
In this paper, we describe an approachto array algorithm
animation that requires no intervention into the algorithm
itself. In this approach, the algorithm is expressedas a
C++ template that is entirely bee of any code related to
animation. When the algorithm is run, a smart array class
is used as the array parameterand the animation happens
automatically as a byproduct of data assignment and
comparison. This approachis fully automatic and can even
animatearray algorithms in the StandardTemplate Library
(STL) without the need for examining the sourcecode.
Our approach to animation is related to the work of
Sangwan, Korsh, and LaFollette [6]. Their approachuses
the sameunderlying methodology of operator overloading
but is not entirely automatic since special data types must
be used in their algorithms.
interface
Permlwon
to make dagital or hard copies of all or part of this work for
personal
or classroom
use IS granted
without
fee provided
that
copies are not made or distributed
for profit or commercial
advantage and that copies bear this nc~t~ce and the full citation
on the first page.
lo copy otherwise,
to republish.
to post on servers or to
redistribute
to IW?., requires pnor specific
permisslon
and/or a fee
SIGCSE ‘99 3/99
New Orleans.
LA, USA
0 1999 ACM 1.58113.095.6/99/0003...$5.00
Figure 1
257
Notice that eachbar in the plot is annotatedwith its value
at the base and its index at the top. The bars at index
positions 11 and 20 are being comparedand this is shown
in the animation by a temporary changein color from black
to light blue. This color change is an example of an
animation effect that is producedautomatically.
In Figure 2, we show a sample of a double plot.
method is to replace an explicit array parameter such as
double*
A with a generic parameterof the form T* A
and then to place the usual template declaration in t?ont of
the algorithm function definition:
template
<class
T>
This method is definitely the easiestto use in student code
that is primarily focused on the algorithms.
A more abstractmethod for constructing the templates is to
assumethat one has an array object or perhaps an array
iterator object. This technique is more powerful but also
more subtle. It is not enough to know the class of the army
object or iterator. That class must also introduce a
standardtype defmition for the type of the data being sorted
(in order to be able to define temporary variables fcp
example). Stroustrup describes a mechanism to do this
([7], 442fI) and the Standard Template Library uses this
idea extensively but we feel it is too complex for students
at this stageof their education.
4. How the Animation Works
To produce automatic animation, we utilize an array object
that knows how to update its graphical representationas its
dataelementsare being assignedor compared. The use of
this array object is transparent to the template algorithms
that are being animated.
In detail, the system is constructedbasedon three kinds of
templateclasses:Array, ArrayItem. and ArrayChart.
. The Array class is a typical template array class that
supports dynamic allocation of its data together with the
usual array operatorsand iterators. This class is in efK&
a simplified and more readableversion of the STL vector
class. The ArrayChart class usesthe Array class to build
its componentdata array.
. The ArrayItem class is a template class that replaces
pure data items with intelligent data items. By operator
overloading, an ArrayItem object can detect if it is being
assignedor compared. If the ArrayItem object belongs to
an ArrayChart object it can then request changes in its
graphical representationasneeded.
l
The ArrayChart class is a template class that maintains
an array of ArrayItem objects and manages all graphical
display and update operations automatically.
Becausethe definition of the Array class is standard, we
will focus our attention on the ArrayItem and ArrayChart
classes.
Figure 2
The student can use the double plot to check that the sorted
values in the final plot on the right are identical to the
original values displayed on the left. This will confm
that the sort algorithm does not lose data by overwriting.
In Figures 3 and 4, we show samplesof the dot plot style
and the line plot style.
. . ..
.
.
.
. .. .
. ..
n
.‘.
=
.
.
.
.
.
.
.
.
.
-
.
1
l
1.
.’
.
=
n mm . .
.-
Figure 3
Figure 4
In these samples, the snapshots have been taken after the
first partition stageof the QuickSort algorithm.
4.1 The Arrayltem Class
The ArrayItem class is a template class basedon the type T
of the data that is being represented. Each item of type
ArrayItem has2 fields:
itemvalue;
T
itemparent;
ArrayChart<T>*
The it emvalue
field holds the data being represented
by the item. The itemparent
pointer field is more
3. Template Array Algorithms
Before we discusshow the algorithm animation works, we
should briefly describehow array algorithms can be written
in template form.
There are several ways to convert an ordinary array
algorithm to template form. The simplest and most direct
258
subtle. By default, this pointer is set to NULL and cannot
be changedby client code. However, if the item belongs to
the internal data array constructedby an ArrayChart object,
the ArrayChart object will change the it emparent
field to point to itself.
This is one of the keys to automatic update. An item in an
array chart can accessits parent chart object and utilize all
of the graphical information stored there. In particular, an
item in an array chart can accessthe baseof the data array in
the array chart and compute its own index position i in the
data array via the expression:
i = this
- itemparent->begin()
Once this index position is known, the item can coordinate
with its array chart to do any necessarygraphics work. In
addition, the index calculation provides a simple means for
detecting out-of-range errors and for throwing exceptions
that can help studentsdetect programming bugs.
The member functions in the ArrayItem class fall into two
categories:graphical operationsand overloadedoperators.
There are three graphical operations:
. set the value of an item and do the necessarygraphical
update(eraseand redraw);
. set the color of an item;
l
flash the color of a pair of items that are undergoing a
comparisonoperation.
By the use of other tools, these operations also incorporate
user-specifieddelay settings that control the speed of the
animation.
The overloadedoperatorsare assignmentsand comparisons.
These operatorstrap the basic algorithmic actions on the
data items and permit the appropriate graphical operations
to be called automatically. The fact that the critical
operators can be overloaded is the other key to why an
arbitrary array algorithm can be animated. At the heart of
any array algorithm are the assignments and comparisons
madeon the data items of the array.
4.2 The ArrayChart
Class
Like the ArrayItem class,the ArrayChart classis a template
class based on the type T of the data that is being
represented.An ArrayChart object has 11 data fields. We
will describethese fields in groups rather than discuss them
individually.
The array data in an ArrayChart object is stored in a field of
the type
Array<
ArrayItem<T>
>
This design permits issues such as dynamic allocation to
be handled by the plain vanilla Array class.
The internal array data is createdwith 2 extra cells that
bracket the actual user array data on either side. This
design makes it possible to detect an off-by-oneindex error
and to throw an exception to alert the student programmer.
All data accessoperationsuse this error checking.
For convenience,we store an internal pointer to what is the
conceptualstart of the data array, namely, its second item.
We also store the conceptual size rather than the ml1 size.
This permits the other operations of the class to be unaware
of the 2 extra cells introduced to assistdebugging.
The remaining data membersof the ArrayChart class store
the information required for the graphics:
l
the plot areato be used in the graphics window;
. the plot style (bar chart, dot chart with box or with
circle, or line chart);
. the maximum and minimum values of the data to be
usedto createthe data and scalethe plots;
. the horizontal and vertical scaling transforms;
l
boolean values to determine if the plot is visible and if
there is enough spaceto annotatethe plot.
The array size, the maximum and minimum data values,
the plot area,and the plot style are all chosen by the user.
The scaling transformsare computed when the caller asks
to show the plot. At the same time, it is determined
whether there is enough screenspaceto annotate eachdata
item with its value and index.
The central graphical operation is to paint a data item at a
particular index in the array. This operation dependsupon
the scaling transforms but does not call these transforms
directly. Instead, various helper functions produce the
desiredshapesor the necessarylines. In the caseof a line
plot, it is critical that we have accessto all of the data since
the data item must connect to its neighboring data items.
This is why the graphical information is concentratedin the
ArrayChart classrather than being distributed in part to the
ArrayItem class.
The operation to paint a data item is also responsible for
text annotation (value and index) if enough screenspaceis
available. This permits text annotation to be done
automatically and transparently as the data is drawn.
In addition to graphical operations, the ArrayChart class
possessesall of the standard operations appropriate to an
array class. These include operator
I I and the STL
iterator generatorsbegin ( ) and end ( ) . This enables
an ArrayChart object to be used flexibly in template array
algorithms.
5. Pedagogical
Applications
The fundamentalpedagogical application is for students to
understandarray sorting and searchingalgorithms and to be
able to write such algorithms correctly. We introduce the
tools for array algorithm animation at the time midway
through the freshmenyear when we are discussing sorting
(insertion sort, selection sort, and quicksort) and searching
(linear and binary). The studentsare given the three classes
and the main driver program and they are asked to write in
a separatetile the template array algorithms. Becausethe
studentcode is free of any animation details, they can give
100%of their attention to the algorithms themselves. The
automatic animation that results when students run their
259
code is an enormous help in both understanding what the
algorithms are doing and in debugging errors. We found
that students becamefar more involved in the algorithms
by virtue of the automatic animation than in previous years
when testing was done by more traditional means.
It was also interesting to students that we can animate the
STL sort and stable-sort algorithms without even looking
at the source code. We learned, for example, that in our
particular implementation of STL, the sort algorithm use
quicksort until the army interval is 16 or less and then
postponesfurther subsorting until insertion sort is called to
clean up at the end. All of this information was gleanedby
careful examination of the animation not by looking at the
STL source code.
On a meta-level, the classesintroduced to permit automatic
animation provide a wonderful casestudy in object-oriented
design. One of our pedagogic goals for several years has
beento discover “classes that matter”, that is, classesthat
really show the power of object-oriented techniques. The
ArrayItem classand the ArrayChart class illustrate both the
significant and subtle interaction of two cooperating classes
and the proper encapsulationthat allows these classesto be
used safely in other algorithms.
Another faculty member decided to use these classesin a
later object-oriented design course. She said: “I used the
classes as an example for reading code that was well
designed, very useful, and definitely non-trivial.
The
hardestthing for students was tracing the member function
calls acrossclasses. Having an example of good code that
requirescareful reading is pedagogicallyvery valuable.”
article may be obtained in both PC and Macintosh format
at:
http://www.ccs.neu.edulhome/rasala/
We wish to thank Viera Proulx, Harriet Fell, and Joe
Bergin for thoughtful discussionsabout this work.
8. References
PI Bentley, J. and McIlroy, M. D., Engineering a Sort
PI
[31
[41
PI
[61
[71
6. General
Remarks
In our freshmancurriculum, we have been seeking examples
with impact and methods with permanent value. We
emphasizethe use of tools becausewe believe that tools
encapsulatethe wisdom gained from particular examples.
Wheneverpossible, we also stressthe design and invention
of tools so that students can learn how to generalize horn
particular instancesto something of greatervalue.
With the discovery of the classes that enable automatic
array algorithm animation, we have raised tools in the
freshmancurriculum to a new level. These classesdo not
simply provide a specific service that may be requested.
These classesenable the animation of arbitrary algorithms
that may not yet even have been conceived.
It is worth mentioning that the languageC++ is central to
our design. We require the use of templates and operator
overloading. Since these featuresare lacking in Java, we
would not be able to achieve automatic animation in Java
by thesetechniques.
7. Acknowledgements
Partial support for this work has been provided by the
National Science Foundation Leadership in Laboratory
Development Grant, DUE-9650552, and by a grant from
Microsoft Corporation. The materials discussed in this
260
Function, Software-Practiceand Experience, 23( 1I),
1249-1265.
Bergin, J., Brodie, K., Goldweber, M., Jimenez-Peris,
R., Khuri, S., Patitio-Martinez, M., McNally, M.,
Naps, T., Rodger, S., and Wilson, J., An Overview of
Visualization: Its Use and Design, ACM SIGCSE
Bulletin 28 (Special Edition, Barcelona), 192-200.
Proulx, V., Rasala, R., and Fell, H., Foundations of
Computer Science:What are they and how do we teach
them?, ACM SIGCSE Bulletin 28 (Special Edition,
Barcelona),42-48.
Rasala, R., Design Issues in Computer Science
Education, ACM SIGCSE Bulletin 29 (4), 4-7.
Rasala, R., Function Objects, Function Templates,
and Passageby Behavior in C++, ACM SIGCSE
Bulletin 29 (l), 35-38.
Sangwan,R., Korsh, J., and LaFollette, P., A System
for Program Visualization in the Classroom, ACM
SIGCSE Bulletin 30 (l), 272-276.
Stroustrup, B., The C++ Programming Language, 3rd
Edition, Addison-Wesley, Reading, MA, 1997.