基於xDIVA之利用關鍵影格將3D物件動畫化與即時保存的視覺化工具

以作者查詢圖書館館藏

、以作者查詢臺灣博碩士

、以作者查詢全國書目

、勘誤回報

、線上人數：14

、訪客IP：3.144.71.142

姓名

何沛哲(Pei-Zhe He) 查詢紙本館藏

畢業系所

軟體工程研究所

論文名稱

基於xDIVA之利用關鍵影格將3D物件動畫化與即時保存的視覺化工具

相關論文

★ CRUnit - Capture / Replay Based Unit Testing	★ Locating Interested Code by Program Execution Paths with Debugger
★ An OpenStack Based Testing as a Service Platform	★ Visualize Ripple Effect with Analyzing Object-Oriented Design Relationship
★ Change History Tracing Tool for Arbitrary Programming Language	★ Virtual Objects for Program Visualization in xDIVA
★ Enhance Stress Testing Power by Synchronizing JMeter Test Scripts	★ 以 GDB 實作 XThreadDebugger-Linux(XTD-Linux)提供 Linux 平台之多執行緒除錯
★ 支援版本控制系統之文件撰寫工具	★ Korat: An O.S.-independent Capture/Replay Test Automation System
★ GUI Component Detection for Cross-Platform Applications–Using Input Device and Image Change Synergistic Detection Method	★ 應用設計模式於 RPA 軟體實作低維護成本的屬性面板自動修正功能
★ 使用靜態分析偵測 JavaScript 應用程式中的 Race Condition	★ 基於物件導向與 Clean Code 概念進行 xDiva 重構與優化
★ CoolPCB：以控制點為主的電路板切割成形繪製自動化方法	★ 利用軟體 UI 實現擴充功能突破原始碼限制的工具

檔案

[Endnote RIS 格式]

[Bibtex 格式]

[相關文章]

[文章引用]

[完整記錄]

[館藏目錄]

[檢視]

[下載]

本電子論文使用權限為同意立即開放。
已達開放權限電子全文僅授權使用者為學術研究之目的，進行個人非營利性質之檢索、閱讀、列印。
請遵守中華民國著作權法之相關規定，切勿任意重製、散佈、改作、轉貼、播送，以免觸法。

摘要(中)

實作程式動畫(Program Animation)是一個相當困難的問題，儘管目前存在一些相關工具，但它們都有無法忽視的缺點，無法快速並有效的達到任意動畫化(Generic Program Animation)。
xDIVA(extreme Debugging Information Visualization Assistant)是本實驗室開發的一套3D 視覺化程式除錯工具，在待測程式設下中斷點後，xDIVA 能擷取出該中斷點當下的任意變數，並讓使用者自由配對擷取出的變數與xDIVA 提供的視覺化元件，來完成視覺化結果。
本論文提出了一套基於xDIVA 的動畫系統，在關鍵影格(Keyframe)之間進行插值(Interpolate)來達成動畫化，關鍵影格為中斷點處的場景快照。這種方法不需要額外撰寫任何動畫程式碼，視覺化的方式也沒有局限性。此外，透過啟用佈局(Layout)功能來自動排序視覺化物件，使得動畫能夠更廣泛適用於各種情境，達到任意動畫化的目標，更適合實務上的應用。
此外，本論文還將這些動畫保存成影片，因為這些影片具有教育意義，一方面可作為此程式的解說文件，省去大量追蹤原始程式碼(Source Code)的時間，大幅提升效率。另一方面，對於較複雜的演算法或流程，這些影片也能當成教學文件，解說其中進行的操作和關鍵的狀態。

摘要(英)

Program Animation is a challenging problem to implement. Although there are existing tools available, they have significant limitations and cannot efficiently achieve the goal of generic program animation.
xDIVA (extreme Debugging Information Visualization Assistant) is a 3D visualization program debugging tool developed by our laboratory. After setting breakpoints in the target program, xDIVA captures arbitrary variables at the breakpoints and allows users to match them with visual
mapping nodes provided by xDIVA to achieve visualization results.
This paper proposes an animation system based on xDIVA. It achieves animation by interpolating between keyframes, which are scene snapshots captured at breakpoints. This method eliminates the need for additional animation code and provides unlimited visualization possibilities. Additionally, the automatic layout enables widespread application of animations in various contexts, achieving the goal of generic program animation and making it more suitable for practical use.
Furthermore, this paper also saves these animations as videos. These videos have educational value. On one hand, they can serve as explanatory documents for the program, saving time spent on tracing the source code. On the other hand, for more complex algorithms or processes, these videos can be used as instructional materials, explaining the operations and crucial
states involved.

