行政院國家科學委員會專題研究計畫成果報告
演算法視覺化系統
An Algorithm Animation/Visualization System
計畫編號：NSC 87-2213-E-126-003
執行期限：86 年 8 月 1 日至 87 年 7 月 31 日
主持人：林耀鈴 靜宜大學 資訊管理學系
E-mail: yllin@csim.pu.du.tw
一、中文摘要
algorithm.
However,
creating
a
good
animation is an art. It is difficult to create an
animation that clearly communicates the
essence of an algorithm. The purpose of this
project is to investigate various aspects in
designing an algorithm animation system
over the World-Wide Web. We plan to
design a system that will generate animations
of algorithms easily. The goal is to design,
implement,
and
document
various
visualization techniques for presenting a
演算法動畫系統利用計算機視覺技
術，來幫助學習者有效率地以視覺行為直
接瞭解、領悟一個抽象演算法之行為。同
時，演算法動畫系統也可以幫助演算法設
計者除錯、或是用來展示某些特別領域的
演算法給領域外的其他更廣域的人們。不
過，演算法視覺動畫化這個過程並不容
易。人們常常很難以一個圖形系統展示一
個演算法的精髓。因此，本計畫的目的就
是要探討如何設計一套幫助演算法動畫設
計者展現他們的演算法動畫在全球網際網
路之上。我們希望這套系統能使演算法動
畫設計者很容易使用。同時，我們也希望
藉此計畫來探討、分析、設計一套表現常
見的資料結構如圖型、樹、堆積（heap）
等等。
library of abstract combinatorial structures,
like graphs, trees, heaps, ... etc., that
commonly appear in many algorithms.
Keywords: Algorithm animation,
visualization, computer graphics, graphics
user interface
關鍵詞：演算法動畫、視覺系統、計算機
圖形系統、圖形使用者介面。
二、緣由與目的
Abstract
By using animation (with graphics and sound)
and the interaction possibilities we do benefit
from the added motivation with the learners /
students doing their individual explorations.
Algorithm
animation
[2]
uses
computer-assisted visualization, aiding the
learner to understand algorithms by visually
following their step-by-step execution, a
Algorithm animation uses computer-assisted
visualization, aiding the learner to visually
understand the algorithms. Algorithm
animation is also a powerful software tool
that can assist the algorithm designer in code
debugging and in demonstrating a complex
algorithm to a larger audience than merely
specialists in the particular area of the
1
complex task if relying on the textual
includes libraries of combinatorial structures
program alone [14]. In particular, students
can visually study the detailed motion of each
step of the algorithm; thus they would gain
insight from the pictures. Algorithm
animation is also a powerful software tool
that can assist the algorithm designer in code
debugging and in demonstrating a complex
algorithm to a larger audience than merely
specialists in the particular area of the
algorithm [10].
[11] and 3D interactive graphics [4].
Developed
in
Dortmund
University,
Germany, ZADA [8], is also realized in
Modula-3 by utilizing the Zeus system. It
allows easy description of animation views
and the animated algorithms. The
GeoMAMOS project [7], developed by D.T.
Lee in Northwestern University, is an
X-windows based integrated environment to
support geometric programming. Based on
While using visual techniques to teach
students in understanding data structure
algorithms at the undergraduate level,
Michail [9] noted that we can ask students to
implement the algorithm in conventional
programming language, to prove program
correctness, or to observe an algorithm
animation. However, implementation, though
effective in teaching algorithms, requires
the original GeoSheet system [6],
GeoMAMOS is designed for manipulation
and monitoring of geometric objects based on
specified instructions during or after the
execution of geometric algorithms. The ease
of use of the interface and its availability on
the Web makes possible wide access to
algorithm animation for education and for
algorithm dissemination. In the Mocha
low-level details coding, and it may not help
students understanding the key concepts.
Proof of correctness of algorithms, while
allows the students to understand the general
ideas, could be laborious and error-prone.
Algorithm animation is the process of
abstracting data, operations, and semantics of
computer programs, and then creating
animated graphical views of those
abstractions. The GVU center in Georgia
system [1], the animation interface code,
written by Java programming language, is
exported to the user machine, while the
algorithm is executed on a server that runs on
the provider's machine.
The purpose of this project is to
investigate various aspects in designing an
algorithm animation system over the
World-Wide Web. Since the Java language
opens the possibility of embedding
Institute of Technology developed several
algorithm animation systems including
TANGO [12], XTANGO [13], and recently,
the POLKA system [5, 15]. After finished his
book [2], Brown developed an algorithm
animation system, called Zeus [3], by using
Modula-3 at the Digital Equipment
Corporation. Features in the Zeus system
interactive applications in HTML documents,
we plan to design a system that will generates
an animation of a particular algorithm easily.
Further, we will try to design, implement,
and
document
various
visualization
techniques for presenting a library of abstract
combinatorial structures, like graphs, trees,
heaps, ... etc., that commonly appear in many
2
algorithms.
三、結果與討論
From the end users' perspective, the
animation system includes a specification of
several abstract combinatorial elements and
some drawing primitives. The animation
designer writes his own algorithm by using
his most comfortable computer languages.
Along with each step of the algorithm, the
designer's program produces algorithm
events (consisted of abstract text outputs
according to the specification.) These
本計畫所提之演算法視覺化系統可分
為下列幾個部份：
 事 件 轉 換 程 式 EC (the Event
Compiler)：將演算法事件轉換成圖像
事件碼 GEC 的系統內部轉換程式。

