A' System for Program Visualization in the Classroom - CiteSeerX

A’ System for Program Visualization Raghvinder Department

Department :

*

in the Classroom

S. ‘Sangwan

of Mathematics Shippensburg Shippensburg,

and Computer University PA 17257

James F. Kksh Pzkl S. LaFollette, Jr . of Computer and Information Temple University Philadelphia, PA 19122

Abstract ‘. This paperdescribes the use of a systemwhich will allow effortlessvisualization and animation of standardC/C++ piogrhms. tie system brings alive programs so. that studentsin CS 1 and CS 2 classescan more easily see each instruction and its effects. They can also see the effectsof larger entities such as functions. The system servesas an excellent instructional tool anddebugger.

Science

Sciences

systemis particularljr h&ftil to studentsin understanding this. Studentsappearto be effective learners when they create animations [3]. Because the system allows animations to be createdesSentially“for free”, it is easy to allow students to create’animations which they can then explain to their peer.51 Studentsor the instructor would createC/C++ programs specifiedin textual form, but the systemcreateshigh level dynamic displays using bitmapped graphics and window interface technology. Almost all that the student or instructor needsto do is to make simple syntactic changes to data type. declarations. The system organizes information to show global and local variables and parametersas.well as code for the currently executing instruction in the context of the current function. In addition, the current statusof the call stack can be shown, making this a useful tool for enhancingunderstandingof recursion. The use of this system imposes almost no need for learning syntax or constructs outside of the C/C++ languageitself. t A Simple Example To demonstrate several features of the system in use, consider a contrived example. We hope that the potential for demonstrating simpler ideas such as decision structures or programs using only basic types will be clear to the.reader. The program is:

introduction “ Conventional programming environments provide some support ‘for program ‘understanding, development, and debugging. Once.a program is syntactically correct, a student can use a debugger to monitor the Values of variables and step through a program’s instructions. Although veryA-. useful, this-,processcan be quite,involved and laborious. 1 The feedbacka programmerreceives does not provide an over+1 v&w of the program’s behavior. It is more instructive to display the dynamicsof a program rather than static snapshotsof datastructurevaluesthat are constantly Updatedas program instructions are executed. Softwarevisualization systems,allow custom animations that attempt$0 capture these dynamics[l]. Such systems generally require the writing of animation code’ and understandingof the,program one is trying to animate. The aim of our systemis to provide automatic animations that are useful and require no additional coding and may lead to understandingof the underlying algorithm. One area,for instance,which hasbeenidentified as particularly troublesomefor studentsis parameterpassing[2]. Our

