王欣欣，鄭陽(yáng)平

(承德石油高等?？茖W(xué)校 計(jì)算機(jī)與信息工程系，河北 承德 067000)

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

1 基于個(gè)性化教學(xué)的綜合實(shí)驗(yàn)項(xiàng)目的選取

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

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

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

2.1 實(shí)驗(yàn)環(huán)境

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

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

2.2 主要技術(shù)知識(shí)

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

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

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

3 基于個(gè)性化教學(xué)的綜合實(shí)驗(yàn)項(xiàng)目教學(xué)案例設(shè)計(jì)及實(shí)施步驟

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

3.1 第一步：繪制玫瑰花瓣

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

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

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

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

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

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

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

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

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

Z-Buffer是深度緩存算法，計(jì)算機(jī)圖形圖像處理常用的“隱藏面消除”技術(shù)，定義var zBuffer=[],zBufferIndex;通過(guò)Z-Buffer對(duì)物件著色時(shí)，使隱藏在物件背后的部分不會(huì)被顯示出來(lái)，處理后的玫瑰花如圖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è)置采樣間隔，通過(guò)Math.random()設(shè)置a與b為隨機(jī)采樣參數(shù)，使用循環(huán)完成每次一萬(wàn)個(gè)像素點(diǎn)的繪制，用足夠的采樣完成表面填充，避免采樣間隔過(guò)大或者過(guò)小都會(huì)引起極差的視覺(jué)效果。核心代碼如下：

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

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

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

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

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

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

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