algorithm events will be compiled by our
animation system into a series of graphic
events. A generic animation agent (a Java
program) will interpret and draw these
graphical events when activated. The
animation agent, together with the graphic
events, is compiled into Byte codes (a
`` .class'' file) that is embedded in the HTML
document, providing a widest accessibility to

the end users.
The
reason
for
the
extra
intermediate codes that separates the
animation designer and visualization system
shall be clear. Creating an animation that
clearly communicates the essence of an
algorithm is an art. The animation designer
must take the internal states and actions of an
algorithm and convert them into a series of
visual images. Thus the intermediate
algorithm-event codes shall be simple and
easily understandable, so that the animation
designers
(probably
beginners
for
visualization effects) can concentrate on their
algorithmic idea and global structure of the
events instead of too much details in the
visualization process. Further, the algorithm
animation system developers can improve
their
various
detailed
visualization
techniques independent of the animation
designers' involvement since these raw
algorithm events had long been produced by
the designer.
(AA Parser)
圖 像 事 件 碼 GEC (Graphic Event
Codes)}：一組基本圖像、動畫事件語
言：如圖學中的點、線之實際圖像細
節；數值、陣列、指標的具像圖徵等等。
動 畫 顯 像 系 統 AA (the Animation
Agent)：解讀、顯示上述圖像事件碼的
一套 Java 程式。 GEC 和 此 Java 程
式組合後，利用 Java compiler 編譯成
byte codes，配合包含此 byte codes 的
一個 HTML 文件，讀者就可以利用
World-Wide Web 來觀看這個演算法視
覺化系統所製作出來的動畫。
(Animation, Gedit, GShow)
最後, 我們發展、設計出此套解讀、顯
示圖像事件碼語言 GEC 的 Java 程式。
(mp.App.Gedit) 並 配 合 參 考 設 計 一 組
HTML 文件，以供讀者利用 World-Wide
Web 來觀看這個演算法視覺動畫系統所
製作出的成果。
四、計畫成果自評
本計畫演算法視覺化系統成果已放置於
http://www.algo.cs.pu.edu.tw/algo-vi
靜宜大學演算工程實驗室網頁下.
展示部份為 Selection Sort, Quick Sort 及
可供使用者自行鍵入之 Graphics Event
Code (GEC), 作即時之動態圖形示範. (請
參考 GEC specification).我們也完全公開所
有 java 程式碼, 以供各方有興趣者取用、
sual/
3
做為未來持續的發展.
五、參考文獻
Baltimore, MD, May 1993.
[11] M. Najork and M.H. Brown. A library for
visualizing combinational structures. IEEE
[1] J.E. Baker, I.F. Cruz, G.Liotta, and R.Tamassia. A
Visualization, October 1994.
New model for algorithm over the WWW. Acm
[12] J.T. Stasko, Tango: A framework and system for
Computing Surveys, 27(4):568-572, December
algorithm animation. IEEE Computer,
1995.
23(9):27-39,
[2] M.H. Brown. Algorithm Animation. MIT Press,
[13] J.T. Stasko, Animating algorithms with
Cambridge, MA, 1988.
XTANGO.SIGACT News, 23(2):67-71, 1992.
[3] M.H. brown. Zeus: A system for algorithm
http://www.cc.gatech.edu/guv/softviz/algorithm/xt
animation and multi-view editing. In
ango.html
http://www.research.digital.com/SRC/Zeus/h
[14] J.T. Stasko, A. Badre, and C. Lewis. Do
ome.html
[4] M.H. Brown and M. Majork,
November 1990.
algorithm animations assist learning? An
Algorithm
empirical study and analysis. In Proceeding of
animation Using 3D interactive graphics. In ACM
ACM Conference on Human Factors in
Symposium on User Interface Software and
Computing Systems, pages 61-66, 1993.
Technology. Page 93--100,
[15] J.T. Stasko and D.S. McCrickard, Real Clock
[5] C. Kehoe and J.T. Stasko. Using animation to
time animation support for developing software
learn about algorithms: an ethnograogic case study.
visualizations Australian Computer Journal,
Technical Report GIT-GVU-96-20, Georgia
27(3): 118-128, November 1995.
Institute of technology, Atalanta, GA, 1996.
[6] D.T. Lee. Geosheet: a distuributed visualization
tool for geometric algorithms. Technical report,
Northwestern University, 1994.
http://www.eecs.nwu.edu/theory/gs_tech_1_h
tml/gs.html
[7] D.T. Lee. GeoMAMOS project, 1995.
Http://www.eecs.nwu.edu/theory/ geomamos.html
[8] A. Mester. ZADA home page, 1994.
Http://ls4-www.informatik.uni.dortmund.de/
RVS/zada.html
[9] A. Michail. Opsis: A java applet for teaching
binary tree algorithm. In Symposium on Visual
Languages, 1996.
[10] S. Mukherjea and J.T. Stasko. Applying
algorithm animation techniques for program
tracing, debugging, and understanding. In
Proceeding of the 15th International Conference
on Software Engineering, pages 456-465,
4