基于個性化教育的實驗項目的開發(fā)：3D玫瑰花

王欣欣，鄭陽平

(承德石油高等專科學(xué)校 計算機(jī)與信息工程系，河北 承德 067000)

個性化教育這個名詞的起源可以追溯到兩千多年前，孔子曾經(jīng)提出的“因材施教，有教無類”的教育思想。在中國教育的發(fā)展過程中，尤其是近年來，越來越重視個性化教育的發(fā)展與實施。在《國家中長期教育改革與發(fā)展規(guī)劃綱要(2010—2020年)》和《國家教育事業(yè)發(fā)展“十三五”規(guī)劃》中多次提及個性化教育和利用信息化開展教學(xué)創(chuàng)新。如今，信息化技術(shù)的飛速發(fā)展，讓個性化教育的快速實施如虎添翼，學(xué)習(xí)者只要充分利用手機(jī)等終端設(shè)備，隨時隨地遨游在信息化教學(xué)云平臺上，進(jìn)行泛在化的個性化自主學(xué)習(xí)。因此，信息化教學(xué)資源建設(shè)中個性化的實踐實驗項目開發(fā)與設(shè)計變得尤為重要，如何能有效地激發(fā)學(xué)習(xí)者學(xué)習(xí)興趣和愛好，成為開發(fā)與設(shè)計信息化教學(xué)資源的關(guān)鍵[1-2]。本文以“網(wǎng)頁設(shè)計與制作”課程中的JavaScript技術(shù)的使用為例，說明如何設(shè)計和開發(fā)一個學(xué)生既喜歡，又能激發(fā)學(xué)習(xí)興趣，提高課堂教學(xué)效果的“純JS編寫的3D玫瑰花”綜合項目教學(xué)案例設(shè)計過程[3]。

1 基于個性化教學(xué)的綜合實驗項目的選取

綜合實驗項目案例的選取一要符合課程教學(xué)目標(biāo)，二要貼近課程單元教學(xué)內(nèi)容，三要來源于實際生活但要高于生活，既體現(xiàn)知識的綜合運用，又激發(fā)學(xué)生學(xué)習(xí)興趣，以學(xué)生為中心開發(fā)教學(xué)案例。因此，在“網(wǎng)頁設(shè)計與制作”課程的JavaScript技術(shù)的使用單元內(nèi)容中，選擇“應(yīng)用JavaScript技術(shù)，編寫純代碼的“3D玫瑰花”。

“3D玫瑰花”案例是應(yīng)用JavaScript腳本語言，編寫多個不同形狀的圖形，最終組成一個逼真的3D玫瑰花，整體效果如圖1所示。一共使用了點、圓、柱等31個圖形形狀，構(gòu)成一個由1個花莖、2片葉子、4個萼片和24個花瓣組成的玫瑰花。這里的每一個形狀均用Javascript腳本語言編寫完成，3D逼真的玫瑰花采用蒙特卡羅方法(Monte Carlo methods)呈現(xiàn)其效果，讓學(xué)生體會Javascript腳本語言的強(qiáng)大功能。

2 實驗環(huán)境和主要技術(shù)介紹

2.1 實驗環(huán)境

1)Windows環(huán)境：網(wǎng)頁編輯工具+瀏覽器，如Dreamweaver CS6+ Firefox/IE等；

2)Liunx環(huán)境：Liunx命令行終端+瀏覽器+編輯器：如Terminal+Firefox+GVim等；

2.2 主要技術(shù)知識

1)Z-Buffer也叫深度緩存算法，是在為物件進(jìn)行著色時，執(zhí)行“隱藏面消除”工作的一項技術(shù)，使隱藏物件背后的部分不被顯示，在三維環(huán)境中每個像素中會利用一組數(shù)據(jù)資料來定義像素在顯示時的縱深度(即Z軸坐標(biāo)值)，Z-Buffer所用的位數(shù)越高，則代表該顯卡所提供的物件縱深感也越精確[4]。

2)歐拉旋轉(zhuǎn)定理(Euler’s rotation theorem)，指的是在3D空間內(nèi)，任何共原點的兩個坐標(biāo)系之間的關(guān)系，是一個繞著包含原點的固定軸的旋轉(zhuǎn)，這樣形成一個四元數(shù)；任何兩個坐標(biāo)系的相對定向，可以由一組四個數(shù)字來設(shè)定，其中三個數(shù)字是用來設(shè)定特征矢量(固定軸)，即方向余弦，第四個數(shù)字是繞著固定軸旋轉(zhuǎn)的角值[5]。

3)蒙特卡羅方法(Monte Carlo methods)也稱統(tǒng)計模擬方法，是以概率和統(tǒng)計理論方法為基礎(chǔ)的一種計算方法，是使用隨機(jī)數(shù)(或常見的偽隨機(jī)數(shù))來解決很多計算問題的方法，將所求解的問題同一定的概率模型相聯(lián)系，用電子計算機(jī)實現(xiàn)統(tǒng)計模擬或抽樣，以獲得問題的近似解[6]。其整體思路分為三步：第一步：模擬，構(gòu)造或描述概率過程，即將不具有隨機(jī)性質(zhì)的問題轉(zhuǎn)化為隨機(jī)性質(zhì)的問題；第二步：抽樣，從已知概率分布(0,1)上實現(xiàn)隨機(jī)抽樣；第三步：估值，在模型中用統(tǒng)計方法建立各種各樣的估計量，對登記和考察的模擬實驗結(jié)果進(jìn)行驗證，從而獲得實際問題的解。

3 基于個性化教學(xué)的綜合實驗項目教學(xué)案例設(shè)計及實施步驟

