A Framework for the Automatic Generation of

A Framework for the Automatic Generation of Algorithm Animations Based on Design Techniques Luis Fernández-Muñoz1, Antonio Pérez-Carrasco2, J. Ángel Velázquez-Iturbide2, and Jaime Urquiza-Fuentes2 1 Departamento de Lenguajes, Proyectos y Sistemas Informáticos, Escuela Universitaria de Informática, Universidad Politécnica de Madrid, Ctra. Valencia km 7, 28031 Madrid, Spain [email protected] 2 Departamento de Lenguajes y Sistemas Informáticos, Universidad Rey Juan Carlos, C/ Tulipán s/n, 28933 Móstoles, Madrid, Spain {angel.velazquez,jaime.urquiza}@urjc.es

Abstract. A novel approach to algorithm animation consists in displaying algorithms based on their design technique. In this paper, we describe a framework to generate these animations without effort from the instructor. We describe a preprocessing phase that modifies the source code of the algorithm to visualize. When the transformed code is executed, a trace is stored and then used to generate an animation. We also describe the architecture of the animation subsystem. Finally, we outline the main features of SRec, a system that we have built to illustrate the feasibility of this approach. It is aimed at visualizing multiple views of recursion, namely traces, the control stack and activation trees. Keywords: Computer science education, recursion, program visualization, program animation, automation.

1 Introduction Algorithm animations have been used in education for the last 25 years. However, they are not in the mainstream of educational software because of two main reasons: − Lack of evidence of educational effectiveness [1], and − Heavy workload posed on animation constructors (typically, educators) [2]. Several approaches have been adopted to reduce construction effort [3]. One of them consists in automatically generating visualizations tightly coupled to source code (i.e. program visualizations). When an algorithm is executed, visualizations of its successive states are generated as a side effect by associating graphical operations to selected operations in the code. An animation consists in playing the visualizations gathered using interaction controls. We have applied a variant of this approach to the functional programming paradigm [4], and there is evidence of its educational effectiveness [5]. E. Duval, R. Klamma, and M. Wolpers (Eds.): EC-TEL 2007, LNCS 4753, pp. 475–480, 2007. © Springer-Verlag Berlin Heidelberg 2007

476

L. Fernández-Muñoz et al.

In this paper, we present an implementation framework of this approach to animate algorithm design techniques [6]. In the second section, we describe several phases of processing and translation of the algorithm source code. In section 3 we describe the architecture of the animation subsystem. Section 4 introduces SRec, a system developed to check the feasibility of our approach. It is aimed at visualizing recursion, which is often used in algorithm design techniques. The fifth section explains the transformations performed on the source code to visualize recursion. In section 6 we discuss related work. Finally, we summarize our conclusions and future work.

2 Preprocessing of Source Code A key decision for an automatic animation system is to identify those changes in the program state that must produce a change in the visualization. In the WinHIPE programming environment [4], we selected every expression generated during an evaluation. We then modified the interpreter to graphically visualize them. We propose here a different approach. Instead of modifying the language processor and not modifying the source code to visualize, we modify the source code so that the language processor remains unchanged. Consequently, we need a preprocessing phase to modify the original source code at selected events with visualization actions. The preprocessing phase is performed using XML as an intermediate language. It is summarized in Fig. 1 and is as follows. Firstly, the Java code of the algorithm is transformed into its equivalent representation in XML. Secondly, the XML representation is converted into a DOM hierarchical structure. Thirdly, the resulting representation of the algorithm is further transformed by inserting new nodes in the DOM representation. These nodes are statements that report changes of state that must produce a change of visualization. A fourth step transforms the manipulated hierarchical structure back into a modified Java code, containing the inserted statements embedded into the algorithm. Finally, the Java code is compiled. The resulting file will be executed by the Java virtual machine once the user has entered its arguments. As a result of its execution, a trace will be created. The animation subsystem, described in Section 3, uses the trace to create the visualizations that will form the animation.

.java

.xml

.class