int b; struct sample{

permissionto n&e di&lhrd copiesof all or part of this materialfor personalor classroomuseis grantedwithout feeprovidedthat the copies we not madeor distributedfor profit or commercialadvanhgc,Ihe COPYr+t notice,the title of the publicxdionandits dateappe;~.andnoticeis given hat copyrightis by pqission ofthe ACM, Inc. To copy ofi&Se, to Epub[ish, to pod on serversor to redistributeto lists.require specific permissionand/orfee. SIGSCE 98 AtlantaGA USA Copyright 19980-89791-994-7/9812..%5.00 . .

int x; .int y; int z; I; struct sampledata[3];

272

OPERATIONS pane. The OPERATIONS pane is also usedto animatethe evaluation of expressionsand to show the movement of variables as they are computed and assigned. The CALL STACK panecontains the namesof functions currently being executed. At this point only main is being executed.

void main0

1

void doit(int count); doit(3);

I

Any variable of type struct sample will be automatically animatedbecausestruct has animatedmembers(x and y). Each of these structs consists of three integer values. In the sourcecodeonly x and y are declaredto be of type lNT, while z is declared‘to be of type int. This indicates to the system that x and y are to be animatedwhile z is not. Similarly, the global array named data will be animated because it consists of animated entries. Although it is not apparent from the part of the data array which is visible, memberz doesnot appear on the screen. This could be confirmed by using the scroll bar in the structure. The x and y members of the struct data[O] contain ‘?‘s to indicate that they have not beeninitialized. The#+include “vc++.h” is requiredby the system as this is the place where the type INT is given meaning, and where the overloaded operations which support the animation are declared. Any variable of type lNT will have assignments, comparisons, ‘and arithmetic operations. These operationshave the same behavior as the corresponding operations on ints, but will also result in theirdynamics being displayed.

void doit(int count) {’ struct sampleitem; int i; item.x = 1; item.y i 2; item.z = 3;

.

for (i = 0; i < count; i-H-) { data[i] = item; item.x = item.x * 2; item.y++; I

, ,

return; I To make this program suitable for use by the visualization system,we first decideto animatethe struct sample members x and y, and the parameter count and local variable i of the function doit. Then we change the declarations for x, y, count, and i from type int to type INT. In this way, we have specifiedwhich variables we want to seein action. The system can then compile and run the program

Figure 2 captures the screenas doit is testing the for loop condition, as is shown in the OPERATIONS pane. The value of i would have been seen flowing into tbis pane from its “home” location in LOCALS, and similarly count would have flowed from its home location in PARAMETERS. The value of the expression“i < count” is also shotiin to, be FALSE in the OPERATIONS pane. The array datain GLOBALS hasbeenscrolled so that the values of the struct data[2] are visible. This scrolling took ,place automatically as the contents of data[2] were updated. The reader is encouragedto imagine the pictures of the memory cells moving from place to place on the screenas operations are executed. For instance, the 4 stored in data[2].x would have moved from OPERATIONS into its final position in GLOBALS. It would have been generated in OPERATIONS from constantsand variablessuch as item.x which flowed from the LOCALS pane. Notice that in CALL STACK, doit is highlighted, indicating that it is currently executing. If desired,the student or instructor may examine code,local variables, and parameters of other functions on the call stack by pausing the execution of the program and clicking on the desiredfunction.

Figure 1 shows the initial appearance of the system window just as the function doit is being invoked in the main program. The main program appearsin the CODE pane. Note that the statement about to be executed (doit(3)) is highlighted. Four of the remaining panes show the variables we selectedfor animation. Theses are either GLOBALS, or in the HEAP, or LOCALS to the currently executing function, or PAMMETERS which have beenpassedto the currently executingfunction. The OPERATIONS pane is used to show and animate expressions as they are evaluatedand actual parameters beforethey are passedto the PARAMETERS pane of the current function. The actual parameters that appear in the OPERATIONS pane are shown moving from their “home” locations to the OPERATIONS pane when their “home” locations are visible.. Thus the constant 3 which appears as an actual parameterwould have been seen flowing from its “home” location in LOCALS into the

An AVL Tree Animation

273

..aJ-.d..

-.-....-,--.-.-

__-.

.-._

-.-

Suppose ,a, student wanted to understand the AM. insertion algorithm, or an instructor wanted to demonstrateits action. A standardC implementation of this algorithm is found in Korsh and Garrett [4]. Changes of int to INT (s,imilarto thoseabove) and also changes in some pointer declarationswould produce the program to be animated. .The cost to the student or instructor as demonstratedabove is minimal. He or she needsonly to decidewhich data storage units should becomeanimated and then changetheir type declarationsusing INT in place of int, PTR in place of type T. At present our implementation supportsints, and types derivedfrom ints using pointers, arrays,and structs.

Our goal was to createa system for animating standard code that would be totally automatic and require no changesbeyondtype declarations. We recognizethat the systemwill not be able to provide animations as tailored to a particular application as a custom program using more complex animation tools. However, we believe that it is evolving into a system which is clearly easy to use, and appearsto provide very effective animations of simple andcomplexdatastructuresand associatedalgorithms. ln preliminary demonstrations,the reaction of our students hasbeenextremely positive.

Figure 3 is a snapshotof the animation in progressafter the nodecontaining 30 has been inserted into the AVL tree in the HEAP pane. , Previously, functions search, createnode,and insertnode, respectively searchedfor the insertion point, createdthe node to hold 30, and insertedit in the proper place. The codeabout to be executedwill check for balance and perform appropriate rebalancing rotations if required. In this case, no rebalancing is needed. Notice that the GLOBAL pane is not displayed. This is becausewe .exetcised.theoption of closing it to make room for the entire tree to appear in HEAP. HaI we not done this, part of the tree would have been obscured,but could have been scrolled to if desired. At this point, the student or instructor couId examine any nodes of the tree in more detail by clicking on them. This would “open”, the, node and allow a graphical representationof the struct representingit to be seenand explored.

1. Price, B., Baecker,R., and Small, I. A Principled Taxonomy of SoftwareVisualization. Journal of Visual Languages and Computing 4 (1993), 21l-266 2. Naps, T.L., and Stenglem,J. Tools for Visual Exploration of Scopeand ParameterPassingin a ProgrammingLanguagesCourse SIGCSE Bulletin (March 1996),305-309 3. Stasko,J.T. Using Student Built Algorithm Animations asLearning Aids Proceedings of the

References

Twenty-eighth SIGCSE Technical Symposium on Computer Science Educafion (1997) 25-29 4. Korsh, J. and Garrett,L. Data Structures, Algorithms, and Program Style using C. PWS-Kent,

Boston, Mass. (1988). (AIso available on CD-ROM, Dr. DobbsEssentialBooks on Algorithms and Data Structures,1995)

We point out again that in a printed paperit is impossible to demonstratethe animated sequencethat, the system actually displays,, However, the user would have next seen sub-trees collapsing into their root nodes,, being moved to a “work area” above the tree, and expanded. Similarly, trees from the “work area” would be collapsed andmovedto the appropriatere-insertion sites in the tree andr-e-expanded. I 2’. _‘I ‘. Discussion 1 We have given a brief introduction :to the capabilities and use of our system. This ‘paper has not illustrated all featuresof its current implementation. We have omitted, for instance, discussing options that allow the studentor instructor to selectively disable the display of various functions and operators, or discussing the meaning of colors that appear in the panes. Disabling functions allows control of the amount of detail displayed. The color encodesthe type of objectsand other factors.

274

struct Mid t

scmple datap1: MinO

voidait &Yitmtr mr cam:

Figure I

p”doit(m cmt’ ‘,“i”; sap’c sta: 1tm.x =1: 1tm.y jtm.2

= 2: = 3: I

1'

J

daiarjl ;:g.;xg

= itm: Iten.x

*

2:

J ” raun:

r

‘il 275

I

1

blmrytreqltr ini fowid;

p, pr’eczp, Imt,

--iir&;;yqlue if

perJ105

- Id-ZnJ)

(last-=baJme R 01. .1 _ Iasi-=kuI-e = -1; ractputJlbal-c5(keyvnllle,

I else if (lost-=bolpxe = l l) last-+boImce = 0; rE5FtJJOtJlbOlUlc~(fOJ~. 1 else 1 q = Ins+Bleftptr: if lJwvnJ~ c T+PY) II (kw~lllfA.Imt.pl: else lr(kcyvnJ~~.61ast;bq,pJ; lost-=bnJrrur = 0; if fJndJmt m IUL) *pt 0 Just;

i

_

eke if (kegvalue predlat-Neftptr else

- pdloli = lost;

I Figure3

276