關鍵字(中)

★ 除錯
★ 3D視覺化
★ 動畫化
★ Unity
★ 軟體工程

關鍵字(英)

論文目次

摘要 ............................................................................................................. i
Abstract ...................................................................................................... ii
目錄 ........................................................................................................... iii
圖目錄 ......................................................................................................... v
表目錄 ....................................................................................................... ix
一、緒論............................................................................................. 1
二、研究背景 .................................................................................... 7
2-1 xDIVA ........................................................................................... 7
2-1-1 GDB Plugin ....................................................................... 8
2-1-2 VS Code Extension ........................................................... 9
2-1-3 Type Mapping Dialog ..................................................... 10
2-1-4 Evaluator ......................................................................... 11
2-1-5 Viewer ............................................................................. 12
2-2 相關工具研究 ........................................................................... 13
2-3 Interpolation ............................................................................... 21
2-4 Unity Animation ......................................................................... 22
三、問題描述與分析 ...................................................................... 25
3-1 佈局 ........................................................................................... 26
3-2 動畫 ........................................................................................... 30
3-3 影片錄製 ................................................................................... 32
四、系統實作及整合 ...................................................................... 34
4-1 佈局系統 ................................................................................... 34
4-1-1 Relation Graph ................................................................ 36
4-1-2 Linked List ...................................................................... 40
4-1-3 Binary Tree ...................................................................... 41
4-1-4 Graph ............................................................................... 43
4-2 動畫系統 ................................................................................... 44
4-3 產生影片 ................................................................................... 48
4-4 使用情境 ................................................................................... 49
五、案例探討與實驗 ...................................................................... 50
5-1 佈局系統 ................................................................................... 50
5-2 動畫系統 ................................................................................... 53
5-2-1 Linked List ...................................................................... 53
5-2-2 AVL Tree ......................................................................... 55
5-2-3 Binary Search .................................................................. 58
5-2-4 Quick Sort ....................................................................... 59
5-2-5 Random Mouse Algorithm .............................................. 61
5-2-6 Flood Fill ......................................................................... 63
5-2-7 RGB ................................................................................. 65
六、結論與未來展望 ...................................................................... 67
6-1 結論 ........................................................................................... 67
6-2 未來展望 ................................................................................... 67
七、參考資料 .................................................................................. 69

參考文獻

