謝作如　張敬云

在2017年上海創(chuàng)客嘉年華的教育論壇上，國內(nèi)創(chuàng)客教師社群“貓友匯”和上海蘑菇云合作，在全國范圍內(nèi)啟動“校園創(chuàng)客嘉年華”活動。在論壇的前一天有教師提議，應(yīng)該讓啟動儀式更有儀式感，最好有特定的道具。因?yàn)椤靶@創(chuàng)客嘉年華”是一個非常有意義的活動，啟動儀式自然不能太寒酸。于是，筆者自告奮勇連夜做了一個啟動儀式道具。

創(chuàng)作思路

筆者最近一直在研究Micro：bit，并做了好多小項(xiàng)目。Micro：bit的廣播功能是它的亮點(diǎn)，利用廣播功能設(shè)計(jì)一個互動作品，在“校園創(chuàng)客嘉年華”的啟動儀式上讓更多的人參與進(jìn)來，共同見證創(chuàng)客盛會的開啟，不僅好玩，而且有“眾人拾柴火焰高”的象征意義。

很多人參加，就需要很多塊Micro：bit板子。但這不擔(dān)心，上海創(chuàng)客嘉年華的主辦方DFRobot公司可以為現(xiàn)場的嘉賓提供足夠多的板子。至于互動作品的編程語言，筆者選擇了Processing。Processing和Micro：bit互動一直很穩(wěn)定，筆者之前已經(jīng)寫了好多個互動作品。

作品描述

用電腦運(yùn)行Processing，顯示一個空白的窗口；一塊Micro：bit作為信號接收端，插到USB口；嘉賓們?nèi)巳顺忠粔KMicro：bit，作為信息發(fā)射端；當(dāng)嘉賓同時(shí)按下Micro：bit的A、B鍵時(shí)，板子上會出現(xiàn)一個向上的箭頭；作為信號接收端的Micro：bit板子會閃爍一次“心”型符號，電腦屏幕隨機(jī)出現(xiàn)幾個大小及顏色不一的泡泡，并發(fā)出魔幻音樂。隨著嘉賓同時(shí)按下A、B鍵的次數(shù)越來越多，屏幕顯示的泡泡也越來越多。當(dāng)按鍵次數(shù)達(dá)到一定的閾值時(shí)，屏幕開始進(jìn)入自己播放階段，小小的像素點(diǎn)越來越密集，背景圖片的輪廓也越來越清晰。最后，畫面全部顯示出來，電腦播放出振奮人心的交響樂。

作品的具體流程及各階段的畫面顯示效果如圖1～下頁圖4所示。

代碼實(shí)現(xiàn)

這個互動媒體作品由信號發(fā)送端、信號接收端和畫面處理端三部分組成。

（1）信號發(fā)送端。用MakeCode編寫，運(yùn)行于Micro：bit，當(dāng)用戶按下“A+B”鍵時(shí)發(fā)送廣播信號。

（2）信號接收端。用MakeCode編寫，運(yùn)行于Micro：bit，通過廣播接收用戶發(fā)來的信號。

（3）畫面處理端。用Processing編寫，在電腦上運(yùn)行，通過串口接收信號接收端的信息，對畫面進(jìn)行像素化處理，并播放聲音。

本作品中，Micro：bit要用到Radio（無線電廣播）模塊和Serial（串口）模塊，如圖5和圖6所示。用戶將按下的Micro：bit的A、B鍵的信號通過無線電廣播模塊發(fā)送給接收端，接收端接收到信號后，通過串口向Processing發(fā)送消息。

Processing代碼說明：運(yùn)行程序，電腦屏幕呈灰色顯示。當(dāng)接收到信息1時(shí)，屏幕隨機(jī)出現(xiàn)幾個大小及顏色不一的泡泡，并發(fā)出魔幻音樂，當(dāng)接收到信息1的次數(shù)越來越多但小于預(yù)設(shè)值時(shí)，屏幕顯示的泡泡也越來越多；當(dāng)接收到信息1的總次數(shù)達(dá)到預(yù)設(shè)值時(shí)，屏幕開始進(jìn)入自己播放階段，密密麻麻的像素點(diǎn)越來越多，背景圖片的輪廓也越來越清晰，最后全部顯示出來，電腦發(fā)出振奮人心的交響樂。