.java DOM tree .class

The application requests method and arguments for execution and visualization

Fig. 1. Preprocessing phase of the algorithm source code written in Java

A Framework for the Automatic Generation of Algorithm Animations

477

3 Architecture of the Animation Subsystem The architecture of the animation subsystem is generic and reusable. Its structure is independent from any specific algorithm design technique. However, some parts will be implemented differently for each design technique. It is shown in Fig. 2.

Visualizer

WindowFactory Window

WindowPanel

Controller

TreeWindow

Trace

Model

InductionWindow

View

CellFactory Cell

ActivationRecord

State

NodeCell

ArrowCell

Fig. 2. Diagram of the animation architecture

The application is based on the Model-View-Controller architecture [7]. The model contains the data to visualize. For the recursion system described below, a composite pattern is used. Execution data are stored as a trace of activation records. Each record consists of two states, respectively storing the values of arguments and the result. The view is a panel to display a particular visualization. The controller consists in a factory pattern that supports different kinds of visualizations. All of the visualizations are handled from the main window panel of the application.

4 SRec, a System with Multiple Views for Recursion Animation The framework we have described should be put into practice in order to check its feasibility. Therefore, we developed SRec, a system to animate recursion using multiple views: traces, the control stack, and activation trees. Fig. 3 shows a snapshot of SRec for the 6th number of the Fibonacci series. The file source code is displayed in the left top panel. The other panels display the three views: traces at the left bottom panel, the control stack at the central panel, and an activation tree at the rightmost panel. Animation controls are placed at the right top corner of the main window. They are similar to VCR controls, allowing forward/backward, automatic/manual animation.

478


Fig. 3. A snapshot of SRec animating Fibonacci numbers

The user generates an animation from a Java file. After entering the file and the method names, the source code is preprocessed, as explained in section 2. On entering parameter values, the algorithm is executed and the trace is generated. Animations may also be stored in or loaded from disk for convenience of the instructor. Most graphical features can be customized. More importantly, each node of the activation tree may contain either one or several of the arguments, the result, or both. Furthermore, historic information (i.e. finished calls) may be colored in the same way, attenuated or omitted.

5 Modification of Source Code of Recursive Algorithms We describe in this section the preprocessing necessary to visualize recursion. Statements are inserted to record the state changes that must have a visible effect over the display, i.e. a recursive call entry or exit. For instance, consider a class containing an algorithm to compute the Fibonacci series. The Java class generated follows, where the statements inserted are bolded. The first block of statements inserts the arguments of the method invocation into the trace. The second block of statements does similarly for the result of any call. All of this information is stored in a lineal data structure, implemented in the Trace class. The Singleton static method assures that a single instance of the Trace class exists during the execution of an algorithm. Every set of arguments or every result is inserted in the trace as a new state (i.e. a variable-length array of values). The ugly identifiers for variables pppppp01 and rrrrrr01 refer respectively to ‘parameters’ and ‘result’, so that it is unlikely that a programmer will use the same identifier in his/her algorithm. class Fibbonaci { public static int fib (int n) {

A Framework for the Automatic Generation of Algorithm Animations

479

Object pppppp01[] = new Object[1]; pppppp01[0]=n; Trace.singleton().addInput(new State(pppppp01)); int result = 0; if (n==1) result = 1; else if (n==2) result = 1; else result = fib(n-1)+fib(n-2); Object rrrrrr01[] = new Object[1]; rrrrrr01[0] = result; Trace.singleton().addOutput(new State(rrrrrr01)); return result; } }

6 Related Work There are few descriptions of the architecture of animation systems based on design patterns. A design pattern has been proposed for visualizing objects of arbitrary complexity [8]. It also uses the factory pattern to represent visualization elements. An observer architecture has been proposed [9] that mirrors the syntactic structure of program elements with a parallel structure of visualization elements. Both works address the architecture of object visualization, but not the application architecture. Several systems have been designed to assist in the learning of recursion via visualization: Recursion Animator [10], EROSI [11], ETV [12], the Java Function Visualizer [13] and SimRECUR [14]. Some systems support multiple views of recursion, but none supports activation trees.