[1] "Program Animation" [Online] Available from: https://www.cs.montana.edu/webworks/webworkshome/ projects/program_animator/program_animator.html
[2] Yung-Pin Cheng, Jih-Feng Chen, Ming-Chieh Chiu, Nien-Wei Lai, and Chien-Chih Tseng, "xDiva: A debugging visualization system with composable visualization metaphors" OOPSLA Companion to the 23rd ACM SIGPLAN conference on Object-oriented programming systems languages and applications, pp. 807-810, 2008.
[3] Cheng, Y.-P., et al., "Toward Arbitrary Mapping for Debugging Visualizations," 2016 IEEE/ACM 38th IEEE International Conference on Software Engineering Companion. Austin, TX, USA, IEEE: 605-608.
[4] STEFFENSEN, Johan Frederik. "Interpolation" Williams & Wilkins, 1927.
[5] "The data display debugger (ddd)". [Online] Available from: http://www.gnu.org/software/ddd.
[6] Kuan-Yi Liu，「基於Visual Studio Code 擴充套件進行xDIVA 視覺化工具之重構」，國立中央大學，碩士論文，民國109 年
[7] "Unity" [Online]. Available from: https://unity.com/.
[8] John T. Stasko, "Tango: A framework and system for algorithm animation" ACM SIGCHI Bulletin, Vol 21 Issue 3, pp. 59-60, 1990
[9] John T. Stasko, "Animating algorithm with XTANGO" ACM SIGACT News, Vol 23 Issue 2, pp. 67-71, 1992
[10] Jorma Sajaniemi, Marja Kuittinen, "Program Animation Based on the Roles of Variables" SOFTVIS Proceedings of the 2003 ACM symposium on Software visualization, pp. 7-ff , 2003
[11] "Tcl/Tk Core Development" [Online] Available from: https://www.tcl.tk/community/coreteam/
[12] M. Stallmann, J. Cockrell, T. Devriesz, A. McCabex, and M. Owoc, "Galant: A graph algorithm animation tool, " Tech. Report, North Carolina State Univ., January 2016.
[13] M. F. Stallmann, "Algorithm Animation with Galant," in IEEE Computer Graphics and Applications, vol. 37, no. 1, pp. 8-14, Jan.- Feb. 2017, doi: 10.1109/MCG.2017.2.
[14] BRANDES, Ulrik, et al. Graph markup language (GraphML). 2013.
[15] Andrés Moreno, Niko Myller, Erkki Sutinen, Mordechai Ben-Ari, "Visualizing Programs with Jeliot 3" AVI Proceedings of the working conference on Advanced visual interfaces, pp. 373-376, 2004
[16] Tai, K.-C. ，「視覺化工具融入程式語言教學對初學者學習成效
與學習態度之探討」，國立臺灣師範大學，碩士論文，民國99年。
[17] E. T. Y. Ling, "Teaching Algorithms with Web-based Technologies", Department of Computer Science, School of Computing, National University of Singapore, 2014.
[18] MILLER, Alexander; REGES, Stuart; OBOURN, Allison. "jGRASP: a simple, visual, intuitive programming environment for CS1 and CS2." ACM Inroads, 2017, 8.4: 53-58.
[19] BALOUKAS, Thanasis. "JAVENGA: JAva‐based visualization environment for network and graph algorithms." Computer Applications in Engineering Education, 2012, 20.2: 255-268.
[20] ORLIN, James B. A polynomial time primal network simplex algorithm for minimum cost flows. Mathematical Programming, 1997, 78: 109-129.
[21] CORMEN, Thomas H., et al. Introduction to algorithms. MIT press, 2022.
[22] WIKIPEDIA, "Inbetweening" [Online] Available from:
https://en.wikipedia.org/wiki/Inbetweening fbclid=IwAR2uOq1bL 7T5YF153 fVhhGRuOuaVehPasNIpvhcDpkC3EYwBEpRZpZCb0
[23] "Understanding Linear Interpolation in UI Animation" [Online] Available from: https://www.freecodecamp.org/news/understanding linearinterpolation- in-ui-animations-74701eb9957c/
[24] ERDOGAN, K. A. Y. A. "Spline interpolation techniques." Journal of Technical Science and Technologies, 2013, 47-52.
[25] ZILL, Dennis G. Advanced engineering mathematics. Jones & Bartlett Learning, 2020.
[26] CHENG, Yung-Pin, et al. "xDIVA: automatic animation between debugging break points." In: Proceedings of the 5th international symposium on Software visualization. 2010. p. 221-222.
[27] Peng, Y.-J.，「Program Animation with Visual Tracepoint Support in xDIVA」，國立中央大學，碩士論文，民國100 年
[28] "Unity Scripting Reference" [Online]. Available from:
https://docs.unity3d.com/ScriptReference/index.html
[29] 吳亞峰，你也能完成VR 場景: 用 Unity 實作 3D 及虛擬實境遊戲，佳魁資訊股份有限公司，台灣，2016 年
[30] "Unity Asset Store" [Online]. Available from: https://assetstore.unity.com/
[31] "Video Capture" [Online]. Available from: https://assetstore.unity.com/packages/tools/video/video capture- 75653
[32] Walter D. Pullen, "Maze Classification" [Online] Available from: https://www.astrolog.org/labyrnth/algrithm.htm#solve
[33] SMITH, Alvy Ray. Tint fill. In: Proceedings of the 6th annual conference on Computer graphics and interactive techniques. 1979. p. 276-283.

指導教授

鄭永斌(Yung-Pin Cheng)

審核日期

2023-8-3

推文