湖南科技學(xué)院 王 濤 韓 芹 文 博 吳子凌

1.引言

隨著信息的增長(zhǎng)和社會(huì)的發(fā)展，可視化技術(shù)有著越來(lái)越重要的意義。通過可視化技術(shù)可以清晰快速地獲取信息和知識(shí)，并更有助于學(xué)生的思考?？梢暬逃呀?jīng)成為一個(gè)新興的研究領(lǐng)域[1]。在大學(xué)的課程中，算法課程是屬于比較抽象、復(fù)雜的課程，又是計(jì)算機(jī)專業(yè)的一門實(shí)踐性和綜合性很強(qiáng)的核心課程。為了在有限的課堂教學(xué)能獲得更好的教學(xué)效果，提高學(xué)生學(xué)習(xí)算法的積極性和主動(dòng)性，本文采用了MATLAB軟件的GUI工具設(shè)計(jì)并實(shí)現(xiàn)了一套若干經(jīng)典算法的可視化教學(xué)平臺(tái)，有助于學(xué)生對(duì)于算法的理解與應(yīng)用，提高教學(xué)質(zhì)量。

2.建立算法可視化功能模型

通過對(duì)學(xué)習(xí)《數(shù)學(xué)建?！?、《算法設(shè)計(jì)與分析》、《數(shù)據(jù)結(jié)構(gòu)》等專業(yè)核心課程的學(xué)生和教授這些課程的老師分別進(jìn)行了調(diào)研，了解哪些算法對(duì)于學(xué)生來(lái)說(shuō)學(xué)習(xí)時(shí)理解過于困難，而對(duì)于老師而言哪些算法在課堂上講解時(shí)效果不是很理想。結(jié)合這兩個(gè)方面，本系統(tǒng)選取了深度優(yōu)先搜索算法、廣度優(yōu)先搜索算法、Dijkstra算法、Prim算法、堆排序算法、快速排序算法、KMP算法、二分查找算法、動(dòng)態(tài)規(guī)劃算法、BP神經(jīng)網(wǎng)絡(luò)算法十個(gè)經(jīng)典、有代表性的、難以理解的算法進(jìn)行可視化研究。其中，每個(gè)算法作為一個(gè)模塊單獨(dú)進(jìn)行設(shè)計(jì)，每個(gè)算法模塊包括的功能有算法簡(jiǎn)介、算法分析、代碼實(shí)現(xiàn)、動(dòng)畫演示、練習(xí)與提高和實(shí)際應(yīng)用。

3.面向?qū)ο蟮腉UI設(shè)計(jì)流程

Matlab中的GUIDE功能包括進(jìn)行GUI面板設(shè)計(jì)和GUI組件回調(diào)程序編程。用戶只需通過鼠標(biāo)將對(duì)象拖拽到目的區(qū)域即可快速地構(gòu)建出GUI[2]。本文利用圖形用戶界面開發(fā)環(huán)境GUIDE，方便、快捷地創(chuàng)建了算法可視化平臺(tái)的GUI。該平臺(tái)既能向用戶展示算法的思想和方法，又能將算法分析過程以人機(jī)交互的動(dòng)態(tài)方式演示出來(lái)，具有界面友好、操作簡(jiǎn)單的特點(diǎn)。

GUI設(shè)計(jì)流程如下：（1）分析功能需求，明確設(shè)計(jì)任務(wù)。（2）繪出基本的用戶界面草圖，從學(xué)生和教師的角度進(jìn)行審查。（3）打開MATLAB軟件，點(diǎn)擊工具欄中的GUIDE，制作GUI用戶操作界面。（4）添加所需控件，利用屬性編輯對(duì)話框進(jìn)行屬性設(shè)置，完成界面的布局。（5）添加控件的回調(diào)函數(shù)，點(diǎn)擊運(yùn)行，生成所需界面GUI，保存在FIG和M文件中[3]。

4.算法可視化平臺(tái)的實(shí)現(xiàn)

4.1 算法可視化平臺(tái)主界面

用戶進(jìn)入主界面就能一目了然的看到十個(gè)經(jīng)典算法目錄。每個(gè)算法對(duì)應(yīng)一個(gè)按鈕，用戶只需點(diǎn)擊各個(gè)算法的按鈕即可進(jìn)入到相應(yīng)的算法可視化子界面。該界面主要由GUIDE工具集中的按鈕、坐標(biāo)軸、靜態(tài)文本框等控件實(shí)現(xiàn)。在Matlab命令窗口中輸入GUIDE，打開界面編輯器（Layout Editor），從界面編輯器的左側(cè)控件中，選擇1個(gè)坐標(biāo)軸（Axes）控件，1個(gè)文本標(biāo)簽（Static Text）控件，10個(gè)按鈕(Push Button)控件，通過布置這些控件的位置和設(shè)置它們的屬性，完成主界面的設(shè)計(jì)。

4.2 算法可視化平臺(tái)子界面

