registration files, as ANIMALSCRIPT will always use the first .... ANIMALSCRIPT provides full array support for both vertical .... 31st SIGCSE Technical Sym-.
Page 13 .... Web: How to Program, Ed. Pearson International. Edition ! http://www.
w3.org/ ! www.deitel.com/books/iw3htp4 (per il codice di esempio degli esercizi)
Jul 28, 2000 - of business information through the Web using the 'digital' language of business called the ... Next, the paper introduces the basic concepts of.
LIGO Laboratory, California Institute of Technology 18-34, Pasadena, CA ... The Extensible Scientific Interchange Language (XSIL) is designed to represent.
compliance among SGML software packages [2]. ... XML parser is a software module that reads documents and provides access to their .... help understanding the input. .... [16] XMLJ News Desk, Journal Readers Choice Award, http://xml.sys-.
European Journal of Business and Social Sciences, Vol. 3, No. 4 , pp 56-66, July 2014. P.P. 56 - 66. URL: http://www.ejbss.com/recent.aspx. ISSN: 2235 -767X.
leading national chains by exploiting the advantages of e-commerce. .... company's Web data transfer, adoption of XML technology enterprise-wide. .... voice files to deliver information through wireless phones to its clients as reported by.
FLBC is based on speech act theory that makes a distinction between the .... such as Deliver (a Transport event), Pay (a Transfer event), Day, Month, City, etc. The ... For example, a product may only be called 'chocolate' if it contains at least a.
Stephen Rochefort and Veronica Dahl. Logic and .... defines the word john as a masculine and singular ... Consider the noun phrase "the review that John saw".
Nov 3, 2010 - Extensible Business Reporting Language (XBRL) is an XML-based ..... typically represented as structured da
HyperText Markup Language (HTML), along with ... promises to do for information what HTML .... ATTLIST requestdate timezone (gst | pst | est | gmt) "gst">.
Jul 4, 2011 - Flash. Forced. Flash. Suppressed. Flash. Slow. Flash. Redeyeslow. NIGHT. Movie ...... named GENIUS and inspired by the user-centred design.
JPG, PNG, Photoshop PSD, and QuickTime videos. Implementation The ..... For visualization and animation, we describe CSS, SVG, and SMIL, in order to find ...... format, HTML, or text. ... transform the different elements in the XML document.
HELSINKI UNIVERSITY OF TECHNOLOGY Department of Computer Science and Engineering Laboratory of Information Processing Science
Ville Karavirta
Xaal - Extensible Algorithm Animation Language
Master’s Thesis submitted in partial fulfillment of the requirements for the degree of Master of Science in Technology. Espoo, November 16, 2013
Supervisor:
Professor Lauri Malmi
Instructor:
Ari Korhonen, D.Sc. (Tech)
HELSINKI UNIVERSITY OF TECHNOLOGY
ABSTRACT OF THE MASTER’S THESIS
Department of Automation and Systems Technology Author: Ville Karavirta
Date: 29.11.2005 Number of pages: 92
Name of the thesis: Xaal - Extensible Algorithm Animation Language Professorship: Software Technology
Code: T-106
Supervisor: Professor Lauri Malmi Instructor: D.Sc. (Tech) Ari Korhonen
Algorithm visualization aims to aid the human understanding of a high-level representation of a piece of code. Algorithm animation (AA) is a dynamic algorithm visualization where the dynamic behavior can range from a series of static pictures to an animation requiring interaction from the user. Until now, many systems supporting the usage of algorithm animation have been developed. These systems all provide different means to create the animations. Data exchange between the different systems would allow the usage of different tools in different phases of the AA production. However, up to the present the data exchange possibilities have been minimal. In this work, we survey a number of algorithm animation systems and the algorithm animation languages they use to describe the animations. We concentrate on systems targeted for educational use. Based on this analysis, we specify a taxonomy to evaluate algorithm animation languages. We then use the taxonomy to combine the required features of a language that can be used as an intermediate language when exchanging data between algorithm animation systems. Based on this synthesis we define an eXtensible Algorithm Animation Language, Xaal. In addition, we introduce a prototype implementation of a set of tools that enables us to exchange data between various AA systems. Finally, we evaluate the new language based on the taxonomy of the algorithm animation languages and the prototype implementation.
Ty¨on valvoja: Professori Lauri Malmi Ty¨on ohjaaja: TkT Ari Korhonen
Algoritmien havainnollistamisella pyrit¨a¨an helpottamaan ihmist¨a ymm¨art¨am¨a¨an korkean tason esityst¨ a ohjelmakoodista. Algoritmianimaatio on puolestaan dynaamista algoritmien havainnollistamista. Dynaaminen luonne voi vaihdella kuvasarjasta k¨aytt¨aj¨an vuorovaikutusta vaativaan animaation. Algoritmianimaation k¨ aytt¨ o¨ on on kehitetty useita j¨arjestelmi¨a vuosien aikana. J¨arjestelm¨ at tarjoavat erilaisia keinoja animaatioiden luomiseen. Tiedonvaihto j¨arjestelmien v¨ alill¨ a mahdollistaisi useiden j¨arjestelmien k¨ayt¨on algoritmianimaatioita tuotettaessa. Kuitenkaan t¨ah¨an p¨aiv¨aa¨n menness¨a algoritmianimaatioiden siirto j¨arjestelm¨ ast¨ a toiseen ei ole ollut mahdollista. T¨ass¨ a ty¨ oss¨ a on tarkasteltu useita algoritmianimaatioj¨arjestelmi¨a ja niiden sis¨alt¨ami¨ a tiedostomuotoja algoritmianimaatioiden m¨a¨arittelemiseen. Ty¨oss¨a keskityt¨a¨an opetusk¨ aytt¨ o¨ on kehitettyihin j¨ arjestelmiin. T¨am¨an tarkastelun pohjalta m¨a¨arittelemme taksonomian algoritmianimaatiokielten arvioimiseen. T¨at¨ a taksonomiaa k¨ aytet¨ a¨ an hy¨odyksi m¨a¨aritelt¨aess¨a ominaisuuksia, joita vaaditaan algoritmianimaatioj¨ arjestelmien v¨aliseen tiedonvaihtoon soveltuvalta kielelt¨a. T¨alt¨a pohjalta m¨ a¨ arittelemme laajennettavan algoritmianimaatiokielen (Xaal eXtensible Algorithm Animation Language). Lis¨aksi esittelemme kokeellisen toteutuksen joukosta ty¨okaluja, joka mahdollistaa tiedonvaihdon eri algoritmianimaatioj¨arjestelmien v¨alill¨ a. Lopuksi arvioimme m¨ a¨ aritellyn kielen taksonomian ja kokeellisen toteutuksen perusteella.
Acknowledgements This Master’s thesis has been done for the Software Visualization group in Laboratory of Information Processing during the year 2005. I am grateful to my supervisor Lauri Malmi and instructor Ari Korhonen for providing the facilities to do this work. Their input and feedback to the work during the nine months has been highly valuable. An essential part of this work is the Matrix framework and I would like to thank the people who have been involved in developing Matrix: Ari Korhonen, Jan L¨ onnberg, Jussi Nikander, Otto Sepp¨ al¨a, Kimmo St˚ alnacke, Petri Tenhunen, and all the former members. I would also like to thank Linda Pero for the support and understanding towards writing this theses. And especially for constantly reminding me that there is life besides the thesis. My gratitude also goes to the participants of the ITiCSE XML Working Group, Guido R¨oßling, Thomas Naps, Peter Brusilovsky, John English, Duane Jarc, Chuck Leska, Myles McNally, Andr´es Moreno, Rocky Ross, and Jaime Urquiza-Fuentes, for the discussions and ideas during the intensive five-day spell in Portugal. I would especially want to thank Tom and Guido for giving me the chance to be part of the group. Finally, I wish to thank my family for the tremendous support over the years.
Introduction Due to the rapidly increased performance of personal computers, software products have grown to be more and more complicated. Developers need to understand very large parts of the software and users must learn how to use software with countless number of features. To help them to achieve this, a research field called Software Visualization (SV) has been discovered. Software Visualization usually is understood to mean the use of computer graphics to help to understand and effectively use computer software. Software Visualization is a wide field including several topics as illustrated in Figure 1.1. In general, SV can be divided in algorithm visualization and program visualization. Program visualization is the usage of various techniques to aid human understanding of computer programs. Algorithm visualization is visualizing a piece of software on a higher abstraction level than on the source code level. In software visualization, visualization is to be understood in a more general way than only using graphics. It includes, for example, the use of sound to visualize a program. [42] Software Visualization can be applied to and benefited from on many different areas. Software developers can get insights on the class or package structures of an objectoriented software or detailed information through visual debuggers. In addition, they can test their software using visual testing [35]. On the other hand, algorithm developers and researchers can get a better view of the algorithms through visualizations. Educators can use visualizations to help students understand and learn new concepts in software development and algorithmics. In this thesis, our main focus is on the educational use of software visualizations, but the ideas can be applied to different areas as well.
Figure 1.1: Terms of Software Visualization in literature [42]. Algorithm visualization has been used in education for a few decades with the goal of helping students to learn the difficult concepts of data structures and algorithms. However, there is still speculation about its effectiveness in learning [24]. Recent studies have shown that to be educationally effective (i.e. aid students’ learning) algorithm visualizations need to be more than passive animation, they must require users to interact with the animation [40]. To this need, different tools supporting various ways of interaction have been developed. This interaction can be, for example, requiring the user to respond to multiple-choice questions during the animation or to construct an algorithm animation using a visualization.
1.1
Previous Work
In the Laboratory of Information Processing Science, the research in the field of SV started with the problem of manually grading exercises on the Data structures and algorithms course. With over 500 students participating on the course annually, an idea of an automatic assessment system was raised in early 1990’s. The first system developed was TRAKLA [25] that automatically assessed students solutions to algorithmic exercises. The answers had to be submitted to the system in a predefined textual format by email.
CHAPTER 1. INTRODUCTION
3
The first step in the field of SV was taken in 1997 when a graphical front-end for TRAKLA called TRAKLA-EDIT [32] was developed. TRAKLA-EDIT allowed students to graphically solve the exercises and the system generated and sent the solutions by email. This system had also several limitations. First, there was no connection between a data structure and the corresponding visualization. Thus TRAKLA-EDIT was more like a drawing tool than a learning environment for data structures and algorithms. Second, creating new exercises for the system was time consuming. To solve these problems, the development of new system, Matrix [33], was initiated in 1999. Matrix introduced a new concept, visual algorithm simulation, that allows direct manipulation of underlying data structures through a graphical representation. Matrix is a Java-based framework for developing applications that use algorithm simulation and visualization. Based on Matrix, a follower for TRAKLA-EDIT named TRAKLA2 was introduced in 2003 [36]. TRAKLA2 is used to provide visual algorithm simulation exercises, where the student simulates the workings of actual algorithms. These exercises are automatically assessed and students get the feedback immediately. There was also a need for a tool targeted for computer science teachers to help them demonstrate the concepts of data structures and algorithms on lectures. To fill this need, another Matrix-based application, MatrixPro [27], was developed. MatrixPro was designed to support on-the-fly demonstrations without the need to prepare all the examples before lectures. The most important feature supporting this was the automatic animation of several ready made data structures.
1.2 1.2.1
Objectives Algorithm Animation Language
Currently, there are several systems (for example [2, 15, 23, 27, 37, 45, 48]) available for algorithm animation creation and usage in teaching. They all provide different kinds of tools and approaches to the creation of animations. In addition, for students using these animations, the systems provide different kinds of interaction that is a vital part in the educational effectiveness of algorithm animation. The problem is, however, that each of these systems has its own internal format for storing the animations and no data exchange between the systems is possible. Thus, when a
CHAPTER 1. INTRODUCTION
4
teacher needs, for example, some specific type of interaction, he or she has to create a new animation with the system supporting the required interaction. Thus, there is a need for a common language that could be used to exchange animations between AA systems. These systems support different styles of student interaction. Exchanging information between tools would then allow teachers to use the tool most suitable for the use case at hand and a common collection of ready made algorithm animations. Such language would also allow the integration of several tools in the animation production process. The ability to use different tools for different tasks in creating algorithm animations could lower the effort needed, improve the final animations, and make algorithm animations more appealing to a wider group of computer science practitioners. The first steps toward a common language for different AA systems have already been taken. In The Conference on Innovation and Technology in Computer Science 2005 a working group convened to come up with XML specifications to support algorithm animation [41]. For more discussion, see Section 1.3. As said, there are different approaches to the usage of an algorithm animation language. First, some systems might use such a language as an internal representation that is never shown to the user. Second, the language might be intended to be written by hand and then animated by a system. A combination of these is an approach where the language can be written by hand or generated with the help of a system. These different approaches cause problems when trying to exchange data between systems, and must be taken into account when defining a new language.
1.2.2
Algorithm Animation Tool Integration
In order for the language to be useful, there must exist tools to support the language defined. Thus, a second aim of this work is to implement a prototype of an algorithm animation tool that can import and export the new language. Moreover, we will explore ways to add support for the new language to some of the existing AA systems. This can be achieved, for example, by transforming the new language to formats supported by the existing systems and vice versa.
1.2.3
Summary
The main objectives of this thesis are to define a new language for describing algorithm animations and to develop a new algorithm animation tool supporting this
CHAPTER 1. INTRODUCTION
5
language. The goal is to support data exchange between algorithm animation tools by allowing the new tool to import/export formats used in other algorithm animation tools. In the following we will describe these goals in more detail.
1.3
ITiCSE Working Group
In The Conference on Innovation and Technology in Computer Science 2005 a working group convened to come up with XML specifications to support algorithm animation. The group defined a set of XML specifications and wrote a report that introduces them [41]. The specifications are for: • high level objects (often, data structures) • graphical primitives and transformations on them • narrations (text, graphics, and audio) related to the visualization • questions related to the visualization • metadata describing the different resources (questions, animation, etc) The report also provides guidance on how to use the specifications in existing visualization systems. This will be discussed in Chapter 6. In this thesis, we have adopted some of the ready defined and suitable parts of the WG specifications, in order to support and aid the international goals of a uniform algorithm animation specifications. However, some of the working group specifications were not specifically defined or are too complex or out of the scope of this thesis. These specifications are not used as part of the new language.
1.4
Structure of This Thesis
The structure of this thesis is as follows. Chapter 2 introduces previous work done on this field of research. It introduces common characteristics of software visualization systems and describes some of the existing algorithm animation tools and the internal file formats they use. Chapter 3 will define a taxonomy of algorithm animation languages based on the survey in Chapter 2. Chapter 4 gives some basic information about XML technologies. Chapter 5 defines a new algorithm animation language and Chapter 6 discusses the prototype implementation of the language. The new language will be evaluated in Chapter 7 based on the taxonomy specified in Chapter 3. The chapter also evaluates the prototype tool implementation. Finally, Chapter 8 makes some conclusions and discusses future directions.
Chapter 2
Related Work The field of algorithm animation (AA) has been researched since the late 1960’s and a lot of work has been carried out. This chapter will first define some terms often used in this thesis. Then we will explore the characteristics of current AA systems. Later in this chapter we will describe some existing AA systems concentrating on systems that include some language to define the algorithm animation. Finally, we will research the algorithm animation languages as well as languages developed for data exchange and visualization and animation.
2.1
Definitions of Concepts
Price et al. [42] have defined software visualization “as the use of the crafts of typography, graphic design, animation, and cinematography with modern humancomputer interaction technology to facilitate both the human understanding and effective use of computer software.” SV can be divided into two separate fields: algorithm visualization and program visualization (see Figure 1.1 on page 2). Program visualization is the use of visualization to enhance the human understanding of computer programs. Algorithm visualization (AV) is the visualization of a high-level representation of a piece of code. AV can be further divided into static algorithm visualization and algorithm animation (AA). Algorithm animation is a dynamic algorithm visualization. The dynamic behavior can range from a series of static pictures to an animation requiring interaction from the user. It is difficult to choose a proper tool from the vast amount of different SV tools supporting different features, target scope, and interaction techniques. To help
6
CHAPTER 2. RELATED WORK
7
this process, taxonomies categorizing SV tools have been defined. One of the most well-known ways to categorize and evaluate Software Visualization systems is the Taxonomy of Software Visualization defined by Price et al. [42]. The taxonomy defines a structure of characteristics of SV systems that consists of six categories. These categories with the questions that they should answer are the following. • scope — “What is the range of programs that the SV system may take as input for visualization?” • content — “What subset of information about the software is visualized by the SV system?” • form — “What are the characteristics of the output of the system (the visualization?” • method — “How is the visualization specified?” • interaction — “How does the user of the SV system interact with and control it?” • effectiveness — “How well does the system communicate information to the user?” These categories and their meaning in the SV production process are illustrated in Figure 2.1. They will be more thoroughly explained in the next section. Figure 2.1 also shows the four different roles of persons who take advantage of software visualization. Programmer is a person who develops the algorithm or program without considering whether or not it is (going to be) visualized. SV software developer is a person who designs and implements software for SV. A person creating the visualization is called visualizer. Finally, the person using the visualization is addressed as user. In this thesis, we use this same naming convention. [42] Throughout this thesis we will talk about algorithm animation language (or simply language). With this term we mean a textual representation describing an algorithm animation.
2.2 2.2.1
Algorithm Animation History of Algorithm Animation
The research on algorithm animation is often considered to have begun from the Sorting out Sorting video [6] by Ronald M. Baecker in 1981. It was a 30 minutes
Commands/gestures from user to interact with visualization
SV System Developer
Software Visualization Software
User iv
ect
ff :E
Visualization of Software
ss ene
F
C: Form
Figure 2.1: SV production process [42]. long video animating the behavior of nine different sorting algorithms. However, the first animations were created in 1966 by Ken Knowlton, who made a movie about list processing using the L6 programming language [30]. More of the early work was done by Baecker who in 1975 presented two systems that made it ”possible for an instructor to produce short quick-and-dirty single-concept film clips with only hours of effort” [5]. The field has evolved a lot since the first videos and systems were introduced. The first well-known computerized system was BALSA (Brown ALgorithm Simulator and Animator) [13]. BALSA is an interactive algorithm animation framework that has a support for multiple dynamic views of an algorithm and the data structures associated to it. Another of the most recognized systems of the early years of algorithm animation was TANGO (Transition-based ANimation GeneratiOn) [49]. TANGO is an algorithm animation system that introduced the path-transition paradigm and supported smooth animation. Since then, numerous algorithm animation systems have been developed [2, 15, 23, 27, 37, 45, 48].
CHAPTER 2. RELATED WORK
9
Currently, the main focus of the research is on engaging the student’s with the tools and lowering the effort needed to create new animations [28, 40]. The current tools are thought to require too much time and effort to be useful [24], although compared to the Sorting out Sorting video that took three years to make [7], they are quite effortless to use.
2.2.2
Characteristics of Algorithm Animation Tools
In this section we will consider the characteristics and functionality of current algorithm animation tools by examining the categories of the Software Visualization taxonomy [42]. We will not faithfully follow the taxonomy since it is already somewhat outdated and was intended to be extended and updated. However, the main categories are the same but with some parts left out or updated based on their relevance and research done after the taxonomy was published. Category Scope The category Scope is defined in the taxonomy to describe the range of programs that the system can visualize. It has two subcategories: Generality and Scalability. Scalability is used to measure how well the system scales up to visualize large examples. Generality describes how general a range of programs the system can display. Generality also includes subcategories such as operating system and hardware. These subcategories are out of date, since today a tool must be easy to obtain and install and platform independent [43]. If these criteria are not met, it is highly unlikely that the tool will gain wide audience. All in all, the category Scope is not that interesting from the point of view of an algorithm animation language. Category Content The Content category describes how much information about the software is visualized by the system. Most of the subcategories are related to program visualization that is not considered here. The only interesting subcategory is Algorithm. This subcategory describes the degree that the system visualizes the high-level algorithms. This is divided in two: instructions and data. Instructions describes the degree to what the system can visualize code instructions in the algorithm. This is often called code visualization. It is a mapping between the changes in the visualization and the source code. This can be done in various ways, for example, by using simple code lines, several codes on different abstraction
CHAPTER 2. RELATED WORK
10
levels, or a graphical representation of the code [14]. In addition to highlighting the current line, the code visualization can show things such as executed lines of codes (distinguished from the ones not executed) and the lines executed just before the current line [34]. Data describes the capability of the system to visualize high-level data structures in the algorithm. In algorithm animation, the lower extreme here is a system that uses only graphical primitives to describe the data structures. The other extreme is a system that visualizes only high level data structures. These different approaches have both benefits and drawbacks. By using graphical primitives, the system can visualize almost any kind of structures, but the creation of such animations can require quite a lot of effort. On the other hand, systems using data structures can provide an effortless way to create the animation, but are often limited to the set of structures supported by the system. Category Form The category Form describes the characteristics of the created visualization of the system. The subcategories are Medium, Presentation Style, Granularity, Multiple Views, and Program Synchronization. Medium describes the target medium of the visualization system. This can be, for example, screen or paper. Currently, the focus is on web deployment [29]. This adds requirements for AA tools that must either support suitable export-formats or be implemented as Java applets. There is a wide range of web-based systems ´ [39], JCAT [38], and available today, for example, JAWAA [2], Jeliot [21], JHAVE JSAMBA [48]. The Presentation Style category describes the general appearance of the visualization. Algorithm visualization and animation can apply several different styles. 2D graphics is the most used style to visualize algorithms. An option is 3D graphics that can be used to express additional information about data, add another view to the same data, or visualize the history of a two-dimensional view [12]. For example, 3D graphics can be used in JCAT [38] and also POLKA [52] has been extended to support 3D animations. JCAT is a Java-based system for developing and viewing web-based collaborative active textbooks on algorithms. POLKA is an algorithm animation system that is built to animate parallel programs. A subcategory of Presentation Style is Sound. Auralization is a technique that uses sounds and melodies to describe the workings of an algorithm or a program.
CHAPTER 2. RELATED WORK
11
This can be done, for example, by mapping program data and events to certain sounds. There are several reasons to use auralization [19]: humans can process aural information without actively listening, we have the ability to detect patterns in sound and to detect omissions in an aural pattern, sound and music can naturally portray parallel events, and the different sense used makes it possible to focus on two “views” at the same time. Voice is also a good way to keep the user interested in the animation [20]. Although sound was used already in the Sorting out Sorting video [7], one of the pioneers using sound was Zeus [11]. Another example of a system using auralization is CAITLIN [55]. CAITLIN allows the specification of an auralization for Pascal code constructs. It has been used to aid novice programmers debug their Turbo Pascal programs using auralization. Another part of the Presentation style is the use of animation. In the context of algorithm animation, this will naturally be supported by the systems. However, there are two different techniques to support animation: smooth animation and discrete changes. In smooth animation, the transitions in an animation step are shown as smooth transitions. With discrete changes, the changes are made without animation and the changed parts are highlighted. It has been argued that smooth animation is suitable for small data sets, whereas discrete changes are suited for large sets of data [10]. In addition to using smooth animation to highlight changes, several other techniques can be used to notify the user of changes. For example, the shape or color of the graphical object that changed can be modified to inform the user [10]. The category Granularity measures how well the system supports different levels of granularity. This is important, since various users will have different needs, thus the tool must support different levels of abstraction [54]. Also, with large examples, it is often useful to hide smaller details to understand the big picture. The category Multiple Views measures the degree of multiple view support. Multiple views eases the visualization of complicated algorithms or allows showing multiple, synchronized aspects of a simple algorithm, and is thus an important feature of AV systems [14]. The last category Program Synchronization measures the support for synchronized visualization of several different algorithms. This can help the comparison of different algorithms. For example, the Sorting out Sorting video shows several sorting algorithms sorting the same data, thus making it easy to see how efficient the algorithms are.
CHAPTER 2. RELATED WORK
12
Category Method The category Method describes how the visualization is specified. It has two subcategories: Visualization Specification Style and Connection Technique. Connection Technique describes how the program source code and the visualization are connected. This is, however, not relevant to our task here and will not be discussed in detail. Visualization Specification Style describes the way visualizations are specified. In the original taxonomy this was measured using terms like hand-coded, library, and automatic. However, since then, many different visualization specification styles have emerged and here we will introduce some of them. In some systems, the visualizations are based on interesting events [13] that should lead to changes in the visualization. An example of a system that uses this approach is BALSA [13]. Another style is direct manipulation [50]. In direct manipulation, the animation is specified by manipulating graphical objects. Visual algorithm simulation [31] takes direct manipulation one step further by allowing the animation to be specified manipulating concrete data structures through visualizations. Automatic animation is also a popular style due to its effortlessness. An example of such system is Jeliot 3 [37] that automatically visualizes small Java programs. Category Interaction This category contains metrics to evaluate the way the user interacts with an SV system. The subcategories are Style, Navigation, and Scripting Facilities. The category Style describes the method used to give instructions to the system. Here we will extend this category and include a new taxonomy to describe the style (or level) of interaction supported by the system. Many Computer Science educators agree on that passively viewing algorithm animations does not have significant educational effect [24]. Therefore, engagement (activity) by the student is needed for a tool to be pedagogically useful. The different levels of engagement according to the engagement taxonomy [40] are viewing, responding, changing, constructing, and presenting. Viewing is passive viewing of an animation where student only controls the visualization’s execution. In responding, the student is engaged by asking questions about the visualization. Changing requires the student to modify the visualization, for example, by changing the input data. In constructing, the student is required to
CHAPTER 2. RELATED WORK
13
constructs his/her own algorithm animation. At the highest level, presenting, the student presents a visualization for an audience. The Navigation subcategory is interesting and requires good control over the animation for the tool to be evaluated good in this category. This is important in AA in education because when using the tool for viewing animation, the user will need to compare steps in the animation to understand the algorithm. Good controls include the capability to move backwards and forwards, play and pause, and change the speed of the animation [3, 45]. The Scripting category answers the question whether the tool supports some scripting language to define the animations. This is naturally a feature highly related to our topic. Thus, we will survey some systems supporting this feature in Section 2.3 and their scripting languages in Section 2.4. Category Effectiveness This category is related to measuring the effectiveness of the created animations. From the educational point of view, this is an extremely important category. However, this is not related to the definition of an algorithm animation language and is therefore not examined here.
2.3
Algorithm Animation Systems
In this section we will introduce some of the numerous AA systems developed over the years. We will concentrate on systems that include some language that can be used to specify the animations because our target is to define a new algorithm animation language. In the selected systems, we expect it to be possible to either write the animation as a text file read into the system or edit the text with the system. The reader should note that these descriptions are not supposed to be exhaustive feature lists of the tools. They are merely intended to give a general overview of the tools and give relevant information about the I/O functionality and implementation of the languages. Thus, we encourage the interested reader to read more about the tools from the cited articles.
CHAPTER 2. RELATED WORK
2.3.1
14
ALVIS
General
ALgorithm VIsualization Storyboarder (ALVIS) [23] is an interactive
algorithm visualization system designed to create and view low-fidelity algorithm visualizations. In low-fidelity visualizations, the algorithm is illustrated with few inputs using a sketched, unpolished appearance. Goal and targeted users
The goal of the system is to make presenting algo-
rithms easy. To achieve this goal, the system includes features supporting this. The system has been used in an undergraduate algorithmics course. Animation specification
The generation of the animations is done using direct
manipulation. In addition, the tool supports dynamic modification of the animation by directly inserting commands of the language of ALVIS, SALSA, into the code. Interaction
The system is designed to support interaction levels constructing and
presenting, thus it has several features supporting this. The direction of execution can be reverted to go back to a previous view. For highlighting interesting parts while showing the visualization, the tool includes a presentation pointer tool. Moreover, there is a tool that can be used as a mark-up pen to dynamically annotate the animation. I/O
As stated above ALVIS uses a command language called SALSA, which will
be described in Section 2.4.2. The SALSA scripts can be saved and loaded with the system. Implementation
ALVIS is implemented using Visual Studio .NET which is re-
quired to run the system (early beta version). Thus the system is platform dependent. ALVIS is intended to be used as-is, so no implementation on the behalf of the user is possible or required.
2.3.2
Animal
General
Animal [45] is a general-purpose animation tool with a current focus on
algorithm animation. Goal and targeted users
Animal is an algorithm animation application that is
designed to support multiple roles. The tool has features for developers, visualizers, and users. The authors feel that the most important of these is the user that views the animations.
CHAPTER 2. RELATED WORK
15
Animation specification Visualizers are provided with three different methods to specify the animation. He or she can use the graphical editor to create the animations by drag and dropping graphical elements. The tool supports full timing control of the animation effects, as well as provides an informative animation overview. Another method is to use the scripting language, AnimalScript (see Section 2.4.2 for more information). Finally, the tool supports generation of the scripts through a Java API. The developers of the system expect advanced users to use either the scripting language or the API. Interaction
The tool offers a viewer with versatile controls over the animation
for viewing and presenting. These include features like step backward and forward either with smooth transitions shown or not, jump to begin and end, random access to the animation steps, slide show mode, and pause. The user is also able to set the speed and scale of the animation. Animal has also been extended to support responding by adding multiple-choice questions to the animations that require answers from users before continuing the viewing [47]. I/O
Scripts in the AnimalScript language can be saved and loaded with the
system. Animal also supports a wide variety of export formats including BMP, JPG, PNG, Photoshop PSD, and QuickTime videos. Implementation
The tool is implemented in Java and offers developers the pos-
sibility to add extensions to the tool. These extensions can be, for example, new graphical primitives, animation effects, scripting commands, or import/export filters. In addition, making an internationalized version for a new language is straightforward.
2.3.3
DsCats
General
Data Structure Computer Animation Tools (DsCats) [15] is an applica-
tion focused on learning the data structures and algorithms. Goal and targeted users
The goal of the tool is to help learning of basic data
structures and algorithms. It is intended for students as a self-study material. Animation specification
The animations can be created either by using the tool
or by writing a text file using a simple command language of the tool. In the tool, inserting and deleting keys to and from the structures is done by simply writing the keys and pressing appropriate buttons.
CHAPTER 2. RELATED WORK Interaction
16
The tool has many features supporting viewing of animations. The
most important features include the ability to move backward and forward in the animation sequence, support for visualizing large data sets, and the possibility to vary the level of detail of the animation. The tool also automatically adds comments on the steps when inserting or deleting keys into the structures. Combined with the possibility to change the speed of the animation the animations can be used by students as self-study material. I/O
In the tool, the animations can be saved and restored. The system includes
a simple command language. This language is introduced in Section 2.4.2. Implementation
The current version of the tool includes implementations for
tree structures (binary search tree, AVL-tree, and B-tree). However, the tool is implemented in Java language and is designed to be extensible, thus allowing users to extend the selection of data structures. This can be done by extending one base class of the tool.
2.3.4
JAWAA
General
JAWAA 2.0 [2] (in the following, simply JAWAA) is a data structure
and algorithm animation system that consists of three parts: a scripting language, graphical editor, and an applet capable of showing animations defined in the scripting language. Goal and targeted users
The tool has been used on CS courses of different levels
giving students tasks to visualize data structures and algorithms with JAWAA. Animation specification JAWAA supports two ways to create the animations. The JAWAA Editor is a graphical user interface allowing the visualizer to create animations graphically. This is done by laying out primitive objects and modifying them to produce animations. The animations are defined by changing the states of the objects across time. Another way is to write or generate the animations using the JAWAA scripting language (see Section 2.4.2). These methods can of course be combined by creating the layout of the objects with the editor and then modifying these objects using output of a program. Interaction
The JAWAA applet that views the animations provides basic control
over the animation. The user can play, stop, and pause it as well as change the speed. The whole JAWAA system is used by the authors requiring students to construct animations.
CHAPTER 2. RELATED WORK I/O
17
The animations in the JAWAA Editor can be saved and loaded in an internal
format. animations can also be exported in the JAWAA scripting language and added to web pages to be viewed with the JAWAA applet. Implementation
JAWAA is implemented in Java and is freely available with the
source code. However, extending is not documented by the authors and the system is intended to be used as-is.
2.3.5
JSAMBA
General
JSAMBA [48] is a front-end for the POLKA [52] algorithm animation
system. Basically, it is a viewer to visualize animations written in the Samba scripting language [51]. Goal and targeted users
JSAMBA is intended to be used to allow the usage of
Samba animations on web pages. The system behind JSAMBA, POLKA, was built to animate parallel programs and computations. Animation specification
The animations are specified by entering (or copy past-
ing) Samba commands, the system does not include an animation editor. The Samba commands are used to create and modify graphical objects. In Section 2.4.2, the Samba language will be introduced in more detail. Interaction
The tool offers basic control over the animation with play, step, and
pause controls as well as the possibility to change the speed of the animation. I/O
Since the tool is an applet, it has no access to the file system and the animation
scripts are either selected from a menu of a variety of ready made examples or typed/cut and pasted as Samba commands into a text area. Implementation
The tool is implemented in Java and is freely usable in the
Internet, but the source code or API documentation is not available. Thus, the tool cannot be extended.
2.3.6
MatrixPro
General
MatrixPro [27] is a system to create algorithm animations using visual
algorithm simulation. Goal and targeted users
MatrixPro is targeted for computer science educators
to use on lectures. The main idea is to support on-the-fly usage, thus enabling the
CHAPTER 2. RELATED WORK
18
instructor to create the animations during the lecture. For the students, the tool offers numerous automatically assessed exercises [36]. Animation specification
The animations are specified using visual algorithm
simulation. The simulation consists of manipulating visual representations of actual data structures through a graphical user interface. The most important feature supporting the on-the-fly usage is the automatically animated structures. The tool includes a library of the most used data structures that the user can operate on. For example, there is an implementation of AVL tree that can be used to demonstrate insertions by simple drag and dropping keys from a table into the tree. Interaction
To support the presenting of animations, the tool has a number of
useful features. For example, the tool offers ways to customize the animations and the user interface. The exercises for students offer interaction where the user has to simulate the working of an algorithm. Student’s simulation sequence can then be automatically assessed. I/O
The animations created with MatrixPro can be saved as serialized Java ob-
jects or exported as Scalable Vector Graphics animations. A view in the animation can be saved into an ASCII file (see Section 2.4.2 for details) or exported in TEXdraw format to be included in LATEXdocuments. In the current version, the view or animation can also be exported as a series of PNG pictures. Implementation
MatrixPro is based on the Matrix algorithm simulation frame-
work [31] that is implemented in Java and designed to be extended. For example, a developer can add new data structures or layouts for the visualizations.
2.4
Description Languages
There are numerous languages defined for description of different kinds of data. The criteria for our new algorithm animation language are that it must be able to express the data structures and graphical primitives used in the animation, hierarchies of animation operations, and style settings for the data structures and graphical primitives. Thus, we are basically interested in three types of languages: languages for graph description, languages for algorithm animation, and languages for visualization and animation. Graph is a fundamental data structure and almost all data structures can be described as graphs, thus it is relevant in this case to describe this and other data structures. Our goal here is to survey different languages
CHAPTER 2. RELATED WORK
19
and approaches in order to find suitable features for the new algorithm animation language. Again, the reader should keep in mind that these language descriptions will not state every feature of the languages, only the ones that could be useful in the new language. Also, the examples shown of the languages are often not complete with all the details required in the language and they cannot be used as-is in any system.
2.4.1
Data Exchange Languages
There are several languages designed to exchange data between various systems. Here, we describe three languages targeted for exchanging graphs. We are going to point out some useful features to include in the AA language to describe the data structures. GraphXML GraphXML [22] is a graph description language in XML designed to be used between graph drawing and visualization software. It has basic elements to describe the graph: graph, node, and edge. An interesting feature of the language is the support for geometry, visual properties, and dynamic graphs. Listing 2.1 shows an example of describing node and edge geometry. The position of a node can be set by adding the position element as a child to the node element. The size of a node can be specified by adding a size element. Using the path element, an edge can be given control points that specify how the edge should be drawn.
CHAPTER 2. RELATED WORK 1 2 3 4 5 6 7 8 9 10 11 12
20
Listing 2.1: GraphXML node geometry example. Visual properties can be set using a style element. This element can include elements line and fill. For example, Listing 2.2 shows an example on how to use these. Line 3 sets the line-style to be red, dashed, and a width of 3. The next line sets the fill color of the node as green. 1 2 3 4 5 6
Listing 2.2: GraphXML example of visual properties. In addition, dynamic behavior can be added by using an edit element. Using this element, it is possible to remove or replace existing parts of the graph. Edit operations can also be grouped with edit-bundle element, thus enabling animation of several edits with one step. GXL GXL (Graph eXchange Language) [56] is an XML language designed to be standard format for data exchange between graph-based tools. GXL has been influenced by many different graph description formats. The graphs in GXL are directed with attributed and typed nodes and edges. For example, in Listing 2.3, a simple graph is defined. Nodes can be attributed, as node1 in the example. GXL also supports hierarchical graphs, where a node can
21
CHAPTER 2. RELATED WORK
include another graph (see line 8 in Listing 2.3). Edges can cross these hierarchical boundaries (see line 14). Hyperedges, edges connecting more than two nodes, are also possible and are defined using rel element (see lines 17-21). 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
In this section, we will consider the languages used in the algorithm animation systems described earlier in this chapter. AnimalScript AnimalScript [44] is a scripting language for the Animal algorithm visualization system. AnimalScript provides support for graphical primitives such as arc, circle, ellipse, line, point, polygon, polyline, square, and text. Coordinates for the objects can be given either in absolute coordinates or relative to another object or defined location. In Listing 2.4, the first line creates a circle and the second line a star.
CHAPTER 2. RELATED WORK
22
Line 3 animates the circle to move from the current position to point (90, 90) taking 200 ms to animate. The last line animates the color of the polygon. The depth attribute can be used to resolve the display of overlapping components. Objects with a smaller value of depth are placed on top. 1 circle "C" (150, 100) radius 30 color black filled fillColor red depth 3 2 polygon "P" (150,75) (179,161) (269,161) (197,215) (223,301) (150,250) (77,301) (103,215) (31,161) (121,161) (150,75) color red 3 move "C" along line (130, 80) (130, 170) within 200 ms 4 color "P" type "color" black after 50 ms within 100 ms
Listing 2.4: Example of graphical primitives and basic animation in AnimalScript. AnimalScript supports also data structures array and list as well as code animation. Listing 2.5 gives an example of these. In the example, an array with elements A, R, R, A, and Y is created and R and Y are swapped. Additional operations for arrays include setting and moving markers, pointers, and indices as well as putting elements in an array. The example also creates a list with two elements and a code group that consists of one line of code. On the last line, the codeline is highlighted. For lines of code, there are also unhighlight and hide operations. 1 array "Arr" (30, 30) length 5 "A" "R" "R" "A" "Y" 2 arraySwap on "Arr" position 1 with 4 3 listElement "B" (10, 100) text "1st" pointers 1 textColor red 4 listElement "C" offset (60, 0) from "B" NE text "2nd" pointers 1 textColor red 5 setLink "B" link 1 to "C" 6 codeGroup "D" at (10, 200) color black highlightColor green 7 addCodeLine "1. First line of the code" to "D" 8 highlightCode on "D" line 0
Listing 2.5: AnimalScript example using an array list and code. AnimalScript2 [46] introduces programming concepts including loops, conditionals, arithmetic expressions, and integer variables. Listing 2.6 gives an example where the code swaps the first element in the array with the smallest element in the array.
23
CHAPTER 2. RELATED WORK 1 2 3 4 5 6 7 8 9
int[] values = new int [] {3, 2, 4, 1, 7}; int pos = 1; int minIndex = 0; while (pos < values.length) { if (values[pos] < values[minIndex]) minIndex = pos; pos++; } swap(values, 0, min);
3
2
4
1
7
1
2
4
3
7
Listing 2.6: An example of programming concepts of AnimalScript2 [46]. The figure shows the array before (above) and after (below) the elements are swapped.
DsCats DsCats [15] includes a command language for defining the animations. The language supports the definition of the structures, insert and delete operations, break points, annotations, and several options. A simple example introducing most of the features of the language is represented in Listing 2.7. 1 2 3 4 5 6 7 8 9
Listing 2.7: DsCats command language example. The figure represents the data structure after the operations are executed. The value of the detail level can vary from 1 to 10, one being the lowest level where every animated operation is shown as a step in the animation sequence. The second line sets the speed of the animation. In this example, the pause between animation steps is set to 4000 ms. Line 3 sets the structure in use to be B-tree. Note that DsCats only supports animations with one structure. Lines 4-6 insert elements into the structure. The command pause pauses the animation at that point, and the user must click the play button to start playing the animation. This is a useful way to make the consumer react to some step.
CHAPTER 2. RELATED WORK
24
JAWAA JAWAA 2.0 [2] includes a scripting language for creating animations and viewing them over the web. JAWAA commands are divided in three types: primitive objects, action commands, and data structures. Primitive objects in JAWAA are circle, rectangle, line, polygon, and oval. Action commands allow movements and changes to objects or object groups. Listing 2.8 shows an example of few of these. The first two lines create a rectangle and an oval, while the last three lines animate the position of the oval, and the background color and the scale of the rectangle. 1 2 3 4 5
rectangle r1 10 10 100 50 black blue oval o1 10 10 100 50 black orange changeParam o1 x 50 changeParam r1 bkgrd white scale r1 150
Listing 2.8: An example of JAWAA primitives and action commands. Data structures supported by JAWAA are array, queue, stack, list, tree, and graph. These structures have the normal operations, for example, stack has the operations push and pop and queue operation dequeue and enqueue. Listing 2.9 shows an example where a stack is first created and then an item is popped from and pushed to the stack. 1 stack s1 10 10 5 d1 d2 d3 d4 d5 blue black 2 pop st1 3 push st1 d6
Listing 2.9: An example of JAWAA data structures and operations.
Matrix ASCII MatrixPro includes a textual format for describing data structures. The language supports the definition of structures in three representations: edge list, adjacency list, and array. In addition, the layouts used for the structures, and some visual properties of the layouts can be defined. Listing 2.10 gives an example of this format.
25
CHAPTER 2. RELATED WORK 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
#matrix structures Example demo.ascii#1 #name Example #representation Kamada-Kawai graph #matrix graph adjacency-list 1 demo.ascii#1_1:H Q Q:H H O 1 #EOS N M demo.ascii#1_1 #representation layered tree #rotated true #matrix autopolymorph matrix.structures.FDT.probe.BinTree N:M O #EOS
Q
1
H
Listing 2.10: Matrix ASCII format example of a graph with a tree in a node. In the example, there is one graph given as an adjacency list that has three nodes, one (demo.ascii#1 1) that contains a binary tree and two (H and Q) that contain simple keys. The definition of the nodes are on lines 6-8. The tree containing the additional nodes N, M, and O is defined on lines 10-15. SALSA SALSA (Spatial Algorithmic Language for Storyboarding) [23] is a high-level language for creating low fidelity storyboards. SALSA enables layout and logic of visualization to be specified in terms of its spatiality among visual objects. SALSA includes three data types: cutout, position, and s-struct (spatial structure). Cutout is a computer version of a paper cutout. Position represents a point in the coordinate space. A spatial structure is a region in which cutouts can be arranged according to a particular spatial layout pattern (for example, grid). The 12 commands of SALSA can be divided in four categories: element creation and modification, conditional execution, iteration, and animation. Listing 2.11 gives an example of SALSA commands. the example creates an array and sets its elements to 1,6, and 11. Then it shows a comment, and finally swaps elements 6 and 11. 1 create array a1 with 3 cells 2 set v1 to 1
CHAPTER 2. RELATED WORK 3 4 5 6
26
set v2 to 6 set v3 to 11 make v3 say "swapping me with 6" swap v2 with v3
Listing 2.11: Example of SALSA commands.
Samba The two main categories of Samba commands create graphical objects and modify these. Graphical objects available are line, rectangle, circle, triangle, polygon, and text. The modification commands include, for example, commands to move and exchange objects, to change the colors, and to change text and visibility of objects. Many of the modifications can be done either as smooth animation or in one frame (discreet change). Listing 2.12 gives an example of a Samba script. In the example, three elements, text, circle, and rectangle, are created. Then the circle is moved, comment is output, positions of circle and rectangle are exchanged and circle is moved to the new position of the rectangle. The last line brings the circle forward on the screen so that the rectangle is no longer drawn on top of the circle. 1 2 3 4 5 6 7 8
bigtext t1 0.1 0.5 0 black Samba example circle c1 0.8 0.8 0.1 red half rectangle r1 0.1 0.9 0.1 0.1 blue solid moverelative c1 -0.1 -0.1 comment Exchanging two objects for fun! exchangepos c1 r1 moveto c1 r1 raise c1
Listing 2.12: Example of Samba command language. Samba also has a support for multiple views by introducing two commands viewdef and view that can be used to define a view and setting the current view. In addition, ´ [39]. Samba has many front-ends, for example, JSAMBA [48] and JHAVE
2.4.3
Other Languages
There are several other languages introduced that are relevant to the development of an algorithm animation language. There are two areas of interest here: metadata description languages and visualization and animation languages.
CHAPTER 2. RELATED WORK
27
Metadata has gained more and more recognition since the amount of information has rapidly increased. Metadata is usually defined to be information about information and it allows users to search the data and summarize the meaning of it. There are several standards for inclusion of metadata in documents [53]. Including metadata in the algorithm animations allows the creation of a searchable library of algorithm animations in the future. Since the target use of our language is in education, an interesting metadata standard is the Learning Objects Metadata (LOM) [26] and it will be briefly described here. For visualization and animation, we describe CSS, SVG, and SMIL, in order to find useful features to be applied in our AA language. Learning Objects Metadata (LOM) Learning Objects Metadata (LOM) [26] is a metadata specification designed for describing the contents of learning objects (LO). LOM specification consists of nine categories of metadata information. These categories are listed and briefly described in Table 2.1. Cascading Stylesheet Language (CSS) Cascading Stylesheets [8] are a simple way to add style to documents. It has been developed to be used for web documents. The basic idea is to allow the definition of styles independently of the contents. These styles can then be applied to elements by its type or by setting the element’s class to point to a style. The style definition consists of setting different properties for the style. Listing 2.13 shows a simple example. 1 .boldRed { 2 color:red; 3 font-weight:bold; } 4 5 h1 { 6 margin-left:10pt; 7 font-variant:small-caps; }
Listing 2.13: Example of CSS definitions. In the example, the first style will be applied to any element that defines its class to be boldRed, for example, ... will make all text
28
CHAPTER 2. RELATED WORK Category
Description
Example subcategories
General
General information about the LO.
title, description, keyword, coverage
Life Cycle
Describes the history and current state of the LO.
contribute (i.e., people or organizations), metadata schema, language
Technical
Explains the technical requirements and details of the LO.
format, size, installation remarks, duration
Educational
Describes the educational characteristics of the LO.
interactivity type and level, context, typical age range, difficulty, typical learning time, end user role
Rights
Describes the property rights and conditions of use for this LO.
cost, copyright, description
Relation
Defines relationship between the LO and other LOs.
kind (nature of the relationship), resource
Annotation
Provides comments on the educational use of this LO.
entity (i.e. author), date, description
Classification
Categorizes this LO within a particular classification system.
purpose, source (of the classification system), description
Table 2.1: Categories of the Learning Objects (LO) Metadata specification [26].
inside span element to be in bold and red. The second style is applied to every element of type h1 (unless a class is set for them) making them to be shown as small-caps letters and leaving a margin of 10 points to the left of the element. Scalable Vector Graphics (SVG) Scalable Vector Graphics (SVG) [18] is an XML language targeted for describing graphics. The key features that we are interested in here are the graphical shapes
CHAPTER 2. RELATED WORK
29
defined in SVG. These are rectangle, circle, ellipse, line, polyline, and polygon. Listing 2.14 gives an example of these. The first element in the example defines a non-filled rectangle with round edges and purple stroke 30 pixels wide. The second element defines a polygon that is star-shaped, filled with red, and blue stroke 10 pixels wide. The example also shows two different ways to set the style of shapes: by using the attributes fill, stroke, etc. or by using the style attribute with a CSS styled notation. 1 2 3 4 5
Listing 2.14: SVG shape example. Another interesting feature of SVG is the animation. Animation can be defined using elements animate, set, animateMotion, animateColor, and animateTransform. The ones most related to our case are animate that animates one attribute or property from one value to another and set that sets a value without animation. The example in Listing 2.15 animates the opacity from value 1 to value 0 in five seconds. So, the effect of the animation is that the rectangle disappears slowly and is completely hidden after five seconds. 1 2 3
Listing 2.15: SVG animation example.
Synchronized Multimedia Integration Language (SMIL) SMIL [4] is an XML language developed to compose multimedia presentations from various media objects. It has a module-based structure. This makes it easier for other languages to integrate necessary parts from SMIL to the language. Also, it helps tool developers to implement tools that support only parts of the SMIL specification. Basically, SMIL is a collection of XML elements and attributes that can be used to compose a multimedia presentation from media objects. A SMIL presentation usually describes the layout areas as a hierarchy of rendering regions. These regions
CHAPTER 2. RELATED WORK
30
can be used to add media objects. Important part is the timing of the media objects and SMIL provides three basic timing container elements: seq that is a container whose children are rendered in succession, par that is a container whose children are rendered in parallel, and excl, that allows only one of its children to be active at a time. These timing containers can be arbitrarily nested. Media objects can be, for example, text, video, audio, or images. For each media object the timing can be specified by setting the begin and end time, duration, and repetition count. SMIL also support transitions and animations of elements and attributes.
2.5
Summary
As can be seen from the previous sections, many different languages for algorithm animation has been developed, each with its own set of features. The languages also work on different levels of abstraction: some work purely with graphical primitives, while the most high-level languages operate with abstract data types. These differences make the data exchange between languages a difficult task. To recognize which of the languages are similar and thus could be transformed into each other, we will introduce a taxonomy of algorithm animation languages in the next chapter. In Chapter 5 we will introduce a new algorithm animation language that supports several different levels of abstraction.
Chapter 3
Taxonomy of Algorithm Animation Languages Based on the survey of the algorithm animation languages in the last section, we define a taxonomy of algorithm animation languages to evaluate the languages. The top-level of the taxonomy is represented in Figure 3.1. Algorithm Animation Languages
Animation
Interaction
Language
Positioning
Style
Vocabulary
Figure 3.1: Taxonomy of Algorithm Animation Languages. The main categories of the taxonomy are Animation, Interaction, Language, Positioning, Style, and Vocabulary. Animation describes the level and versatility of the animation capabilities of the language. Interaction describes the level and type of interaction provided for the end user of animations. Language inspects properties of the language not directly related to algorithm animation but to the process of creating them. Positioning considers the variety of different ways to position the objects, and Style the variety of styling facilities. Vocabulary describes the degree of supported object types, i.e. the building blocks used in the animation. In the following sections, we will describe the categories of the taxonomy in more detail. We will also evaluate the algorithm animation languages introduced in the last chapter using the newly defined taxonomy. The reader should keep in mind that we evaluate the languages, not the systems. Some of the features evaluated might be available in some system, but not through the language the system uses. 31
CHAPTER 3. TAXONOMY OF ALGORITHM ANIMATION LANGUAGES 32
3.1
Category Animation
Description
The category Animation (see Figure 3.2) describes the kinds of ani-
mation effects that are available in the language and how the final animation can be customized through the language. Animation has four subcategories: data structure (DS) operations, grouping, timing, and visual attribute animation. Animation DS oper.
Grouping
Timing
Visual attr.
hierarchies
rotate scale style translate
Figure 3.2: Category Animation. Data structure operations describes the data structure operations available in the language. These operations can be, for example, a push operation for a stack or an insert operation for a binary search tree. Grouping inspects the support for grouping the animation operations to be animated simultaneously or sequentially. Grouping has a subcategory hierarchy which states whether or not the animation operations can be indented to form hierarchies. Timing examines the support for timing of the animation. Timing includes, for example, the possibility to set the duration and start time of an animation operation. Visual attribute animation describes the visual animation techniques available in the language. This has four subcategories: rotate, scale, style, and translate. Rotate states whether the objects in the animation can be rotated and scale whether the objects can be scaled. Style describes the support for style attributes that can be animated in the language. These can be, for example, color, fill color, and line style. Translate examines the ways in which the position of an object can be changed. Evaluation
The languages are evaluated in category Animation in Tables 3.1
and 3.2. As can be seen from Table 3.1, the amount of different data structure operations varies greatly. Only DsCats and JAWAA support high-level operations like insert, delete, push, and pop. Matrix ASCII has no support for animation.
CHAPTER 3. TAXONOMY OF ALGORITHM ANIMATION LANGUAGES 33 Timing possibilities are not available at all in several languages. SVG has significantly more flexible timing features than the other languages. In SVG, the animation operations can be set a minimum or maximum duration, number of repeats, repeat duration, key times, etc. Table 3.1: Evaluation of the languages in category Animation (1/2). DS operations
Grouping
Timing
AnimalScript, AnimalScript2
swap, add pointer
yes
no
delay, duration
DsCats
insert, delete
yes
no
none
JAWAA
swap, push, pop, enqueue, dequeue, connect nodes
yes
no
delay
Matrix ASCII
n/a
n/a
n/a
none
SALSA
swap, array populate
no
no
none
Samba
none
yes
no
delay
SVG
none
no
no
delay, duration, min, max, repeat, key times
Hierarchies
Language
In the visual attribute animation subcategory the systems can roughly be divided into two groups: those that support it and those that do not. Another thing worth mentioning is that in Samba, scaling of single objects is not supported. However, the whole view can be zoomed, thus the yes in parentheses in Table 3.2. In SVG, almost all properties of the graphical objects can be animated, and only the most common are mentioned in the table.
3.2
Category Interaction
Description
The category Interaction describes the type and level of interaction
that can be specified using the language. Interaction has two subcategories: Control and Engagement (see Figure 3.3). When using the taxonomy, emphasis should be placed on distinguishing between the interaction provided by the tool and interaction supported by the language. This distinction is not always clear.
CHAPTER 3. TAXONOMY OF ALGORITHM ANIMATION LANGUAGES 34 Table 3.2: Evaluation of the languages in category Animation (2/2). Visual attribute animation Rotate
Figure 3.3: Category Interaction. Control measures the ways the execution of the animation can be controlled from the language. Almost all of the current AA systems provide a control panel with play, rewind, speed, etc. options. Here, we are interested whether or not these can be done using the language. Subcategories of control are play, speed, and stop. Play states whether or not the animation can be started from the language. Speed states whether or not the language supports the change of speed of the animation. Stop states whether the language supports the stopping of the animation so that it will not be continued without user interaction. There could be other subcategories for control, for example, step forward or backward. However, for the current languages, the three mentioned are sufficient.
CHAPTER 3. TAXONOMY OF ALGORITHM ANIMATION LANGUAGES 35 Engagement measures the support for different levels of the engagement taxonomy introduced in Chapter 2. It has two subcategories: type and level. Type describes the type(s) of interaction supported by the language. This can be, for example, a support for specifying pop-up questions shown during the animation. Level measures the level of interaction using the levels of the engagement taxonomy [40]. For example, the pop-up questions would be considered to be responding level of the engagement taxonomy. It should be noted that control category corresponds to the viewing level of the engagement taxonomy. Evaluation
The languages are evaluated in category Interaction in Table 3.3.
Since SVG documents can include ECMAScript [1] code and is often used this way, we have evaluated pure SVG and SVG+ECMAScript separately. This is because the evaluation results differ significantly. Table 3.3: Evaluation of the languages in category Interaction.
Stop
Type
Level
Engagement
Speed
Control Play
Language
AnimalScript, AnimalScript2
no
no
no
pop-up-questions
responding
DsCats
no
yes
yes
none
none
JAWAA
no
no
no
none
none
Matrix ASCII
no
no
no
none
none
SALSA
no
no
no
user input data
changing
Samba
no
no
no
none
none
SVG
no
no
no
none
none
yes
yes
yes
any
any
SVG + MAScript
EC-
AnimalScripts are extended to support pop-up questions during the animation, thus the languages support engagement level responding. SALSA includes commands to get input data from the user, thus supporting level changing. Since SVG animations can include arbitrary ECMAScript code, it can be considered to support any kind of interaction. On the other hand, pure SVG supports no interaction.
CHAPTER 3. TAXONOMY OF ALGORITHM ANIMATION LANGUAGES 36
3.3
Category Language
Description
The category Language (see Figure 3.4) describes the support of
features that are not directly related to algorithm animation but instead are useful in the animation creation process. The subcategories in Language are comments, debug, extensible, localization, and metadata. Language Comments
Debug
Extensible
Localization
Metadata
Figure 3.4: Category Language. Comments subcategory states whether or not the language supports comments. Here we mean comments that are not shown to the user of the animation but to the visualizer manipulating a text file in the format of the language. Debug category states whether or not the language supports debugging of animations by having some sort of debug command. This can, for example, print text to the command line. The subcategory extensible indicates whether or not the language can be extended with reasonable effort. Such language is, for example, XML that can be extended by definition. For a language to be extensible, it must have been designed for that purpose or otherwise be easy to do. For example, it is not enough for the language to be extensible if a system is implemented in Java and the source code is available. However, if there are well-defined and documented interfaces that can be implemented to add new commands to the language, the language can be considered extensible. Localization indicates whether or not the language supports localization of the animations. Usually, this is done by allowing textual data to be included in multiple languages. Metadata describes the amount of metadata that can be included in animations described in the language. Here, it is not enough for the language to support comments that can be used to include arbitrary information. The language must have some commands or tags to include metadata. This metadata can be, for example, information about the author, subject, or difficulty of the animation.
CHAPTER 3. TAXONOMY OF ALGORITHM ANIMATION LANGUAGES 37 Evaluation
Table 3.4 shows the evaluation of the algorithm animation languages
in category Language. The interesting part of the evaluation is the lack of metadata in the languages. From the algorithm animation languages, only AnimalScripts support even a small amount of metadata. SVG, on the other hand, supports the inclusion of arbitrary metadata. Table 3.4: Evaluation of the languages in category Language. Language
Comments
Debug
Extensible
Localization
Metadata
AnimalScript, AnimalScript2
yes
yes
yes
no
author, title
DsCats
yes
no
no
no
none
JAWAA
no
no
no
no
none
Matrix ASCII
yes
no
no
no
none
SALSA
yes
no
no
no
none
Samba
yes
yes
no
no
none
SVG
yes
yes
yes
yes
any
3.4
Category Positioning
Description
Category Positioning (see Figure 3.5) describes the number of ways
available in the language to position the objects in the animation. Positioning has three subcategories: coordinates, dimensions, and layout. Positioning Coordinates
Dimensions
Layout
Figure 3.5: Category Positioning. Coordinates lists the various ways the coordinates can be specified and the available coordinate systems. This can be, for example, in absolute coordinates or relative to some other location. Dimensions states the maximum number of dimensions usable when positioning the objects. Usually, this value is either two or three.
CHAPTER 3. TAXONOMY OF ALGORITHM ANIMATION LANGUAGES 38 Layout examines the data structure layout functionality of the language. This means, for example, how to position the nodes of a graph. The layout can be done at least in two ways: automatically or by hand. In addition, it can be a combination of these two approaches. Although automatic can be considered a feature of the system, it is also relevant for the language. For example, usage of a language that supports automatic layout of a graph differs from a language that requires the user to specify the layout providing the coordinates of the nodes in the graph. Evaluation
The languages are evaluated in category Positioning in Table 3.5.
DsCats, Matrix ASCII, and SALSA have only automatic layout and positioning, thus coordinates is not applicable. Table 3.5: Evaluation of the languages in category Positioning. Language
Coordinates
Dimensions
Layout
AnimalScript, AnimalScript2
absolute, relative to a location
2.5
by hand
DsCats
n/a
2
automatic
JAWAA
absolute
2
by hand
Matrix ASCII
n/a
2
automatic
SALSA
n/a
2
automatic
Samba
absolute
2.5
n/a
SVG
absolute, relative
2
n/a
AnimalScripts support the setting of depth to control which of overlapping objects is drawn on the foreground or background. Samba supports a similar feature by allowing objects to be moved backward and forward from the viewer. Thus, the dimension is 2.5 in the evaluation for these languages.
3.5
Category Style
Description
The category Style (see Figure 3.6) measures the variety of styling
options available in the language. By styling, we mean setting the style of the objects in the language’s vocabulary. Style is divided in five subcategories: colors, fill style, font, line style, opacity, and stylesheets.
CHAPTER 3. TAXONOMY OF ALGORITHM ANIMATION LANGUAGES 39 Style Colors
Fill style
Font
Line style
Opacity
Stylesheets
family size variants
Figure 3.6: Category Style. Colors is used to describe the supported color space of the language. Usually, the languages support some predefined colors and colors given as RGB-values. Fill style states the different fill style options. These can be, for example, gradient, pattern, and solid. Font is used to examine the variety of means to specify the typography of the text objects used. Measures of this category are family, size, and variants. Family describes the different font families usable in the language, if any. This can be, for example, Serif or monospaced. Size states if the size of the font can be changed and variants lists the different font variants available in the language. Variants can be, for example, bold or small caps. Line style states the support for different line style options. These can be, for example, dashed, pattern, solid, and width. Opacity states whether or not the language supports the opacity of objects. If opacity is supported it is possible to make some objects partially transparent. Stylesheets examines the support for stylesheets in the language. Stylesheet is a style definition (i.e. colors and fonts used) defined once and applied on multiple graphical objects. The criterion for a stylesheet support is that they have to be re-usable among objects. Evaluation
The languages are evaluated in category Style in Tables 3.6 and 3.7.
From Table 3.6 it can be seen that the languages can again be clearly divided into two groups: those that support styling and those that do not. DsCats, Matrix ASCII, and SALSA do not offer styling functionalities due to the automatic layout and styling, while the rest of the languages do. The number of predefined colors available in Samba depends on the system. Samba uses colors of X windowing system. In the author’s environment, there are 753 colors
CHAPTER 3. TAXONOMY OF ALGORITHM ANIMATION LANGUAGES 40
Colors
Fill style
Variant
Font
AnimalScript, AnimalScript2
36 predefined, RGB values
solid
serif, sans serif, monospaced
yes
bold, italic
DsCats
automatic
none
one default
no
none
JAWAA
17 predefined
solid
one default
yes
none
Matrix ASCII
automatic
none
one default
no
none
SALSA
automatic
none
one default
no
none
Samba
system cific
solid
half, solid
system specific
none
SVG
16 predefined, RGB values (as integers, percentages, or hexadecimals)
solid, gradient, pattern
serif, sansserif, cursive, fantasy, monospaced, user specified
yes
bold, italic, small caps
Family
Language
Size
Table 3.6: Evaluation of the languages in category Style (1/2).
spe-
available. The same applies for fonts in Samba. The font used in SVG document can be defined in the document using SVG. Thus, the font in SVG can look like whatever the creator wants. Table 3.7: Evaluation of the languages in category Style (2/2). Language
Line style
Opacity
Stylesheets
AnimalScript, AnimalScript2
arrows
no
no
DsCats
none
no
no
JAWAA
none
no
no
Matrix ASCII
none
no
no
SALSA
none
no
no
Samba
width
no
no
SVG
width, dash pattern, color, line end, line join
yes
yes
CHAPTER 3. TAXONOMY OF ALGORITHM ANIMATION LANGUAGES 41 Stylesheets, opacity, and different line styles (see Table 3.7) are rare features in algorithm animation languages. Only AnimalScripts and Samba have some settings for lines. Again, SVG has the most flexible styling options.
3.6
Category Vocabulary
Description
Category Vocabulary (represented in Figure 3.7) describes the amount
of supported object types. Basically, these are the building blocks used to compose the animation. Vocabulary has four subcategories: data structures, graphical primitives, programming concepts, and sound. Vocabulary Data structures
Graphical primitives
Prog. concepts
Sound
declarations expressions statements types
Figure 3.7: Category Vocabulary. Data structures lists the different supported data structures available in the language. These can be, for example, graph, tree, and stack. Graphical primitives lists the supported graphical primitives. Usually, there exist quite similar primitives with possibly different names. There are, however, languages where graphical primitives are not supported. Programming concepts measures the degree of support for features similar to programming languages. It has four subcategories representing the common constructs in programming languages: declarations, expressions, statements, and types. Declarations describes the possible things that can be declared in the language. This can be, for example, variable, function, or class declaration. Expressions lists the different expressions available in the language. These can be, for example, arithmetic expressions and comparisons. Statements lists the different statements available in the language. Statements are, for example, iterations and assignments. Category types states the different types available in the language. Type can be, for example, boolean, integer, or user defined type. The idea here is not to make an exhaustive
CHAPTER 3. TAXONOMY OF ALGORITHM ANIMATION LANGUAGES 42 analysis of a programming language, but to give a hint on what kind of programming concepts are available in the languages. Sound category states whether or not the language supports the use of sound in animations. This category is included in the taxonomy, although none of the surveyed languages supported this feature. However, we feel that sound can be a useful addition to the animations and it should be supported by algorithm animation languages. Evaluation
The languages are evaluated in category Vocabulary in Tables 3.8
and 3.9. Based on Table 3.8 it is safe to say that two types of approaches to algorithm animation exist: languages using graphical primitives and languages using data structures. However, it is good to see languages where both approaches are supported, at least to some extent. Table 3.8: Evaluation of the languages in category Vocabulary (1/2). Language
Data structures
Graphical primitives
Sound
AnimalScript, AnimalScript2
array, linked list
arc, circle, circle-segment, ellipse, point, polygons, polylines, text
no
DsCats
BST, AVL-tree, B-tree
none
no
JAWAA
array, tree, list, graph, queue, stack
circle, line, text, rectangle, oval, polygon
no
Matrix ASCII
array, list, graph, tree
none
no
SALSA
array
none
no
Samba
none
line, polygons, text, circle
no
SVG
none
rectangles, circles, ellipses, polylines, polygons, text
no1
As can be seen from Table 3.9, programming concepts are not that general in algorithm animation languages. However, some of the most recent languages like AnimalScript2 and SALSA have a support for fundamental programming concepts. 1
Can be achieved in Adobe SVG Viewer by using an extension.
CHAPTER 3. TAXONOMY OF ALGORITHM ANIMATION LANGUAGES 43 Table 3.9: Evaluation of the languages in category Vocabulary (2/2). Language
Programming concepts Declarations
Expressions
Statements
Types
AnimalScript
none
none
none
none
AnimalScript2
variables, arrays
+, -, *, /, %, ||, &&, , !=
conditionals, iteration, assignment
boolean, integer, string, array
DsCats
none
none
none
none
JAWAA
none
none
none
none
Matrix ASCII
none
none
none
none
SALSA
variables, arrays
+, -, *, /, , !=
if, while, create, set, input, populate
string, number, array
Samba
none
none
none
none
SVG
none
none
none
none
variables, functions
multiplicative, additive, bitwise shift, relational, and equality operations, etc.
block, assignment, conditionals, iteration, break, continue, etc.
boolean, number, string, object, custom types
SVG + MAScript
EC-
Again, we have evaluated SVG and SVG+ECMAScript separately, since they have very different evaluation results. ECMAScript is a programming language, and thus it includes much more versatile programming concepts than the AA languages.
3.7
Summary
In this chapter, we have defined a taxonomy of algorithm animation languages. We have also evaluated the languages introduced in Chapter 2. As a result, we have a more detailed overview of the features and properties of the languages. However, the reader should note that this evaluation probably does not include all the small features of the languages. The evaluation of the languages is straightforward, although it requires quite deep knowledge and understanding of the evaluated languages. In the future, as AA
CHAPTER 3. TAXONOMY OF ALGORITHM ANIMATION LANGUAGES 44 languages are developed further and new features emerge, this taxonomy is likely to be outdated. In such case, updates to the taxonomy should be made. The evaluation could be summarized by stating again that there are languages supporting graphical primitives and languages supporting data structures. In addition, it can be seen that SVG has the most advanced features in many of the categories. Especially when SVG is used together with ECMAScript. However, SVG is missing the data structures.
Chapter 4
XML Technologies Since XML is suitable for describing the kind of data we have here and parsing and transforming XML documents is relatively easy, we will define the new language as an XML language. Thus, it is a key technology in this thesis, and we will briefly introduce the different XML related technologies in this chapter.
4.1
Extensible Markup Language (XML)
Extensible Markup Language (XML) [9] is a markup language for documents that contain structured data. Originally XML was designed to be used in publishing to replace the SGML (Standard Generalized Markup Language). XML is a subset of SGML and was introduced as a World Wide Web Consortium (W3C) Recommendation in 1998. Since then, the application area has widened remarkably from the publishing sector. XML is actually a “metalanguage” because it is used to define other languages. An XML language has a specific vocabulary (names of elements and attributes) and syntax (hierarchy of elements, data types, and so on). Listing 4.1 gives an example of an XML document that could be used to write a book. 1 2 Book title 3 4 Title of Chapter 5
Text of the chapter....
6 7
Listing 4.1: Example XML document. 45
CHAPTER 4. XML TECHNOLOGIES
46
For an XML document to be well-formed, the elements must be properly opened and closed, that is, elements must not overlap. For example, the following is not well-formed. That is because the bold and italic elements overlap (bold is closed before italic). 1 Bold text with italic inside
To ensure that the structure of an XML document is valid, the legal structure of the language must be specified using one of the definition languages. Currently, the most well-known are Document Type Definitions (DTD), Relax NG Schemas, and XML Schema. DTD is a language to specify the allowed element hierarchies in an XML document. A more recent language to do the same is XML Schema. XML Schema will be introduced in more detail in Section 4.2.
4.1.1
Why use XML?
The motivation for XML can be started by stating seven of the original ten design goals for XML [9]: 1. XML shall be straightforwardly usable over the Internet. 2. XML shall support a wide variety of applications. 4. It shall be easy to write programs which process XML documents. 6. XML documents should be human-legible and reasonably clear. 7. The XML design should be prepared quickly. 8. The design of XML shall be formal and concise. 9. XML documents shall be easy to create. The use of XML is also encouraged by the large number of tools available to process XML documents (for example, Xerces, Crimson, and Ælfred, to mention a few). There exist many parsers already implemented, thus using XML documents in software is simple. Almost all of the parsers support the validation of an XML document, that is, testing if the document is in the format specified by a DTD or an XML Schema.
4.1.2
XML Parsing
There are different APIs developed for parsing an XML document. The most well known are DOM and SAX. In DOM, an XML document is represented as a tree of
CHAPTER 4. XML TECHNOLOGIES
47
nodes, which can be manipulated in various ways depending on the type of the node (e.g. attribute, element, etc). SAX is an event-based parser, where the client application is notified when some parts of the document are read. For example, these events are starting (and ending) a document and starting (and ending) an element.
4.2
XML Schema
XML Schema [17] is a language for specifying the structure and data types of an XML document. The language has versatile features for the structure specifications. Here, we will not go into details, but merely show an example. An interested reader can read the XML Schema specifications to get a better view. An XML Schema defines the elements allowed in an XML document, as well as the element hierarchies and their attributes and data types. An example of an XML Schema is shown in Listing 4.2. This schema defines the language used in Listing 4.1. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
Listing 4.2: An example of XML Schema. In the example, line 3 defines the name of the root element to be book. Every book has a title (line 6) and unlimited number of chapters (line 7). In addition, it
CHAPTER 4. XML TECHNOLOGIES
48
has an attribute version. Every chapter can again have a title and unlimited number of paragraphs, p.
4.3
Extensible Stylesheet Language Transformations
Extensible Stylesheet Language Transformations (XSLT) [16] is a language designed to transform XML documents to other formats. The output can be another XML format, HTML, or text. There are many tools available to do the XML transformations using XSLT. The most well-known XSLT processors for Java are Xalan and Saxon. This provides a simple way to implement transformations between languages. For an example of XSLT, let us consider a case where we would like to have the book in Listing 4.1 in a format where the title of the book and its chapters were given as a parameter. We could do this transformation by hand, but for actual books with numerous chapters, this might not be reasonable. Instead, we can write an XSL stylesheet to do the transformation. Listing 4.3 shows a stylesheet that does the trick. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Listing 4.3: XSLT stylesheet. The basic structure of an XSL stylesheet consists of templates that are used to transform the different elements in the XML document. For each starting element in the XML document, a matching template is searched. For example, the first
CHAPTER 4. XML TECHNOLOGIES
49
template in the above example matches a book element. It creates a new book element, adds two attributes (version and title) and then applies the template that matches the chapter elements. The template matching chapter works quite similarly. Note that there are many different ways to achieve the same results in XSLT. For example, consider the two alternative ways in book and chapter templates to add the title attribute. The result of transforming the document in Listing 4.1 using this stylesheet is shown in Listing 4.4. 1 2 3
Text of the chapter...
4 5
Listing 4.4: Transformed XML document.
Chapter 5
Extensible Algorithm Animation Language (XAAL) Now we have surveyed the algorithm animation systems and the existing algorithm animation languages. Based on this survey, we have defined a taxonomy for algorithm animation languages and evaluated existing languages. We have now the means to define a new language combining the good features of the existing languages. In this chapter, we will introduce the new language, eXtensible Algorithm Animation Language (Xaal). The structure of this section follows the structure of the language. First, we give an overview of the language, then we describe the positioning and styling options. Next we define the main elements of the language: definition sections, graphical primitives, data structures, animation, and metadata. Finally, we describe the XML schema modules and give a complete example of Xaal. The reader should note that this text is merely an overview of the language and we do not intend to specify every little detail. For a more detailed specification and the actual XML schemas, point your browser to the Xaal website at http://www.cs.hut.fi/Research/SVG/XAAL/.
5.1
Overview
A Xaal document consists of four main parts: (i) metadata, (ii) definitions, (iii) initial state, and (iv) animation. An example of the high-level structure of a Xaal document is given in Listing 5.1. Note that the examples in this chapter are often not 50
CHAPTER 5. EXTENSIBLE ALGORITHM ANIMATION LANGUAGE
51
complete Xaal animations but merely document fragments illustrating some features of the language. 1 2 .. 3 .. 4 .. 5 .. 6
Listing 5.1: Example of Xaal document structure. The root element of a Xaal document is xaal. The element metadata is used to include metadata about the animation. This element is described in Section 5.8. The element defs is used to specify animation options as well as stylesheets and shapes used in the animation. This element will be introduced in Section 5.3. The initial element contains the initial graphical objects (see Section 5.5) and data structures (see Section 5.6). The animation element contains the animation operations that are described in Section 5.7. Some parts of the language use the specification of the ITiCSE XML Working Group [41] that the author of this thesis was part of. Especially the specification of the graphical primitives and transformations is identical to the WG specification, and thus the text is highly similar. This is due to the fact that the author contributed especially on these parts of the Working Group report. The reason for not using more of the Working Group’s specifications is that the specifications on other areas than graphical primitives are not yet finished.
5.2
Positioning
For positioning the objects, we will adopt the notation defined by the ITiCSE XML Working Group. The language supports the specification of coordinates either in absolute coordinates or as offsets relative to a given location. A location can be based on • the bounding box of an object, • a node of a polygon/polyline object, • last used location, or • the baseline of a text component
52
CHAPTER 5. EXTENSIBLE ALGORITHM ANIMATION LANGUAGE Listing 5.2 and the figure illustrate these different approaches. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
NW W SW iv
v i N
1 NE
E
C
S
2
SE ii
iii
text1
Listing 5.2: Example of different positioning approaches. Points i -iv are relative to a location and point v uses absolute coordinates. In the example, the dashed rectangle is the bounding box of the triangle. Point i is positioned relative to the north-west (NW) corner of the bounding box. Point ii is relative to the node 2 of the triangle. Point iii only specifies an offset, in which case it is drawn relative to the last used location (point ii ). Point iv is positioned relative to the end of the baseline of text text1. Point v uses absolute coordinates. As can be seen from the example, the positive x-axis is to the right and positive y-axis down.
5.3
Definitions
Xaal offers the possibility to define options for the animation as well as styles used in the animation. These can be done using the defs element. This element can have arbitrary number of child elements of type style, option, and define-shape.
CHAPTER 5. EXTENSIBLE ALGORITHM ANIMATION LANGUAGE
53
The style element will be described in the next section and the define-shape in Section 5.5.1. Animation options are a sort of extension feature that the systems can use to include application specific information. However, it is not sensible to specify the available options in the language, since different tools will probably have different needs. Thus, we will define one element that can be used to specify general options as name-value pairs. This element is named option and it has two attributes: name and value. Although we do not specify the possible options, we state that the ones we find important are animation speed and scale. We suggest that these options are named speed and scale, respectively. A sensible choice for the values is an integer representing a percentage with the default value 100%. The XML document fragment in Listing 5.3 gives an example of what the defs section could look like. 1 2 3 4 . . 5 . 6 7 . . 8 . 9 10
Listing 5.3: Example of defs section in Xaal.
5.4
Styling
Styling functionality was well specified by the ITiCSE XML Working Group, thus we will use the same specification here. The reason for the styling is to incorporate functionality similar to cascading style sheets (CSS) [8], which are used together with XHTML documents to enforce a standard “look and feel” to an entire website. In our specification, we want to have something similar to relieve the author or system of the duty of redefining a particular style for every object.
CHAPTER 5. EXTENSIBLE ALGORITHM ANIMATION LANGUAGE
54
The visual appearance of an object is specified by a style, which can specify stylistic properties, including: • whether it has a forward or backward arrow, • the object’s color and fill-color • the font family, size, and style (bold, italic, or both), • and the object’s stroke type. Styles can also have an identifier (id), so that it can be referenced by multiple objects similarly to cascading style sheets in XHTML. The few lines of XML in Listing 5.4 specify a style. When applied to a graphical primitive, for example line, this style specifies that the line should be solid (as opposed, say, to dashed), colored green, three pixels wide, and have an arrow tip in the “forward” direction. For the line object, the fill color and font size are not applicable, although they might be for other objects that reference this style definition. 1 2 3 4 5 6 7
Listing 5.4: Example of a stylesheet. To provide more versatile usage, style sheets can be extended. The style element can specify a style to be extended, and it allows elements to be overridden, as in Listing 5.5. In the example, style2 inherits all other properties of style1 except the color, which it redefines. 1 2 3
Listing 5.5: Example extending an existing style sheet.
CHAPTER 5. EXTENSIBLE ALGORITHM ANIMATION LANGUAGE
5.5
55
Graphical Primitives
Graphical primitives are basic graphical components that can be composed to represent arbitrarily complex objects (e.g., a tree data structure). The graphical primitives are as specified by the ITiCSE XML WG, where the following have been defined: • point, polyline, line, polygon; • arc, ellipse, circle and circle-segment; • square, triangle, rectangle; • text. Some of these objects are extensions of other objects. For example, a line is a special instance of a polyline. For ease of use, we have included these “special case” objects. All graphical primitives have some shared attributes: id, hidden, opacity, and style. Every primitive can have an id used for identification. Primitives can be either hidden or visible through use of the attribute hidden, which, by default, is false. Primitives can also be partially opaque (i.e. transparent). In addition, every graphical primitive can contain an element specifying the style. Primitives can also reference pre-defined styles through the style attribute. For examples of styles, see Section 5.4. Two representative graphical primitives are described below by way of examples of their formulations in XML. A complete specifications, including the defining schema as well as examples and documentation, can be found at the Xaal website. The first example in Listing 5.6 defines a polyline consisting of five nodes. The example uses the style specified in Listing 5.4. 1 2 3 4 5 6 7 8
Listing 5.6: Example of a polyline.
CHAPTER 5. EXTENSIBLE ALGORITHM ANIMATION LANGUAGE
56
The second example in Listing 5.7 describes a text object. It is of particular interest in that it includes support for localization (text in multiple languages can be included). This is achieved by using multiple contents elements that each specify the language used. 1 2 3 4 5 6 7 8
Text of the object Objektin teksti Der Text des Objekts
Listing 5.7: Example of an internationalized text.
5.5.1
Shapes
To help the usage of more complex primitives, the language has support for defining reusable shapes. For example, to specify the shape cat that consists of circle segments, lines, and an arc, the XML code fragment in Listing 5.8 can be used. 1 2 3 4 5 6 7 8 9 10 11 . . . 12 13 14
Listing 5.8: Example of defining a shape in this case a cat. The example in Listing 5.9 shows how to use this shape. The location of the shape is calculated as offsets from the given coordinate using the given scale. As can be seen, the usage of the shape is short compared to the specification of the shape.
CHAPTER 5. EXTENSIBLE ALGORITHM ANIMATION LANGUAGE
57
Thus, a lot of effort can be saved by specifying a cat shape and then using it, when one needs to include a herd of cats in an animation. 1 2 3 4
Listing 5.9: Example of using the cat shape.
5.6
Data Structures
Xaal supports the usage of data structures to specify the animations lowering the effort needed to produce them. The set of structures is basically the same as, for example, in JAWAA: array, graph, list, and tree. As with the graphical primitives, these also include some extensions of other structures. For example, a tree is a special case of a graph, but has been included in the language to ease the use.
5.6.1
Common Content
All the data structures in Xaal have some common content, and this subsection describes the common elements. First of all, all structures can include a description of the element using the narrative element. This element can contain text and XHTML elements. The structure can also contain a coordinate specification to position the structure, as well as a style definition. The structure-property element represents a name-value pair. This can be used to provide the application with some extra information about the structure. This can be, for example in case of MatrixPro, information about the layout to use for the structure or the actual data structure to use (for example, AVL-tree). Structures have also several common attributes. These attributes are described in Table 5.1. To support the different approaches of existing algorithm animation languages, all structures support an optional graphical presentation of the structure indicating how the structure should be visualized. This information can be included using the graphical element. This element can contain all the graphical primitives specified in Section 5.5 and transformations on them specified in Section 5.7.3.
CHAPTER 5. EXTENSIBLE ALGORITHM ANIMATION LANGUAGE
58
Table 5.1: Common attributes of structures.
5.6.2
Name
Description
id
ID of the structure. This must be unique throughout the instance document.
ref
Reference to an existing structure that this makes a new visualization for. If this is used, the referencing visualization should change when the referenced visualization is modified.
style
The style used with this structure.
Common Building Blocks
The actual content of the structures is contained in nodes (or, for arrays, in indices) and keys. The next few paragraphs describe these common building blocks. Node
Node is the basic building block used in all the structures, except for the
array. A node can contain any of the structures, which again can contain nodes. This way, the language allows arbitrarily complex structure hierarchies. In addition to the common attributes, the node element can have an attribute label to attach a textual description to the node. Listing 5.10 gives two examples of simple node specifications. 1 2 description of the node 3 4 5 6 7 . . 8 . 9 10
Listing 5.10: Example of nodes.
CHAPTER 5. EXTENSIBLE ALGORITHM ANIMATION LANGUAGE Index
59
The element index is used to describe the contents of an array. Basically,
an index is like a node. It has, however, an additional attribute also called index that can be used to set the position of the element in the enclosing array. The label attribute is used when painting indexed arrays. Listing 5.11 gives an example that specifies an index with label C and position 3. 1 ...
Listing 5.11: Example of an index.
Key
Keys are the elements in Xaal that are used to store the primitive data that
has no internal structure. The data is stored as an attribute value. Edge
The element edge is used to represent a binary connection between two
nodes. Edge can exist only between two nodes (which can be the same) specified using the from and to attributes. Whether or not the edge is directed can be controlled with the directed attribute. Listing 5.12 gives an example of an edge between the two nodes specified in the node example earlier. The edge in the example includes also the graphical representation. 1 2 3 4 5 6 7 8 9
Listing 5.12: Example of a directed edge.
5.6.3
Array
An array is represented in Xaal using element array. Array consists of index elements containing the data. It has also attributes to specify the indexing, orientation, and size of the array. Listing 5.13 gives an example of an array of size 7 with three index elements.
60
CHAPTER 5. EXTENSIBLE ALGORITHM ANIMATION LANGUAGE 1 2 A B 3 4 5
C
Listing 5.13: Example of an array.
5.6.4
Graph
Graph is a structure consisting of a set of nodes connected by edges. In Xaal, a graph is represented using element graph. The content of the graph is included using node and edge tags. Listing 5.14 gives an example of a graph in Xaal. 1 2 3 4 5 6 7 8 9 10
E M D O
Listing 5.14: Example of a graph. The figure on the right gives an example what the graph might look like on a system that supports automatic layout.
5.6.5
List
A list is a data structure consisting of a set of nodes and edges connecting the nodes. In Xaal, we do not set any restrictions on the list (such as, can it be doubly linked). Thus, a list is as a graph, included only to provide a more natural way to describe lists with an element list. Element list has also an attribute to specify the orientation. This is the same as the orientation attribute for array.
5.6.6
Tree
Tree is an important and often used data structure and is available in some of the existing AA languages. A tree consists of a set of nodes connected by edges. Tree
CHAPTER 5. EXTENSIBLE ALGORITHM ANIMATION LANGUAGE
61
is headed by a single root node. In a legal tree, only one path exists between any two nodes in the tree. In Xaal, a tree is represented using an element tree. The content of the tree consists of node and edge elements. The root of the tree is specified using root attribute.
5.7
Animation
A crucial part of the algorithm animation language is the animation functionality. In the following, we will introduce the elements available in Xaal for defining the animations. First, we will introduce the general grouping and timing functionality followed by detailed discussion about the different animation operations. The animation operations have been divided in three groups: graphical primitive transformations (for example, scale and rotate), elementary data structure operations (for example, create and replace), and abstract data structure operations (for example, insert and delete).
5.7.1
Animation Grouping
Similarly to SMIL [4], animation operations in Xaal can be grouped using elements seq and par. Element seq animates the operations it contains sequentially, while par animates them simultaneously. Both of the elements can contain a description of the animation group and any of the animation effects described in this section. In addition, they can contain nested seq and par elements. Both of the elements can also have an attribute id to be used when identifying the element.
5.7.2
Common Properties of the Animation Operations
All the animation operations have some common attributes and content. First of all, a timing specification can define the starting time of the transformation, its duration, or both. The timing in Xaal is as it is specified in the ITiCSE XML WG report [41]: 1. no timing definition: the transformation takes place at once and without a duration.
CHAPTER 5. EXTENSIBLE ALGORITHM ANIMATION LANGUAGE
62
2. only delay: a delay between the start of the current step and the start of the operation is given. The delay can be specified as a time (based on seconds—s or milliseconds—ms), or on a number of preceding animation frames 1 . The transformation has no duration and therefore immediately completes. 3. only duration: the transformation starts at the beginning of the frame and takes a certain amount of time. Can also be specified by frames, milliseconds, or seconds. 4. duration and delay: combines the two options above. Listing 5.15 gives an example of the last three of these different options. 1 2 3 4 5 6 7 8 9
Listing 5.15: Different timing specifications in Xaal. The other element common to most of the transformations is the object-ref tag that refers to the objects transformed or used in a given effect. In addition to the common elements, every animation operation can have an unique id attribute.
5.7.3
Graphical Primitive Animation
These operations are defined for graphical primitives to transform them. To support better the interoperability of algorithm animation systems, we will use the format specified by the ITiCSE XML Working Group [41]. Thus, in Xaal, the following animation operations are available for this: • show/hide, 1
A frame has a meaning similar to a frame of a movie—it represents one component in a series that is involved in visualizing a step. A step is a phase of an animation that illustrates some single interesting event. A step can thus be made up of many frames that, for example, illustrate the effect of a step by smoothly transitioning the visualization from the current state to the next.
63
CHAPTER 5. EXTENSIBLE ALGORITHM ANIMATION LANGUAGE • move (along a set of coordinates or following an arc or polyline object) • rotate, • scale, • change-style, • change-property, • group/ungroup to combine a set of objects under one ID, • swap-id to swap the IDs used to reference two objects.
To give an example of what the actual XML for the transformations looks like, Listing 5.16 gives an example on how to specify a rotation. In the figure next to the XML, it is assumed that obj1 refers to a rectangle that is rotated 30 degrees. 1 2 3 4 5 6 7 8
Listing 5.16: Example of a rotation element. The example in Listing 5.17 shows how to specify a translation (move) of an object group (in this case, circle and text) along another object (a polyline in the example). 1 2 3 4 5 6 7 8
A A
Listing 5.17: Example of a move transformation. The figure shows both the start state (above) and the end state (below).
CHAPTER 5. EXTENSIBLE ALGORITHM ANIMATION LANGUAGE
5.7.4
64
Elementary Data Structure Operations
The elementary data structure operations available in Xaal are create, remove, replace, and swap. Similarly to the other definitions, here are also some duplicate operations included to ease the use of the language. Moreover, to be consistent with the structure definitions, every operation can have an optional graphical element describing how the operation should be visualized using graphical primitive animation. Every element can also contain a description of it by using the narrative element. Create Creation of new structures in the visualizations is one of the basic operations. In Xaal, this is represented by the create element. This element is used to create new structures, which can be new parts to existing structures or completely new. New parts can be created by specifying the target attribute. The newly created structure will then be added as part of the given target. If the attribute is not specified, the structure is added as a new structure. Remove
Removing structures or parts of them is also considered important. This
operation is supported in Xaal with the remove element. This element has attribute target to specify the structure(s) to be removed. Replace
Element replace can be used to replace parts of structures with other
parts. The replaced structure is specified using target attribute. For example, in Listing 5.18 the key with value K would be replaced by key with value K2. 1 . . . 2 3 4 5
Listing 5.18: Example of replace operation
Swap
Swapping two structures is often used, especially for keys in an array. How-
ever, in Xaal, any two structures can be swapped using the element swap. The swapped structures are specified using attributes swap and with.
65
CHAPTER 5. EXTENSIBLE ALGORITHM ANIMATION LANGUAGE
5.7.5
Abstract Data Structure Operations
Abstract data structure operations must always be targeted for the top-level structures (e.g. array, tree, etc) instead of the basic building blocks (nodes, etc.). Every abstract operation can contain the same operation as graphical primitive transformations (element graphical) or as elementary data structure operations (element elementary). However, these are optional. Insert
Element insert can be used to insert value(s) into a structure. The target
structure is specified using a target attribute that refers to the ID of an existing structure. If the inserted structure is already in some of the other structures, it can be referenced using the source attribute. Delete
Element delete can be used to delete value(s) from structures. List-
ing 5.19 gives an example where the key C is removed from a Binary Search Tree. The example also shows how to include the same operation as elementary data structure operations. Note, however, that the elementary element is an optional part. 1 2 3 4 5 6 7 8 9 10
M C
M P
A
P
A
Listing 5.19: Example of delete element. The figures show the structure before (on the left) and after (on the right) the deletion.
Search
Element search can be used to search value(s) from a structure specified
with the attribute target. Listing 5.20 gives an example of searching for key K in a structure that is a Splay Tree.
Listing 5.20: Example of a search operation. The figures show the structure before (on the left) and after (on the right) the search.
5.7.6
Miscellaneous Operations
There are some operations available in Xaal that do not fit in the other categories. These operations are introduced in the following paragraphs. Pause
Pausing the animation can be a good way to add interaction to the anima-
tion. A pause can be used, for example, after showing a comment with a question for a student. The pause can be represented in Xaal using the pause element. Sound
Sound can be added in the animation by adding sound elements as an
animation operation. The element has attributes that state where the sound-file is located and how long and how many times it should be played. Listing 5.21 gives an example. 1 2 3
Listing 5.21: Example of a sound element.
5.8
Metadata
Metadata is important to have when searching for appropriate animations from a large collection. Learning Objects Metadata provides a way to describe the animation in great detail, but is quite cumbersome to use. For this reason, we have chosen not to use the LOM in Xaal, but a subset of the information described in LOM.
CHAPTER 5. EXTENSIBLE ALGORITHM ANIMATION LANGUAGE
67
The information that can be added in Xaal animations includes information about the author(s), application, and animation content. Listing 5.22 gives an example. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
Ville Karavirta [email protected] MatrixPro 1.0 http://www.cs.hut.fi/Research/MatrixPro/ description of the animation that can include xhtml animation xaal
Listing 5.22: Example of metadata in XAAL.
5.9
Schema Specification
We have defined an XML Schema for Xaal. To make the language more modular, we have separated the schema to several XML Schema documents. The relationship between these documents is illustrated in Figure 5.1. This kind of modularity makes it possible to more easily change or reuse some parts of this language in other languages. The modules of Xaal are the following: • xaal.xsd - The main schema document that specifies the root element xaal and combines the other modules. • xaal-animation.xsd - Combines the animation operations allowed in Xaal and defines how to group these operations.
CHAPTER 5. EXTENSIBLE ALGORITHM ANIMATION LANGUAGE
68
xaal.xsd
xaal−animation.xsd
xaal−metadata.xsd
xaal−structure−animation.xsd
xaal−structures.xsd
xaal−graphical−animation.xsd
xaal−graphics.xsd
xaal−animation−common.xsd
xaal−datatypes.xsd
xaal−common.xsd
Figure 5.1: XML Schema modules of Xaal. The arrows represent inclusion, thus, for example, the xaal-animation.xsd module includes the xaal-structure-animation.xsd module. • xaal-animation-common.xsd - Defines common animation properties, such as timing. • xaal-common.xsd - Defines some common types used by several other schema modules. • xaal-datatypes.xsd - Defines data types used in Xaal. • xaal-graphical-animation.xsd - Defines the graphical primitive animation operations. • xaal-graphics.xsd - Defines the graphical primitives available in Xaal. • xaal-metadata.xsd - Defines the metadata that can be included in a Xaal document. • xaal-structure-animation.xsd - Defines the data structure operations available. • xaal-structures.xsd - Defines the data structures available in Xaal. We will not include the schemas here due to the large size. However, they are available on the Xaal website.
CHAPTER 5. EXTENSIBLE ALGORITHM ANIMATION LANGUAGE
5.10
69
Example
Listing 5.23 gives an example of a complete Xaal animation. The structures in the animation are an array (with keys E, X, A, M, P, L, and E) and a tree (Binary Search Tree, if used in Matrix). The tree has initially keys E and X. In the animation, keys A and M are inserted and then key X is deleted. Finally, keys E and X in the array are swapped. 1 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
Listing 5.23: Example of a complete Xaal document. In the example, the root element xaal of the document specifies the XML namespace to be the namespace of Xaal2 . It also gives a hint to a validating parser where to 2
http://www.cs.hut.fi/Research/SVG/XAAL
CHAPTER 5. EXTENSIBLE ALGORITHM ANIMATION LANGUAGE
70
find the XML Schema for the namespace using the attribute xsi:schemaLocation. In this case, it is assumed that the schema is in the same directory as the XML document.
Chapter 6
Implementation The ITiCSE Working Group report [41] describes the general architecture of a system using the specifications of the group. The architecture describes how to combine the XML documents describing interesting events (operations, etc), objects, questions, narrations, metadata, and graphical primitives into one, complete visualization specification of the animation. The idea is that this complete visualization specification would then be used by existing visualization systems through system-specific adapters. The Xaal language can be seen as a simplified version of the complete visualization specification, as it includes most of the data in the different XML documents mentioned above. Thus, our objective here is to implement Xaal in a way that could be useful for the other developers in their aims at implementing the WG specifications. In this chapter, we will introduce two different processing pipelines usable to add Xaal support into existing algorithm animation systems. In addition, we will briefly describe a prototype implementation of Xaal and several transformations. We will not, however, go into small details of the implementation due to space limitations.
6.1
Object hierarchy
The first processing solution is an architecture discussed at the ITiCSE Working Group to implement the language. This architecture is represented in Figure 6.1. The basic idea is to have one Xaal parser that can be used by multiple algorithm animation systems. This parser generates a Java object hierarchy (in the figure,
71
72
CHAPTER 6. IMPLEMENTATION
Xaal objects). In addition, there is a part of software that can serialize the object hierarchy to a Xaal XML document. Parser
Adapter
XAAL Objects XAAL Document
AA System
Serializer Generator
Figure 6.1: Integrating Xaal with existing AA systems using an object hierarchy. The existing AA systems can then implement adapters that convert the Xaal object hierarchy into an animation in that particular system. By implementing a generator, the existing systems can generate the object hierarchy and serialize it as Xaal. This solution requires no major modifications to the existing systems, and thus the level of implementing Xaal remains fairly low. Another advantage is that the document has to be parsed only once. There is, however, one extra step in the process compared to the direct approach of parsing the Xaal document directly into the AA system. However, implementing a Xaal parser for each system would not be sensible, and thus the extra processing is not considered a major problem. In this thesis, we have implemented the Xaal object hierarchy with a parser and serializer. The implementation is on a prototype level, and not all elements are fully supported. Another part of the implementation is an adapter and a generator between Xaal objects and MatrixPro, which implement the data structures and data structure operations parts of the language. These implementations are described in Section 6.3.
6.2
XSL Processing
Another way to integrate Xaal with existing systems is represented in Figure 6.2. This way provides a simple solution to import Xaal documents into existing AA systems that have an algorithm animation language. It can also be used to export different formats from a system that supports Xaal. In this solution, an existing Xaal document is processed with an XSL processor with an appropriate XSL stylesheet. The stylesheet is a mapping from Xaal to the language of the target system. Thus, the existing AV system can then parse the
73
CHAPTER 6. IMPLEMENTATION
XSL Document
AA System
XSL Processor XAAL Document
AA System Document
Figure 6.2: Integrating Xaal with existing AA systems using XSL stylesheet processing. generated file in its language. Naturally, any algorithm animation language that is XML, can be transformed similarly to Xaal. The benefit of this approach is that the XSL stylesheets are quite simple to write for a person who knows the syntax of Xaal, the target language, and XSL. Moreover, the target system needs not be changed at all. This makes it possible to integrate Xaal with systems that are not open-source. On the negative side, this approach requires parsing of three files: the stylesheet, Xaal document, and the generated AV system document. The following section describes prototype implementations of this solution.
6.3
Prototype Implementations
As mentioned earlier, we have implemented prototypes of the language and transformations between various existing algorithm animation languages. In the following sections, we will briefly describe these prototypes and discuss the advantages and disadvantages of the different solutions, as well as state the level of Xaal features supported.
6.3.1
Xaal Objects and Xaal Parser
The center of the Xaal implementation is Xaal Objects (XO). This is a collection of Java classes that correspond to the different elements and attributes in Xaal documents. The XO hierarchy is essentially a mapping of the XML elements into Java objects.
For most of the elements in the XML specification
74
CHAPTER 6. IMPLEMENTATION
there is a corresponding Java class. This class has methods for setting and getting all the values of the attributes specified for the XML element. It also has similar methods for setting and getting sub-elements. For elements that can appear multiple times as child elements, there are methods to add and list the elements. Figure 6.3 gives an example how the create element is mapped to Java class xaal.objects.animation.CreateOperation. CreateOperation
XML instance
get/setId
get/setTarget get/setNarrative
...
addGraphical get/setGraphical
...
addStructure getStructures
... ...
Figure 6.3: Example of the mapping between Java classes and XML instance. The Xaal objects hierarchy can be generated in multiple ways, the most natural of which is the Xaal parser. The parser we have implemented is a SAX content handler. Thus, the methods of the content handler are notified based on the logical content of an XML document. The main functionality of the parser is essentially in the following methods: • start/endElement - Methods called whenever an element in an XML document is started and ended. The startElement method gets, for example, the name and the attributes of the element as attributes. • start/endDocument Methods called whenever a document is started or ended. • characters Method called when character content of elements is encountered. The Xaal objects and Xaal parser prototype implementations support most of the elements and functionality specified in the language. However, one major feature still unimplemented is the graphical primitive animation. In addition, the current parser does not behave well when the source document is not well-formed XML. We
CHAPTER 6. IMPLEMENTATION
75
should also make the parser modular in the same way as the schemas. This would allow a developer to change or reuse a part of the Xaal parser.
6.3.2
Adapters and Generators
An important part of the implementation is the generator that allows the generation of Xaal Objects from MatrixPro animations. The implementation of the structure export is done by visiting all the visualizations of MatrixPro and producing a XO hierarchy of them. Graphical primitive information is added by taking advantage of the existing graphical primitive export functionality of MatrixPro. For the data structure operations to be identifiable, we decided to annotate the visualizations of MatrixPro and thus add the required information. This solution is not ideal, since it makes it impossible, for example, to generate Xaal from animations generated through an algorithm that operates with the underlying data structures instead of the visualizations. However, this solution allowed us to implement the Xaal export with minimal changes to MatrixPro. In addition, the creation of new visualizations is rarely done. And even for new layouts, there is no need to annotate the visualizations for Xaal export to work. However, in the future, this approach should be reconsidered. In the implementation, another unsolved problem arose with the need to bind together the visualizations, data structures, and the underlying memory structures1 of MatrixPro. This made it impossible to bind certain memory structures to their corresponding visualizations. The adapter implementation allows us to adapt XO hierarchies to be used in MatrixPro. It essentially generates a MatrixPro animation sequence from the Xaal objects hierarchy. The adapter supports the data structures and data structure operations of Xaal. The implementation relies heavily on the Polymorph interface of MatrixPro. This interface is intended for transforming data structures to other structures, for example, a tree to graph or vice versa. In practice, the interface allows us to add new nodes and edges to the existing structures. As part of the implementation of the adapter, we have added the Polymorph support to most of the structures in MatrixPro. 1
Memory structures are automatically animated objects in MatrixPro used to implement the data structures.
CHAPTER 6. IMPLEMENTATION
6.3.3
76
XSL Stylesheets
In this thesis, we have implemented the XSL solution to translate Xaal documents to AnimalScript, JAWAA, and SVG. These implementations are only prototypes, and do not cover the whole range of features in the languages. In the following, we will briefly describe the implementations. The AnimalScript transformation implementation is a simple XSL stylesheet with templates to support currently only the graphical primitives of Xaal. It can, however, transform the graphical information of data structures and thus these can also be transformed into AnimalScript. The only requirement is for the Xaal animation to include the graphical information about the structures. Data structures without the graphical information cannot be transformed, since AnimalScript has no support for data structures. A possible solution for this problem is to use a system like MatrixPro to add the graphical representation. As graphical primitive transformations are not implemented, this AnimalScript transformation does not support any animation. Also, stylesheet inheritance is not supported by the implementation. The JAWAA transformation implementation is highly similar to the AnimalScript implementation. The XSL stylesheets are almost identical, only the names and the order of different elements are different. Thus, the JAWAA transformation implementation has the same features as the AnimalScript implementation. SVG support into Xaal tools is implemented in both directions: from SVG to Xaal and from Xaal to SVG. The fact that SVG is an XML format made it easy to transform SVG using an XSL stylesheet. The current implementations support, like all the prototypes, only basic graphical primitives without animation. Since SVG has many features that Xaal does not support, only fraction of SVG elements is currently transformed to Xaal. For example, all scripting and filtering is ignored. Listings 6.1-6.4 gives an example of a simple Xaal document that describes a node with graphical primitives and the document transformed to AnimalScript, SVG, and JAWAA. As can be seen, the notation of Xaal is much more verbose than the other languages. However, at the same time it is much more informative for a human reader.
77
CHAPTER 6. IMPLEMENTATION 1 2 3 4 5 6 7 D
Listing
6.1:
Transformation
example. Xaal source document.
1 %Animal 1.0 title "" 2 { 3 circle "d0e3" (85,54) radius 13 color (0, 4 5
0, 255) text "d0e9" "D" (80,58) color (255, 0, 0) size 12 }
Listing 6.2: AnimalScript result. 1 2
Listing 6.3: SVG result. 1 circle d0e3 72 41 26(0,0,255) transparent 2 text d0e9 80 58 "D" (255,0,0)
Listing 6.4: JAWAA result.
Chapter 7
Evaluation In this chapter, we will evaluate the language defined in Chapter 5 using the Algorithm Animation Language Taxonomy defined in Chapter 3. We will also evaluate the language based on the transformations and adaptations done in the implementation of the language.
7.1
Taxonomic Evaluation
In this section we will use our newly defined taxonomy to evaluate the language. In addition, we will repeat the evaluation of SVG and compare Xaal with SVG. Reason for using SVG is that in Chapter 3 we concluded SVG having the richest set of features in most of the categories.
7.1.1
Category Animation
Evaluation of Xaal in category Animation is in Tables 7.1 and 7.2. Compared to the existing AA languages [2, 15, 23, 44, 46], Xaal has a quite rich set of data structure operations. However, these require advanced features from the system implementing the language. This is where Xaal has a much more advanced features compared with SVG. The graphical primitive transformations available are the ones defined by the ITiCSE XML Working Group. Thus, Xaal fulfills the requirements for an algorithm animation language as seen by the international AA community. However, these features are not as versatile as in SVG.
78
79
CHAPTER 7. EVALUATION
Table 7.1: Evaluation of the languages in category Animation (1/2). DS operations
Grouping
Timing
Xaal
create, remove, replace, swap, insert, delete, and search
yes
yes
delay, duration
SVG
none
no
no
delay, duration, min, max, repeat, key times
Hierarchies
Language
Table 7.2: Evaluation of the languages in category Animation (2/2).
Scale
Style
Translate
Visual attribute animation Rotate
Language
Xaal
yes
yes
all Xaal stylesheet properties
move, move relative, and move following an arc or polyline object
The evaluation of Xaal in category Interaction is represented in Table 7.3. The only interaction that the language supports is stopping the animation. This is a known lack of the language since interaction is important. However, we decided not to define any interaction, since the Working Group [41] is still working on this topic. Thus, we can include it in the language in a future version once the working group finishes its specification.
7.1.3
Category Language
Evaluation of Xaal in category Language is in Table 7.4. In Xaal, we decided not to use any standard for the metadata due to the sheer complexity of such standards.
80
CHAPTER 7. EVALUATION
Table 7.3: Evaluation of the languages in category Interaction.
Stop
Type
Level
Engagement
Speed
Control Play
Language
Xaal
no
no
yes
none
none
SVG
no
no
no
none
none
SVG + ECMAScript
yes
yes
yes
any
any
Xaal has, however, support for more metadata than the existing AA languages evaluated in this thesis. We also believe that including a small but specified amount of metadata is more beneficial than allowing arbitrary metadata, as done in SVG. Again, in a future versions, we might decide to also endorse some metadata standard. Furthermore, Xaal can be considered extensible, but only to some extent. The extension mechanisms can be improved, and this is another one of our future goals. Table 7.4: Evaluation of the languages in category Language. Language
Comments
Debug
Extensible
Localization
Metadata
Xaal
yes
no
(yes)
yes
author, application used, and animation description, subject, and keywords
SVG
yes
yes
yes
yes
any
7.1.4
Category Positioning
Evaluation of Xaal in category Positioning is in Table 7.5. As many of the existing AA languages, Xaal supports 2 dimensions with the additional depth setting for overlapping objects. Layout can be specified in Xaal but this is not required. This allows it to be used in tools that support automatic layout as well as in tools where the layout must be user specified. Features in SVG are quite similar.
81
CHAPTER 7. EVALUATION
Table 7.5: Evaluation of the languages in category Positioning. Language
Coordinates
Dimensions
Layout
Xaal
absolute, relative to a location
2.5
can be specified but is not required
SVG
absolute, relative
2
n/a
7.1.5
Category Style
Evaluation of Xaal in category Style is in Tables 7.6 and 7.7. Xaal supports colors as RGB values and some predefined color names (same 17 as in CSS2 [8]). Compared to existing AA languages, the styling options in Xaal are more than adequate. However, SVG has a more diverse set of styling options, and including these in Xaal remains a future challenge.
Colors
Fill style
Variant
Font
Xaal
RGB-values, 17 predefined names
solid
serif, sans serif, monospaced
yes
bold, italic
SVG
16 predefined, RGB values (as integers, percentages, or hexadecimals)
solid, gradient, pattern
serif, sansserif, cursive, fantasy, monospaced, user specified
yes
bold, italic, small caps
Family
Language
Size
Table 7.6: Evaluation of the languages in category Style (1/2).
The advanced feature compared to the existing AA languages is the support for reusable and extensible stylesheets. These are not, however, as versatile as in SVG due to the more limited styling functionality of Xaal.
7.1.6
Category Vocabulary
Evaluation of Xaal in category vocabulary is in Table 7.8. The graphical primitives in Xaal are the same supported by most of the AA languages and SVG. However,
82
CHAPTER 7. EVALUATION
Table 7.7: Evaluation of the languages in category Style (2/2). Language
Line style
Opacity
Stylesheets
Xaal
arrows, solid, dashed, dotted
yes
yes
SVG
width, dash pattern, color, line end, line join
yes
yes
there are more data structures supported in Xaal than in SVG or the AA languages. Programming concepts are currently not supported in Xaal and thus these are not included in the table. SVG with ECMAScript has advanced programming functionality. Table 7.8: Evaluation of the languages in category Vocabulary. Language
Data structures
Graphical primitives
Sound
Xaal
array, graph, list, and tree
point, polyline, polygon, line, arc, ellipse, circle and circle-segment, square, triangle, rectangle, and text
yes
SVG
none
rectangles, circles, ellipses, polylines, polygons, text
no
7.2
Implementation-based Evaluation
In this section, we will consider the suitability of Xaal as an intermediate language between the system and languages we used in the implementation: AnimalScript, JAWAA, MatrixPro, and SVG. Although we have left out of the language some of the most complex features that came up (for example, programming concepts), Xaal is still quite a complex language. The current prototype implementation is a good indicator of this, since the original aim of this thesis was to provide a full implementation. However, that was not achieved due to the limited time to finish the thesis. Nevertheless, we can consider the feasibility of Xaal as an intermediate language. The only main problem with the implementation of the transformations was the inclusion of graphical primitives. Transforming from Xaal to one of the graphical primitive based languages requires the inclusion of graphical representation. So far,
CHAPTER 7. EVALUATION
83
the only system capable of adding this is MatrixPro. Thus, we must include another step in the processing of a Xaal document containing only data structures into, say, SVG. Another problem that we see that did not come up in the implementation is the different approach to animation in SVG. While in JAWAA, AnimalScript, and Xaal the animations are specified in the order that they occur, SVG groups the animations with the object they animate. Thus, conversion of animation between these languages would probably require some complex XSL templates. However, we believe that this could definitely be done. All in all, the transformations from Xaal to the other languages is pretty straightforward. An interesting problem would be to try to transform, for example, AnimalScript into Xaal, and try to recognize possible data structures from the graphical primitives. In this thesis, we did not, however, have the time to implement an AnimalScript parser that would be required to do such transformations.
Chapter 8
Conclusions In this thesis, we have first surveyed a number of algorithm animation systems and the algorithm animation languages they use. Based on this survey, we have defined a Taxonomy of Algorithm Animation Languages to help in comparing the different AA languages. This taxonomy helped us in defining a new algorithm animation language, eXtensible Algorithm Animation Language, Xaal. We gave an overview of the features of Xaal in Chapter 5 and later described a prototype implementation of Xaal related tools. Finally, we evaluated the new language based on the AA language taxonomy and the prototype implementations. Xaal supports both of the two approaches in the existing AA languages: graphical primitives and data structures. Graphical primitives and transformations on them in Xaal are quite the same as in other AA languages. However, it is not as advanced as SVG. On data structure level, Xaal has more structures and operations than the existing languages or SVG. Combining these two approaches can be seen as the key of Xaal and the feature that distinguishes it from the existing AA languages and SVG. We have implemented various adapters and generators between Xaal and other algorithm animation languages. Thus, we already have several different formats available for the same animation. The current selection of formats is presented in Figure 8.1. As can be seen, many of the transformations are only available in one direction. A future challenge is to be able to generate Xaal documents with other systems, or alternatively, parse/transform other formats into Xaal. The prototypes do not implement all the features of the new language. For example, graphical primitive animation can be considered very important when exchanging
84
85
CHAPTER 8. CONCLUSIONS
AnimalScript
XAAL MatrixPro
XAAL Objects
JAWAA
SVG
Figure 8.1: Prototype format transformations implemented in this thesis. The arrows represent the direction of the transformation. information between systems like Animal or JAWAA. Still, the prototypes enable us to transfer data between AA systems. Thus, we feel that we have demonstrated that this kind of approach is suitable for the problem at hand and would be worthwhile to complete the implementation of the existing prototypes and include other languages in the (near) future.
8.1
Future Work
We have numerous improvements and ideas for the future of the language, and here we will write down some of the most interesting ones. The most urgent requirement is naturally to finish the prototype implementation of the parser and the adapters and generators. The language could be extended to include programming concepts and thus allow the definition of algorithms and program visualization. This could be achieved, for example, by allowing o:XML1 notation to be included in Xaal documents. Support for interaction should also be added to the language. This could possibly use the specification of the ITiCSE XML Working Group once it finishes the definitions. The language could also be used by creating a tool capable of creating visual algorithm simulation exercises from Xaal animations. The idea is that the animation defines the model answer of an exercise. Then, this new tool could be embedded into 1
o:XML is an XML language for object-oriented programming.
CHAPTER 8. CONCLUSIONS
86
a web-page as an automatically assessed exercise. This method would allow very easy generation of active learning components [43] to be used in hypertextbooks as well as exercises to be used in the TRAKLA2 learning environment [36]. On a more general level, our goal is therefore to find new application areas for algorithm animation using the new tool. Currently we have applied algorithm animation only in the context of data structures and algorithms, but one challenge is to apply it to different areas.
8.2
Summary
We feel that the new language can be successfully used in exchanging data between different algorithm animation systems. However, it would require a more complete implementation of the language and the adapters and generators to get the full benefit of the language. And finally, it is interesting to see what kind of effect this work has on the ongoing work of the Working Group.
Bibliography [1] ECMAScript language specification, 3rd ed. Technical report, Ecma International, December 1999. [2] Ayonike Akingbade, Thomas Finley, Diana Jackson, Pretesh Patel, and Susan H. Rodger. JAWAA: easy web-based animation from CS 0 to advanced CS courses. In Proceedings of the 34th SIGCSE technical symposium on Computer science education, SIGCSE’03, pages 162–166, Reno, Navada, USA, 2003. ACM Press. [3] Jay Martin Anderson and Thomas L. Naps. A context for the assesment of algorithm visualization systems as pedagogical tool. In Proceedings of the First Program Visualization Workshop, pages 121–130, Porvoo, Finland, 2001. University of Joensuu. [4] Jeff Ayars, Dick Bulterman, Aaron Cohen, Ken Day, Erik Hodge, Philipp Hoschka, Eric Hyche, Muriel Jourdan, Michelle Kim, Kenichi Kubota, Rob Lanphier, Nabil Laya¨ıda, Thierry Michel, Debbie Newman, Jacco van Ossenbruggen, Lloyd Rutledge, Bridie Saccocio, Patrick Schmitz, and Warner ten Kate (editors). Synchronized Multimedia Integration Language (SMIL 2.0) specification. W3C Recommendation, World Wide Web Consortium, January 2005. [5] Ronald M. Baecker. Two systems which produce animated representations of the execution of computer programs. In Proceedings of the fifth SIGCSE technical symposium on Computer science education, SIGCSE’75, pages 158– 167. ACM Press, 1975. [6] Ronald M. Baecker. Sorting out sorting. Narrated colour videotape, 30 minutes, 1981.
87
88
BIBLIOGRAPHY
[7] Ronald M. Baecker. Sorting out sorting: A case study of software visualization for teaching computer science. In M. Brown, editor, Software Visualization: Programming as a Multimedia Experience, chapter 24, pages 369–381. The MIT Press, Cambridge, MA, 1998. [8] Bert Bos, Tantek C ¸ elik, Ian Hickson, and H˚ akon Wium Lie. Cascading Style Sheets, CSS 2.1 specification. W3C Working Draft, World Wide Web Consortium, June 2005. [9] Tim Bray,
Jean Paoli,
C. M. Sperberg-McQueen,
Eve Maler,
and
Fran¸cois Yergeau (editors). Extensible markup language (xml) 1.0 specification (third edition). W3C Recommendation, World Wide Web Consortium, February 2004. [10] Marc H. Brown. Fundamental techniques for algorithm animation displays. In M. Brown, J. Domingue, B. Price, and J. Stasko, editors, Software Visualization: Programming as a Multimedia Experience, chapter 7, pages 82–101. The MIT Press, Cambridge, MA, 1998. [11] Marc H. Brown and John Hershberger. Color and sound in algorithm animation. Computer, 25(12):52–63, October 1992. [12] Marc H. Brown and Marc A. Najork. Algorithm animation using 3D interactive graphics. In Proceedings of the 6th annual ACM symposium on User interface software and technology, UIST’93, pages 93–100, Atlanta, Georgia, United States, 1993. ACM Press. [13] Marc H. Brown and Robert Sedgewick. A system for algorithm animation. In Proceedings of the 11th annual conference on Computer graphics and interactive techniques, SIGGRAPH’84, pages 177–186. ACM Press, 1984. [14] Marc H. Brown and Robert Sedgewick. Techniques for algorithm animation. IEEE Software, 2(1):28–39, January 1985. [15] Justin Cappos and Patrick Homer. tures for CS2 and CS3 courses.
DsCats:
Animating data struc-
Unpublished technical paper, 2002.
http://www.cs.arizona.edu/dscats/dscatstechnical.pdf. [16] James Clark (editor). XSL Transformations (XSLT) 1.0 specification. W3C Recommendation, World Wide Web Consortium, nov 1999.
BIBLIOGRAPHY
89
[17] David C. Fallside and Priscilla Walmsley (editors). Xml schema part 0: Primer (second edition). W3C Recommendation, World Wide Web Consortium, 2004. [18] Jon Ferraiolo, Fujisawa Jun, and Dean Jackson (editors). Scalable Vector Graphics (SVG) 1.1 specification. W3C Recommendation, World Wide Web Consortium, January 2003. [19] Joan M. Francioni, Larry Albright, and Jay Alan Jackson. Debugging parallel programs using sound. SIGPLAN Notices, 26(12):68–75, December 1991. [20] Peter A. Gloor. User interface issues for algorithm animation. In Software Visualization: Programming as a Multimedia Experience, chapter 9, pages 145– 152. The MIT Press, Cambridge, MA, 1998. [21] Jyrki Haajanen, Mikael Pesonius, Erkki Sutinen, Jorma Tarhio, Tommi Ter¨asvirta, and Pekka Vanninen. Animation of user algorithms on the Web. In Proceedings of Symposium on Visual Languages, pages 360–367, Isle of Capri, Italy, 1997. IEEE. [22] Ivan Herman and M. Scott Marshall. GraphXML - an XML-based graph description format. In Proceedings of the 8th International Symposium on Graph Drawing, pages 52–62, 2000. [23] Christopher D. Hundhausen and Sarah A. Douglas. Low-fidelity algorithm visualization. Journal of Visual Languages & Computing, 13(5):449–470, October 2002. [24] Christopher D. Hundhausen, Sarah A. Douglas, and John T. Stasko. A metastudy of algorithm visualization effectiveness. Journal of Visual Languages & Computing, 13(3):259–290, June 2002. [25] Juha Hyv¨onen and Lauri Malmi. TRAKLA – a system for teaching algorithms using email and a graphical editor. In Proceedings of HYPERMEDIA in Vaasa, pages 141–147, 1993. [26] IEEE Computer Society. IEEE standard for learning object metadata, September 2002. [27] Ville Karavirta, Ari Korhonen, Lauri Malmi, and Kimmo St˚ alnacke. MatrixPro - a tool for on-the-fly demonstration of data structures and algorithms. In Proceedings of the Third Program Visualization Workshop, pages 26–33, The University of Warwick, UK, July 2004.
BIBLIOGRAPHY
90
[28] Ville Karavirta, Ari Korhonen, and Petri Tenhunen. Survey of effortlessness in algorithm visualization systems. In Proceedings of the Third Program Visualization Workshop, pages 141–148, The University of Warwick, UK, July 2004. [29] Andreas Kerren and John T. Stasko. Algorithm animation. In Stephan Diehl, editor, Software Visualization: International Seminar, pages 1–15. Springer, Dagstuhl, Germany, 2001. [30] Ken Knowlton. L6: Bell telephone laboratories low-level linked list language,. 16 minute black-and-white film, 1966. [31] Ari Korhonen. Visual Algorithm Simulation. Doctoral thesis, Helsinki University of Technology, 2003. [32] Ari Korhonen and Lauri Malmi. Algorithm simulation with automatic assessment. In Proceedings of The 5th Annual SIGCSE/SIGCUE Conference on Innovation and Technology in Computer Science Education, pages 160–163, Helsinki, Finland, 2000. ACM. [33] Ari Korhonen and Lauri Malmi. Matrix — Concept animation and algorithm simulation system. In Proceedings of the Working Conference on Advanced Visual Interfaces, pages 109–114, Trento, Italy, May 2002. ACM. [34] Ari Korhonen, Erkki Sutinen, and Jorma Tarhio. Understanding algorithms by means of visualized path testing. In Stephan Diehl, editor, Software Visualization: International Seminar, pages 256–268, Dagstuhl, Germany, 2002. Springer. [35] Jan L¨ onnberg, Ari Korhonen, and Lauri Malmi. MVT: a system for visual testing of software. In Proceedings of the working conference on Advanced visual interfaces, AVI’04, pages 385–388. ACM Press, 2004. [36] Lauri Malmi, Ville Karavirta, Ari Korhonen, Jussi Nikander, Otto Sepp¨ al¨a, and Panu Silvasti. Visual algorithm simulation exercise system with automatic assessment: TRAKLA2. Informatics in Education, 3(2):267–288, 2004. [37] Andr´es Moreno, Niko Myller, Erkki Sutinen, and Mordechai Ben-Ari. Visualizing programs with Jeliot 3. In Proceedings of the International Working Conference on Advanced Visual Interfaces, pages 373–376, Gallipoli (Lecce), Italy, May 2004.
91
BIBLIOGRAPHY
[38] Marc Najork. Web-based algorithm animation. In Proceedings of the 38th conference on Design automation, DAC’01, pages 506–511, Las Vegas, Nevada, United States, 2001. ACM Press. ´ - an en[39] Thomas L. Naps, James R. Eagan, and Laura L. Norton. JHAVE vironment to actively engage students in web-based algorithm visualizations. In Proceedings of the thirty-first SIGCSE technical symposium on Computer science education, SIGCSE’00, pages 109–113, Austin, Texas, United States, 2000. ACM Press. [40] Thomas L. Naps, Guido R¨oßling, Vicki Almstrum, Wanda Dann, Rudolf Fleischer, Chris Hundhausen, Ari Korhonen, Lauri Malmi, Myles McNally, Susan ´ Rodgers, and J. Angel Vel´ azquez-Iturbide. Exploring the role of visualization and engagement in computer science education. SIGCSE Bulletin, 35(2):131– 152, June 2003. [41] Thomas L. Naps, Guido R¨oßling, Peter Brusilovsky, John English, Duane Jarc, Ville Karavirta, Charles Leska, Myles McNally, Andr´es Moreno, Rockford J. Ross, and Jaime Urquiza-Fuentes. Development of xml-based tools to support user interaction with algorithm visualization. SIGCSE Bulletin, 2005. To appear. [42] Blaine A. Price, Ronald M. Baecker, and Ian S. Small. A principled taxonomy of software visualization. Journal of Visual Languages & Computing, 4(3):211– 266, 1993. [43] Rockford J. Ross and Michael T. Grinder. Hypertextbooks: Animated, active learning, comprehensive teaching and learning resource for the web. In Stephan Diehl, editor, Software Visualization: International Seminar, pages 269–283, Dagstuhl, Germany, 2002. Springer. [44] Guido R¨oßling and Bernd Freisleben.
Program visualization using Ani-
malScript. In Proceedings of the First Program Visualization Workshop, pages 41–52, University of Joensuu, Finland, 2000. [45] Guido R¨oßling and Bernd Freisleben. Animal: A system for supporting multiple roles in algorithm animation. Journal of Visual Languages & Computing, 13(3):341–354, June 2002. [46] Guido R¨oßling, Felix Gliesche, Thomas Jajeh, and Thomas Widjaja. Enhanced expressiveness in scripting using AnimalScript 2. In Proceedings of the Third
BIBLIOGRAPHY
92
Program Visualization Workshop, pages 10–17, The University of Warwick, UK, July 2004. [47] Guido R¨oßling and Gina H¨ aussage. Towards tool-independent interaction support. In Proceedings of the Third Program Visualization Workshop, pages 110– 117, The University of Warwick, UK, July 2004. [48] John T. Stasko. Jsamba - java version of the SAMBA animation program. Available online at http://www.cc.gatech.edu/gvu/softviz/algoanim/jsamba/. [49] John T. Stasko. TANGO: A framework and system for algorithm animation. IEEE Computer, 23(9):27–39, 1990. [50] John T. Stasko. Using direct manipulation to build algorithm animations by demonstration. In Proceedings of Conference on Human Factors and Computing Systems, pages 307–314, New Orleans, Louisiana, USA, 1991. ACM, New York. [51] John T. Stasko. Using student-built algorithm animations as learning aids. In Proceedings of the 28th SIGCSE Technical Symposium on Computer Science Education, SIGCSE’97, pages 25–29, San Jose, CA, USA, 1997. ACM Press. [52] John T. Stasko and Eileen Kraemer. A methodology for building applicationspecific visualizations of parallel programs. Journal of Parallel and Distributed Computing, 18(2):258–264, 1993. [53] Achim Steinacker, Amir Ghavam, and Ralf Steinmetz. Metadata standards for web-based resources. IEEE Multimedia, 8(1):70–76, jan 2001. [54] Linda Stern, Harald Søndergaard, and Lee Naish. A strategy for managing content complexity in algorithm animation. In Proceedings of the 4th annual SIGCSE/SIGCUE Conference on Innovation and Technology in Computer Science Education, ITiCSE’99, pages 127–130, Kracow, Poland, 1999. ACM Press. [55] Paul Vickers and James Alty. CAITLIN: A musical program auralisation tool to assist novice programmers with debugging. In Proceedings of the Third International Conference on Auditory Display, ICAD’96, pages 17–24, Palo Alto, California, United States, 1996. [56] Andreas Winter. Exchanging graphs with GXL. In Graph Drawing - 9th Interational Symposium, pages 485–500, Vienna, Austria, 2001.