7 Conclusions and Future Work We have described a framework to generate, without effort from the instructor, program animations. We described a preprocessing phase that extends the Java source code of the algorithm to visualize by inserting statements. When this transformed Java code is executed, these inserted statements report relevant changes of the display to a trace. The animation of the algorithm is generated by interpreting the trace. We have also described the architecture of the animation subsystem in terms of design patterns. We have introduced SRec, a system that we have built to illustrate the feasibility of this approach. It is aimed at visualizing recursion, by means of multiple views: traces, the control stack and activation trees. We described its main features and the particular statements that SRec inserts in the algorithm code during preprocessing. We plan to continue this work in several ways. In the near future, a release of SRec will be delivered. We will evaluate it in the classroom to check its educational effectiveness. Finally, work to visualize algorithm design techniques will be resumed. In particular, divide-and-conquer should be available after minor changes [8].

480


Acknowledgments. This work was supported by projects TIN2004-07568 of the Spanish Ministry of Education and Science and S-0505/DPI/0235 of the Autonomous Region of Madrid.

References 1. Naps, T., et al.: Exploring the role of visualization and engagement in computer science education. ACM SIGCSE Bulletin 35(2), 131–152 (2003) 2. Naps, T., et al.: Evaluating the educational impact of visualization. ACM SIGCSE Bulletin 35(4), 124–136 (2003) 3. Ihantola, P., Karavirta, V., Korhonen, A., Nikander, J.: Taxonomy of effortless creation of algorithm visualization. In: Proc. 2005 International Workshop on Computing Education Research, pp. 123–133. ACM Press, New York (2005) 4. Velázquez-Iturbide, J.Á., Pareja-Flores, C., Urquiza-Fuentes, J.: An approach to effortless construction of program animations. Computers & Education (in press) 5. Urquiza-Fuentes, J., Velázquez Iturbide, J.Á.: An evaluation of the effortless approach to build algorithm animations with WinHIPE. In: Proc. Fourth Program Visualization Workshop, University of Florence, Italy, pp. 29–33 (2006) 6. Fernández-Muñoz, L., Velázquez-Iturbide, J.Á.: A study of visualizations for algorithm design techniques. In: Proc. VII International Conf. Human-Computer Interaction, Universidad de Castilla-La Mancha, Spain, pp. 315–324 (In Spanish) (2006) 7. Gamma, E., Helm, R., Johnson, R., Vlissides, J.: Design Patterns, Elements of Reusable Object-Oriented Software. Addison-Wesley, Reading (1995) 8. Korhonen, A., Malmi, L., Saikkonen, R.: Design pattern for algorithm animation and simulation. In: Proc. First Program Visualization Workshop, pp. 89–100. University of Joensuu, Finland (2000) 9. Kumar, A.N., Kasabov, S.: Observer architecture of program visualization. In: Proc. Fourth Program Visualization Workshop, pp. 17–22. University of Florence, Italy (2006) 10. Wilcocks, D., Sanders, I.: Animating recursion as an aid to instruction. Computers & Education 23(3), 221–226 (1994) 11. Dershem, H.L., Parker, D.E., Weinhold, R.: A Java function visualizer. Journal of Computing in Small Colleges 15(1), 220–230 (1999) 12. George, C.E.: EROSI – Visualizing recursion and discovering new errors. In: Proc. 31st SIGCSE Technical Symp. on Computer Science Education, pp. 305–309. ACM Press, New York (2000) 13. Terada, M.: ETV: A program trace player for students. In: Proc. 10th Annual Conference on Innovation and Technology in Computer Science Education, pp. 118–122. ACM Press, New York (2005) 14. Wu, C.-C., Lin, J.M.-C., Hsu, I.Y-W.: Closed laboratories using SimLIST and SimRECUR. Computers & Education 28(1), 55–64 (1997)