因?yàn)榇a較長，以下僅提供核心代碼。

PImage photo；

import Processing.serial.*；//導(dǎo)入serial通信庫

import ddf.minim.*；

AudioPlayer player1；

Minim minim；

Serial myPort；//創(chuàng)建對象duankou

int data；//變量data作為串口到的數(shù)據(jù)

int s；

int xx， yy；//因?yàn)槿列枰?jì)算的偏移量

void setup（） {

fullScreen（）；//全屏顯示

xx=（width-1233）/2；

yy=（height-688）/2；

photo=loadImage（"2017.png"）；

myPort = new Serial（this， Serial.list（）[1]， 115200）；

minim = new Minim（this）；

player1 = minim.loadFile（"bg.mp3"， 2048）；

}

void draw（） {

if （myPort.available（）>0）

{

data=myPort.read（）；

s=s+1；

}

if （data=='1'） {

for （int i=0； i<15； i++） {

int x=int（random（photo.width））；//隨機(jī)選取一個像素0-圖片寬度

int y=int（random（photo.height））；//隨機(jī)選取一個像素0-圖片高度

int xy=y*photo.width+x；

loadPixels（）；

float r=red（photo.pixels[xy]）；

float g=green（photo.pixels[xy]）；

float b=blue（photo.pixels[xy]）；

fill（r， g， b， 50）；

int diameter=int（random（5， 20））；

ellipse（x+xx， y+yy， diameter， diameter）；endprint

}

data=0；

player1.loop（）；

player1.play（）；

}

}

Micro：bit發(fā)送端代碼：如果按下Micro：bit的A、B鍵，則通過無線廣播模塊發(fā)送數(shù)字1，并在Micro：bit屏幕顯示“向上”的方向鍵圖標(biāo)（如表1）。

Micro：bit接收端代碼：如果通過無線廣播模塊接收到的數(shù)字為1，則向串口發(fā)送字符1，并將變量t設(shè)為1，同時(shí)Micro：bit屏幕顯示“心”型符號保持500毫秒（如表2）。

效果展示

下頁圖7～圖9是“校園創(chuàng)客嘉年華”啟動儀式現(xiàn)場的照片，嘉賓們帶著無比好奇的心情參與了隆重的創(chuàng)客盛會啟動儀式。

活動結(jié)束后，大家對這一作品評價(jià)很高。一位老師說道：“這個啟動儀式表達(dá)了創(chuàng)客教育始于草根，其寓意在于眾多的草根教育創(chuàng)客遍布全國各地，每個人的貢獻(xiàn)可能只是微光如豆，但彼此努力相互取暖，最終就能換得大道持久。”

這個互動媒體作品的成功展示，讓現(xiàn)場的老師對Micro：bit的強(qiáng)大功能有了更加深刻的印象。同時(shí)，筆者將這一互動媒體作品命名為《創(chuàng)·聚》，讓更多人記住創(chuàng)客教育從零到一、聚沙成塔的過程。

直播分享地址：

校園定向教學(xué)指導(dǎo)：https：//www.CCTalk.com/v/15082168528781？channel=copy&platform=android

學(xué)生校園定向?qū)嵺`：https：//www.CCTalk.com/v/15082183715927？channel=copy&platform=android

定向評價(jià)：https：//www.CCTalk.com/v/15082199768914？channel=copy&platform=android

定向活動頒獎：https：//www.CCTalk.com/v/15082210082145？channel=copy&platform=android

后記

我們通過直播可以清晰地看到在包老師所在學(xué)校，教師和學(xué)生在課堂上對教學(xué)APP的嫻熟運(yùn)用，并看出包老師對信息化條件下項(xiàng)目式學(xué)習(xí)的課堂教學(xué)的設(shè)計(jì)重構(gòu)，我想這對于很多希望在自己的課堂中也應(yīng)用教學(xué)APP的教師來說是很值得借鑒的。由于包老師放了很多的CCTalk圖片，所以筆者對于是否推薦本文有點(diǎn)猶豫，但包老師的一句話打消了我的顧慮：“這是免費(fèi)的，非常適合一線教師使用，好東西就要分享啊?！眅ndprint