本文以深度優(yōu)先搜索算法子界面為例，說(shuō)明其主要功能和實(shí)現(xiàn)方法。用戶點(diǎn)擊“深度優(yōu)先搜索算法”按鈕就進(jìn)入到如圖1所示的子界面。子界面包括算法簡(jiǎn)介、算法分析、代碼實(shí)現(xiàn)、動(dòng)畫演示、練習(xí)與提高以及實(shí)際應(yīng)用6個(gè)按鈕，其設(shè)計(jì)過程與主界面的設(shè)計(jì)過程是類似的。用戶點(diǎn)擊“算法簡(jiǎn)介”按鈕就會(huì)進(jìn)入算法主要思想的顯示界面。其實(shí)現(xiàn)步驟如下：（1）首先將元件Axes平鋪于底部作為背景圖片，接著調(diào)整相應(yīng)檢查器的OuterPosition設(shè)置其屬性值，使背景圖片以居中的效果顯示。（2）標(biāo)題欄的設(shè)置。使用元件Static text，調(diào)整BackgroudColor的屬性，使顯示效果與背景更相符合。（3）文字面板的設(shè)置。以元件Panel作為面板部分，將元件Editable text覆蓋其上，文字部分的主體將顯示其中。（4）返回功能按鈕的制作。使用元件Button，重寫相應(yīng)檢查器中的Title屬性，并編寫Callback函數(shù)，實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)功能。

圖1 深度優(yōu)先搜索算法子模塊界面

用戶了解了算法的思想后，點(diǎn)擊“算法分析”按鈕進(jìn)入算法分析界面查看算法實(shí)現(xiàn)的具體步驟，點(diǎn)擊“代碼實(shí)現(xiàn)”按鈕可以查看算法范例的程序代碼實(shí)現(xiàn)。為了進(jìn)一步加深對(duì)算法的理解，用戶可以點(diǎn)擊“練習(xí)與提高”按鈕，針對(duì)給出的習(xí)題進(jìn)行練習(xí)。同時(shí)，對(duì)于所學(xué)的算法如何學(xué)以致用，用戶還可以點(diǎn)擊“實(shí)際應(yīng)用”按鈕進(jìn)入相應(yīng)界面，開闊視野，提高實(shí)際應(yīng)用的能力。上述界面與算法簡(jiǎn)介界面使用的控件和實(shí)現(xiàn)步驟都是相類似的。不同在于，每個(gè)界面對(duì)應(yīng)顯示的文本內(nèi)容不同而已。

本文具有特色的設(shè)計(jì)是實(shí)現(xiàn)了算法的動(dòng)畫演示，有助于學(xué)生對(duì)于算法的理解與應(yīng)用。用戶點(diǎn)擊“動(dòng)畫演示”按鈕進(jìn)入到如圖2所示界面。用戶在觀看動(dòng)畫演示時(shí)可以通過點(diǎn)擊前進(jìn)、后退、暫停等按鈕對(duì)算法實(shí)現(xiàn)的過程可以看得更為清楚，理解得更為透徹。

圖2 動(dòng)畫演示

本文采用Flash動(dòng)畫與MATLAB相結(jié)合來(lái)實(shí)現(xiàn)算法動(dòng)畫演示功能。實(shí)現(xiàn)具體步驟如下：（1）使用Photoshop對(duì)圖像素材進(jìn)行優(yōu)化處理。（2）分析對(duì)象的構(gòu)成及動(dòng)態(tài)對(duì)象包括位移，節(jié)點(diǎn)和線段顏色的變化等，設(shè)置圖層的層疊關(guān)系。（3）設(shè)置場(chǎng)景舞臺(tái)的版面大小，把背景色設(shè)置為綠色，動(dòng)畫以13幀播放效果最佳，將之前準(zhǔn)備的素材文件逐一導(dǎo)入元件庫(kù)中。（4）利用補(bǔ)間動(dòng)畫原理制作中間各幀，從而使動(dòng)畫從一個(gè)關(guān)鍵幀自然過渡到另外一個(gè)關(guān)鍵幀。這里主要通過元素文字的移動(dòng)變化來(lái)體現(xiàn)的。（5）通過在不同按鈕上定義不同的動(dòng)作腳本來(lái)控制動(dòng)畫的運(yùn)行狀態(tài)[4]，如：在停止的按鈕上輸入：on (release) {_root.mc.stop();}；在快退的按鈕上輸入：on(release) {_root.mc.prevFrame();}表示回到動(dòng)畫的上一楨；在快進(jìn)的按鈕上輸入：on (release) {_root.mc.nextFrame(); }。

5.結(jié)語(yǔ)

本文利用Matlab軟件開發(fā)了一款包含十種經(jīng)典的、具有代表性的算法可視化平臺(tái)。用戶通過該平臺(tái)不僅可以了解這十種算法的具體思想、實(shí)現(xiàn)步驟和實(shí)際應(yīng)用，還可以通過動(dòng)畫演示的方式學(xué)習(xí)和掌握算法的實(shí)現(xiàn)過程。該平臺(tái)打破了傳統(tǒng)學(xué)習(xí)算法的方式讓算法真正的“動(dòng)起來(lái)”，同時(shí)也推進(jìn)了討論式教學(xué)、案例教學(xué)、網(wǎng)課等教學(xué)方法和合作式教學(xué)方式，提高學(xué)生自主學(xué)習(xí)和獨(dú)立研究的能力。

[1]唐棣,郭禾.計(jì)算機(jī)圖形學(xué)算法可視化教學(xué)研究與實(shí)踐[J].電化教育研究,2009(01):93-98.

[2]秦襄培.MATLAB圖像處理與界面編程寶典[M].北京:電子工業(yè)出版社,2009.

[3]羅華飛.MATLAB GUI設(shè)計(jì)學(xué)習(xí)手記[M].北京:北京航空航天大學(xué)出版社,2011.

[4]余雨.算法可視化軟件設(shè)計(jì)中關(guān)鍵問題的研究[D].安徽理工大學(xué),2016.