基于個性化教學(xué)資源、教學(xué)案例和實踐項目的開發(fā)與設(shè)計是一個系統(tǒng)的工程，每一資源、每一個案例、每一個實踐項目都應(yīng)按照宏觀認(rèn)識、細(xì)化分解、由淺到深、層次遞進(jìn)的思路進(jìn)行開發(fā)設(shè)計。下面通過“3D玫瑰花”的實踐教學(xué)案例說明教學(xué)資源設(shè)計與開發(fā)整個過程。

3.1 第一步：繪制玫瑰花瓣

1)定義一個表面為50 px*50 px的單元區(qū)域，a與b為采樣范圍參數(shù)，編寫形狀描繪代碼：

采用采樣間隔為0.1 px，并縮小間隔到0.001 px，效果圖如圖2所示。

2)同理，使用公式(X-X0)2+(Y-Y0)2

還需附加一個采樣條件，防止溢出：

4)花瓣增加梯度和上色。給花瓣增加梯度使其具有立體感r:100+Math.floor((1-b)*155)。給花瓣上色為紅色，效果如圖3所示。

3.2 第二步：3D 曲面和透視投影

1)定義一個三維表面，以管狀物為例，將管狀物的橫截面圓心定位在(0，0，0)位置上，一半放在X/Y平面之下，另一半放在X/Y平面之上。

2)添加投影透視圖。如圖5所示，首先定義畫布X和Y的坐標(biāo)為pX和pY，定義一個攝像頭camera，設(shè)置cameraZ=-700。設(shè)置perspective=350，即確定畫布在X/Y平面下方350距離的平面上，最后確定投影到畫布上的采樣點，得到的效果圖如圖5所示。主要代碼如下：

3.3 第三步：Z-Buffer技術(shù)處理圖形圖像

Z-Buffer是深度緩存算法，計算機(jī)圖形圖像處理常用的“隱藏面消除”技術(shù)，定義var zBuffer=[],zBufferIndex;通過Z-Buffer對物件著色時，使隱藏在物件背后的部分不會被顯示出來，處理后的玫瑰花如圖6所示，立體感明顯增強(qiáng)。其核心代碼如下。

3.4 第四步：矢量旋轉(zhuǎn)

旋轉(zhuǎn)的方法很多，只要是矢量旋轉(zhuǎn)的方法都可以，這里采用歐拉旋轉(zhuǎn)法，將之前定義的管狀物繞Y軸旋轉(zhuǎn)，弧度為yAxisRotationAngle=-0.4。

3.5 第五步：蒙特卡羅方法呈現(xiàn)3D玫瑰花效果

采用蒙特卡羅方法合理設(shè)置采樣間隔，通過Math.random()設(shè)置a與b為隨機(jī)采樣參數(shù)，使用循環(huán)完成每次一萬個像素點的繪制，用足夠的采樣完成表面填充，避免采樣間隔過大或者過小都會引起極差的視覺效果。核心代碼如下：

3.6 第六步：優(yōu)化顯示效果

為了使3D玫瑰花顯示效果更好，通過為玫瑰花的每個部分設(shè)置一個返回值參數(shù)來進(jìn)行同步，使得花的每個部件同時顯示出來，用一個分段函數(shù)代表玫瑰的各個組成部分。最后，將調(diào)試后的完整Javascript代碼嵌入到HTML網(wǎng)頁文件中，保存運行即可查看實驗效果(見圖1)。

3.7 第七步：注意事項及總結(jié)

需要注意的是，如果表面填充效果出現(xiàn)問題，那就是隨機(jī)數(shù)參數(shù)發(fā)生了錯誤，或者有些瀏覽器中Math.random的執(zhí)行是線性的?？梢酝ㄟ^更換瀏覽器，或者使用隨機(jī)數(shù)算法實現(xiàn)高質(zhì)量的PRNG采樣，如類似Mersenne Twister的算法，可以有效地避免錯誤的出現(xiàn)。

學(xué)生在實踐練習(xí)的過程中，交流溝通、上網(wǎng)查詢和及時總結(jié)，尤其是對問題的總結(jié)交流，都是學(xué)習(xí)者經(jīng)驗積累的過程，知識增長的過程和自我提升的過程。通過本實踐項目，舉一反三，融會貫通，層次遞進(jìn)地進(jìn)行與此類似的更高級別的項目演練，是培養(yǎng)自主學(xué)習(xí)和個性化學(xué)習(xí)最佳方式之一。

4 實踐應(yīng)用效果

本文以“3D玫瑰花”的實驗項目案例設(shè)計與開發(fā)為例，旨在說明，教學(xué)資源的建設(shè)必須以學(xué)生為中心，以激發(fā)學(xué)生學(xué)習(xí)興趣目標(biāo)，開發(fā)和設(shè)計具有魅力的個性化教學(xué)資源是個性化教育和新時期教育發(fā)展的迫切需求。通過一個完整的綜合實驗項目案例，網(wǎng)頁制作的Javascript技術(shù)知識得到靈活應(yīng)用，使學(xué)生感到短小精巧的JS代碼，竟然產(chǎn)生如此強(qiáng)悍的效果,從而提升其后續(xù)課程的學(xué)習(xí)興趣。通過調(diào)查和課堂教學(xué)發(fā)現(xiàn)，通過新穎的教學(xué)案例的引入，學(xué)生學(xué)習(xí)熱情顯著提高，積極參與課堂活動，更樂于把自己作品分享給自己朋友和同學(xué)，教學(xué)效果顯著提升。但是，課程中類似的個性化教學(xué)資源和案例還有所欠缺，今后一定加大力度建設(shè)面向個性化的教育教學(xué)資源，加強(qiáng)線上線下的混合學(xué)習(xí)，全面推進(jìn)個性化教育快速實施，提高人才培養(yǎng)質(zhì)量。