張寧 北京市朝陽區清森學校
Processing是一個FLOSS項目(免費/自由/開源軟件),可以免費下載,甚至根據需要修改源代碼以滿足個性化的需要。它是在Java基礎上進一步開發的語言,這兩種語言的語法幾乎相同,但Processing又添加了一些與可視圖形和交互相關的自定義功能,其中與圖形相關的功能是繼承了PostScript(PDF的基礎)和OpenGL(一個3D圖形規范)。
MIT 媒體實驗室在可視化編程和創意編程領域具有舉足輕重的作用。1967年,西蒙·帕佩特(Seymour Papert)等人開發了Logo編程語言,開啟了圖形化編程的歷史進程。通過簡單指令指揮小烏龜運動,生成幾何圖形和設計圖案,深受中小學生的喜愛。1990年,MIT媒體實驗室的約翰·馬爾德亞(John Maeda)教授發起了一個非常有影響力的編程教學試驗—Design BY Numbers,該項目通過簡潔易用的編程語言,把計算和編程介紹給視覺設計者和藝術家們。他和學生們設計和開發的一款軟件,致力于幫助設計者、藝術家和其他非編碼專業人員學習編程,雖然這款軟件隨著技術的發展,逐漸被遺忘,也不再被使用,但其影響深遠,后續很多相關項目都是在其基礎上生根發芽。其中比較成功的是凱西·瑞爾(Casey Reas)和本·弗萊Ben Fry發起創建的Processing語言。
筆者以可視化聲控課堂音量管理程序為例,進一步講解如何使用Processing實現可視化交互的設計和開發。
營造安靜的學習環境是高效課堂的必要條件,同時對應《普通高中信息技術課程標準(2017年版)》中“模塊1:數據與計算”的要求(如表1),用Processing開發一款聲控管理可視化程序,引導學生在短時間內達到課堂音量管理要求。通過Processing編程環境,可以讓學生動手實驗,調用相關的sound庫和方法,探究學習聲音的可視化過程。

表1
程序應用界面如圖1所示,窗口右邊為音量等級,顏色越淺,音量等級越低,教師可以根據教學活動的需求,選擇合適的音量等級。窗口下面黃色矩形為實時可視化的音量高低,代表音量等級的藍色方塊被觸發后,就會自動從右向左移動。

圖1 聲控音量管理程序界面
輸入:通過調用sound庫,自動獲取電腦自帶麥克風輸入音量。通過鼠標懸浮在音量等級上面觸發方塊運動。
輸出:通過條形圖的高度可視化顯示音量大小。當右側小方塊連續完成5次成功移動后,就會在屏幕左側顯示笑臉,以慶祝學生們完成了課堂音量要求。
處理:代表音量等級的小方塊被觸發后(鼠標放在小方塊上方,每次僅觸發一個方塊),就會自動從右向左移動。當沒有噪音干擾時,會完成一次成功移動,同時左邊的圓臉會變大。當有噪音干擾,并且超過了選取的音量等級時,小方塊就會重新回到起始位置,重新開始移動,同時成功移動次數也會被清零。
Processing程序中的void setup()方法僅運行一次,目的是完成程序變量初始化。void draw()方法會一直循環執行里面的方法。筆者根據程序功能,把程序拆分為三個模塊,分別為周圍環境音量可視化、音量等級方塊和繪制笑臉。
(1)周圍環境音量的實時可視化
首先需要通過調用processing.sound庫里面的方法,來獲取電腦麥克風的輸入,并通過analyze方法轉化為0~1.0的音量范圍。然后,應用內置的Map方法,把音量大小映射為矩形的高度,進而可以通過繪制矩形,實時獲得音量高低的可視化展示。關鍵程序片段如上頁表2所示,完整程序見文末鏈接。

表2
(2)音量等級方塊
用5個方塊來可視化5個音量等級。考慮到后續對每個音量等級的操作,為了使程序簡潔和易于維護,可以定義一個SoundLevelButton類,細化完成相應的類屬性和方法。其中,overRect方法來判定鼠標選定的是哪個音量等級;move方法在選定音量方塊觸發后,并且在成功移動完成次數小于5時,保持自右向左的移動。具體如表3所示。

表3
(3)笑臉生成
要使代碼結構清晰,可以把笑臉生成單獨封裝為一個方法模塊,這樣也方便后續維護及代碼再次利用。如圖2所示代碼,形式參數x和y控制笑臉的大小,count獲取連續成功搬運的次數,當次數超過5次時,會繪制笑臉,表示聲音音量滿足教學要求。

圖2
Processing作為一款最初面向藝術家和設計人員的編程語言,先天繼承了可視化編程和創意編程的基因??梢暬瘜崟r反饋,降低了學習編程的門檻,提高了在給定技能水平下完成任務的趣味性和復雜性。實時可視化反饋和反復調試,促使學生自我思考的過程成為可能,提升了元認知能力水平。程序運行一旦成功會讓學生充滿成就感,使學生獲得學習動力,而如果運行失敗則會訓練學生解決問題的能力,通過把問題拆分為易于解決的小問題,反復測試,進而解決問題。這個過程也培養了學生的耐心和韌性。(本文所有代碼參見網址:https://gitee.com/edumaker/china-informationtechnology)