A New Model for Algorithm Animation Over the WWW James E. Bakery
Isabel F. Cruzz
Giuseppe Liottay
Roberto Tamassiay
February 5, 1996
Introduction Algorithm animation helps the end user to understand algorithms by following visually their stepby-step execution, a complex task if relying on the textual program alone. There is a strong educational component associated with algorithm animation that can be used by students individually or in class demonstrations [6, 8]. Algorithm animation is also a powerful software tool that can assist the algorithm designer in code debugging and in demonstrating a complex algorithm to a larger audience than merely specialists in the particular area of the algorithm. We propose a new model, called Mocha, for providing algorithm animation over the WorldWide Web. Mocha is a distributed model with a client-server architecture that optimally partitions the software components of a typical algorithm animation system and leverages the power of the Java language, an emerging standard for distributing interactive platform-independent multimedia applications across the Web. Our prototype (available at http://www.cs.brown.edu/people/jib/Mocha.html) demonstrates that algorithm animation with Mocha is as simple as Web sur ng. Namely, the user interacts with a hypertextual interface written in HTML, which is transferred over the Web to the user's machine together with the code for the interface. The ease of use of the interface and its availability on the Web makes possible wide access to algorithm animation for education and for algorithm dissemination. Two features of Mocha are particularly suited to such applications: its accessibility , i.e., users with limited computing resources can access animations of computationally expensive algorithms, and its capability for code protection , i.e., the end user does not have access to the algorithm encoding. Mocha also provides high levels of security and places a light communication load on the Internet. The user interface combines fast responsiveness and user friendliness with the powerful authoring capabilities of hypertext narratives.
Models of Algorithm Animation on the Internet
Following the event-driven approach advocated by Brown [2] and the conceptual framework pioneered by Stasko [7], we view algorithm animation as an event-driven system of communicating Research supported in part by the National Science Foundation under grant CCR{9423847, by the U.S. Army Research Oce under grants 34990{MA{MUR and DAAH04{93{0134, and by the N.A.T.O.-C.N.R. Advanced Fellowships Programme. y Department of Computer Science, Brown University, 115 Waterman Street, Providence, RI 02912{1910, USA.
fjib,gl,
[email protected]
Department of Electrical Engineering and Computer Science, Tufts University, 161 College Avenue, Medford, MA 02155, USA.
[email protected] z
1
processes: the algorithm augmented with annotations of interesting events, called algorithm operations, and the animation component that provides the multimedia visualization of the the algorithm operations. We further subdivide the animation component into the GUI, which handles the interaction with the user, and the animator, which maps algorithm operations and user requests into dynamic multimedia scenes. The X Window system provides a basic client-server mechanism for algorithm animation over the Internet, which we shall call the X model: an animation program running on a remote machine can interact with the X server on the local user's machine by opening there a window, sending graphic output and receiving the user's keyboard and mouse actions. While this mechanism is simple to implement, there are signi cant security problems associated with remote X sessions, and the communication load placed on the Internet is quite high. The arrival of the HotJava browser [1] and of the Java language [4] opens the possibility of embedding interactive applications in HTML documents, which are executed on the user machine after their code has been transferred. Therefore, the main drawbacks of the Java model are code protection and accessibility. Mocha overcomes the problems inherent in the X and the Java model. In the Mocha model, only the interface code is exported to the user machine, while the algorithm is executed on a server that runs on the provider's machine (see Fig. 1). We employ multithreading in the implementation of the GUI and animator to provide more responsive feedback to the user. Also, we use an object-oriented container/component software architecture that guarantees expandability. Finally, we have mediators that isolate the commonality between the interaction of the clients and servers and provide a high degree of interoperability. Table 1 compares the X model, the Java model, and the Mocha model with respect to ve quality criteria: security , code protection , authoring , communication load , and accessibility . In this table, a \++" means that the model of the corresponding row matches best the quality criterion of the column. In contrast, a \??" stands for failure on that criterion within the model. Intermediate scores like \+" and \?" are also possible. Notice the versatility of the Mocha model: for most criteria it is as good as the best of the other two models and never scores \?" in any other cases. Code Communication Security Protection Authoring Load Accessibility X model ?? ++ + ?? + Java model ++ ? + ++ ?? Mocha model ++ + ++ + + Table 1: Comparison of the three models for algorithm animation.
Animating Geometric Algorithms with Mocha
In our prototype, the user interacts with a hypertextual interface written in HTML, which is transferred over the Web to the user's machine together with the GUI and the Animator code from the Multimedia Documents/Code Server. The hypertextual interface is structured in various sections, each provided with \interactive gures." We provide two examples of such interactive gures. Suppose the user wants to animate the Delaunay triangulation algorithm (Fig. 2(a)). The user simply places the sites (with simple click/drag/drop mouse actions) on the canvas of the interactive gures. The GUI sends messages to the algorithm server about changes in the input, 2
GUI CODE
ANIMATION
LIBRARY
CODE WWW BROWSER
LIBRARY
USER 1
MM CODE LIBRARY
mm commands / events
GUI code / mm doc.
GUI algorithm input / control mm commands / events animation code / mm doc / algorithm operations
MM DOCS / CODE SERVER
ANIMATOR
ANNOTATED ALGORITHMS LIBRARY algorithm input / control
ALGORITHM SERVER
INTERNET
GUI code / mm doc. / animation code
WWW BROWSER
algorithm operations
USER N
mm commands / events
GUI code / mm doc.
GUI algorithm input / control
ANNOTATED
mm commands / events
ALGORITHMS
animation code / mm doc / algorithm operations
LIBRARY
ANIMATOR algorithm input / control
ALGORITHM SERVER algorithm operations
http / Animation Protocol
ALGORITHM EXECUTION
sockets
GUI ALGORITHM ANIMATION
TCP/IP
Figure 1: Algorithm animation in the Mocha model.
3
(a)
(b)
Figure 2: (a) The Voronoi diagram and Delaunay triangulation of a set of points. (b) Proximity graph animation. such as addition, deletion, or translation of sites. The algorithms server updates the Delaunay triangulation and sends the corresponding events to the animator. The animator then updates the multimedia scenes associated with the visualization of the new Delaunay triangulation. In the proximity graph animation (see Fig. 2(b)), an advanced interaction technique allows the user to de ne the value of the parameter , which de nes the -skeleton of a set of points, by sliding a cursor along a logarithmic-scale ruler. Certain values of , of special interest in the theory of proximity graphs are explicitly highlighted below the ruler and cause the cursor to \snap" when dragged near them. We are currently working on the following extensions of Mocha: Development of new animation services beyond computational geometry, e.g., graph algorithms, sorting, searching, and parallel computation. Improvement of the user interface, e.g., the introduction of sound, as in [5]. Support for 3D animations, speci cally for 3D graph drawing (e.g., [3]). Extension of the Mocha model to the more general domain of software demonstrations over the WWW.
4
References [1] HotJava, 1995. http://www.javasoft.com/hotjava.html. [2] M. H. Brown. Algorithm Animation. MIT Press, Cambridge, 1988. [3] I. F. Cruz and J. P. Twarog. 3D Graph Drawing with Simulated Annealing. In Proceedings of Graph Drawing '95, Lecture Notes in Computer Science, Passau, Germany, October 1995. Springer Verlag. [4] J. Gosling and H. McGilton. The Java language environment: a white paper, 1995. http://java.sun.com/whitePaper/javawhitepaper 1.html. [5] S. Karsenty, J. A. Landay, and C. Weikart. Inferring Graphical Constraints with Rockit. Technical Report 17, Digital, Paris Research Laboratory, March 1992. [6] J. Stasko, A. Badre, and C. Lewis. Do algorithm animations assist learning? an empirical study and analysis. In Proc. ACM Conf. on Human Factors in Computing Systems, pages 61{66, 1993. [7] J. T. Stasko. Tango: a framework and system for algorithm animation. IEEE Computer, 23(9):27{39, 1990. http://www.cc.gatech.edu/gvu/softviz/algoanim/xtango.html. [8] A. van Dam. The electronic classroom: Workstations for teaching. Int. J. of Man-Machine Studies, 21(4):353{363, 1984.
5
