湖南科技學院 王 濤 韓 芹 文 博 吳子凌
隨著信息的增長和社會的發(fā)展,可視化技術有著越來越重要的意義。通過可視化技術可以清晰快速地獲取信息和知識,并更有助于學生的思考??梢暬逃呀?jīng)成為一個新興的研究領域[1]。在大學的課程中,算法課程是屬于比較抽象、復雜的課程,又是計算機專業(yè)的一門實踐性和綜合性很強的核心課程。為了在有限的課堂教學能獲得更好的教學效果,提高學生學習算法的積極性和主動性,本文采用了MATLAB軟件的GUI工具設計并實現(xiàn)了一套若干經(jīng)典算法的可視化教學平臺,有助于學生對于算法的理解與應用,提高教學質量。
通過對學習《數(shù)學建?!?、《算法設計與分析》、《數(shù)據(jù)結構》等專業(yè)核心課程的學生和教授這些課程的老師分別進行了調研,了解哪些算法對于學生來說學習時理解過于困難,而對于老師而言哪些算法在課堂上講解時效果不是很理想。結合這兩個方面,本系統(tǒng)選取了深度優(yōu)先搜索算法、廣度優(yōu)先搜索算法、Dijkstra算法、Prim算法、堆排序算法、快速排序算法、KMP算法、二分查找算法、動態(tài)規(guī)劃算法、BP神經(jīng)網(wǎng)絡算法十個經(jīng)典、有代表性的、難以理解的算法進行可視化研究。其中,每個算法作為一個模塊單獨進行設計,每個算法模塊包括的功能有算法簡介、算法分析、代碼實現(xiàn)、動畫演示、練習與提高和實際應用。
Matlab中的GUIDE功能包括進行GUI面板設計和GUI組件回調程序編程。用戶只需通過鼠標將對象拖拽到目的區(qū)域即可快速地構建出GUI[2]。本文利用圖形用戶界面開發(fā)環(huán)境GUIDE,方便、快捷地創(chuàng)建了算法可視化平臺的GUI。該平臺既能向用戶展示算法的思想和方法,又能將算法分析過程以人機交互的動態(tài)方式演示出來,具有界面友好、操作簡單的特點。
GUI設計流程如下:(1)分析功能需求,明確設計任務。(2)繪出基本的用戶界面草圖,從學生和教師的角度進行審查。(3)打開MATLAB軟件,點擊工具欄中的GUIDE,制作GUI用戶操作界面。(4)添加所需控件,利用屬性編輯對話框進行屬性設置,完成界面的布局。(5)添加控件的回調函數(shù),點擊運行,生成所需界面GUI,保存在FIG和M文件中[3]。
用戶進入主界面就能一目了然的看到十個經(jīng)典算法目錄。每個算法對應一個按鈕,用戶只需點擊各個算法的按鈕即可進入到相應的算法可視化子界面。該界面主要由GUIDE工具集中的按鈕、坐標軸、靜態(tài)文本框等控件實現(xiàn)。在Matlab命令窗口中輸入GUIDE,打開界面編輯器(Layout Editor),從界面編輯器的左側控件中,選擇1個坐標軸(Axes)控件,1個文本標簽(Static Text)控件,10個按鈕(Push Button)控件,通過布置這些控件的位置和設置它們的屬性,完成主界面的設計。
本文以深度優(yōu)先搜索算法子界面為例,說明其主要功能和實現(xiàn)方法。用戶點擊“深度優(yōu)先搜索算法”按鈕就進入到如圖1所示的子界面。子界面包括算法簡介、算法分析、代碼實現(xiàn)、動畫演示、練習與提高以及實際應用6個按鈕,其設計過程與主界面的設計過程是類似的。用戶點擊“算法簡介”按鈕就會進入算法主要思想的顯示界面。其實現(xiàn)步驟如下:(1)首先將元件Axes平鋪于底部作為背景圖片,接著調整相應檢查器的OuterPosition設置其屬性值,使背景圖片以居中的效果顯示。(2)標題欄的設置。使用元件Static text,調整BackgroudColor的屬性,使顯示效果與背景更相符合。(3)文字面板的設置。以元件Panel作為面板部分,將元件Editable text覆蓋其上,文字部分的主體將顯示其中。(4)返回功能按鈕的制作。使用元件Button,重寫相應檢查器中的Title屬性,并編寫Callback函數(shù),實現(xiàn)頁面跳轉功能。
圖1 深度優(yōu)先搜索算法子模塊界面
用戶了解了算法的思想后,點擊“算法分析”按鈕進入算法分析界面查看算法實現(xiàn)的具體步驟,點擊“代碼實現(xiàn)”按鈕可以查看算法范例的程序代碼實現(xiàn)。為了進一步加深對算法的理解,用戶可以點擊“練習與提高”按鈕,針對給出的習題進行練習。同時,對于所學的算法如何學以致用,用戶還可以點擊“實際應用”按鈕進入相應界面,開闊視野,提高實際應用的能力。上述界面與算法簡介界面使用的控件和實現(xiàn)步驟都是相類似的。不同在于,每個界面對應顯示的文本內容不同而已。
本文具有特色的設計是實現(xiàn)了算法的動畫演示,有助于學生對于算法的理解與應用。用戶點擊“動畫演示”按鈕進入到如圖2所示界面。用戶在觀看動畫演示時可以通過點擊前進、后退、暫停等按鈕對算法實現(xiàn)的過程可以看得更為清楚,理解得更為透徹。
圖2 動畫演示
本文采用Flash動畫與MATLAB相結合來實現(xiàn)算法動畫演示功能。實現(xiàn)具體步驟如下:(1)使用Photoshop對圖像素材進行優(yōu)化處理。(2)分析對象的構成及動態(tài)對象包括位移,節(jié)點和線段顏色的變化等,設置圖層的層疊關系。(3)設置場景舞臺的版面大小,把背景色設置為綠色,動畫以13幀播放效果最佳,將之前準備的素材文件逐一導入元件庫中。(4)利用補間動畫原理制作中間各幀,從而使動畫從一個關鍵幀自然過渡到另外一個關鍵幀。這里主要通過元素文字的移動變化來體現(xiàn)的。(5)通過在不同按鈕上定義不同的動作腳本來控制動畫的運行狀態(tài)[4],如:在停止的按鈕上輸入:on (release) {_root.mc.stop();};在快退的按鈕上輸入:on(release) {_root.mc.prevFrame();}表示回到動畫的上一楨;在快進的按鈕上輸入:on (release) {_root.mc.nextFrame(); }。
本文利用Matlab軟件開發(fā)了一款包含十種經(jīng)典的、具有代表性的算法可視化平臺。用戶通過該平臺不僅可以了解這十種算法的具體思想、實現(xiàn)步驟和實際應用,還可以通過動畫演示的方式學習和掌握算法的實現(xiàn)過程。該平臺打破了傳統(tǒng)學習算法的方式讓算法真正的“動起來”,同時也推進了討論式教學、案例教學、網(wǎng)課等教學方法和合作式教學方式,提高學生自主學習和獨立研究的能力。
[1]唐棣,郭禾.計算機圖形學算法可視化教學研究與實踐[J].電化教育研究,2009(01):93-98.
[2]秦襄培.MATLAB圖像處理與界面編程寶典[M].北京:電子工業(yè)出版社,2009.
[3]羅華飛.MATLAB GUI設計學習手記[M].北京:北京航空航天大學出版社,2011.
[4]余雨.算法可視化軟件設計中關鍵問題的研究[D].安徽理工大學,2016.