作者/攝影	曾吉弘
時間	1小時
難度	★★★☆☆
材料表	LinkIt 7697*1（機器人王國購物連結，請點我） 按鈕 麵包板 杜邦線材

Processing 互動介面開發環境

    CAVEDU 使用 Processing 來教學也算有一段時間了，相當好用。學生用相對簡短的程式碼就可以產生相當豐富的互動介面、對於顏色、位置、聲音都有很不錯的效果（以下為阿吉老師FB貼文示範）。 雖然沒有圖形化介面這麼簡易，但就豐富度與支援度來說都相當不錯。今年我在北科互動系就再次嘗試使用 Processing 來完成 1/3 個學期的課程（後半學期為 Python）。 要匯入 opencv、Kinect 等各種的函式庫也很方便，當年很想寫一本 Processing的書啦，但就...算了。 更別說 p5.js 最近與 Google Teachable machine 有很好的連結，可以吃訓練好的神經網路模型做到視覺辨識的效果，超棒！ 來看看創辦人 Daniel 的教學影片： https://www.youtube.com/watch?v=kwcillcWOg0 因此 Arduino 這類平價開發板來取得真實環境中的訊號變化，再由 Processing 來呈現聲光效果，是個相當不錯的選擇。 這樣的思維我覺得對於互動設計背景的同學而言：你要好好思考到底要呈現怎樣的效果，才去思考要用怎樣的軟硬體技術來支援你。  

Processing 端程式

執行畫面如下，按下畫面不同顏色按鈕會送出字元 ‘A’ 與 ‘B’ 給 7697，7697 自然是接受什麼指令就做什麼事。比較重要的指令說明如下： [pastacode lang="python" manual="myPort%20%3D%20new%20Serial(this%2C%20Serial.list()%5B0%5D%2C%209600)%3B%0A%E5%AE%A3%E5%91%8A%E4%B8%80%E5%80%8B%20Serial%20%E5%BA%8F%E5%88%97%E9%80%9A%E8%A8%8A%E7%89%A9%E4%BB%B6%EF%BC%8Cbaudrate%20%E7%82%BA%209600%E3%80%82%E8%AB%8B%E6%B3%A8%E6%84%8F%20Serial.list()%5B0%5D%20%E4%BB%A3%E8%A1%A8%E6%82%A8%E9%9B%BB%E8%85%A6%20USB%20%E8%A3%9D%E7%BD%AE%E6%B8%85%E5%96%AE%E4%B8%AD%E7%9A%84%E7%AC%AC%E4%B8%80%E5%80%8B%E8%A3%9D%E7%BD%AE%E3%80%82%E4%BD%86%E9%80%99%E6%9C%89%E6%99%82%E5%80%99%E4%B8%8D%E4%B8%80%E5%AE%9A%E6%9C%83%E6%8A%93%E5%88%B0%207697%EF%BC%8C%E5%8F%AF%E4%BB%A5%E6%94%B9%E7%82%BA%20()%20%E4%BE%86%E6%8C%87%E5%AE%9A%C2%A0%20COM%20port%0Acom%20port%20%E8%AB%8B%E4%BB%A5%20Windows%20%E8%A3%9D%E7%BD%AE%E7%AE%A1%E7%90%86%E5%93%A1%E7%82%BA%E6%BA%96%0AMAC%C2%A0%20Linux%20%E5%8F%AF%E5%9C%A8%20terminal%20%E4%B8%8B%E6%8C%87%E4%BB%A4%E4%BE%86%E7%9C%8B%EF%BC%8C%E6%9C%83%E6%98%AF%20%2Fdev%2FttyACM0%20%E9%80%99%E6%A8%A3%E7%9A%84%E7%B5%90%E6%9E%9C%0A%0AmyPort.write('B')%3B%0A%E9%80%81%E5%87%BA%E5%AD%97%E5%85%83%E7%B5%A6%E5%B0%8D%E6%87%89%E8%A3%9D%E7%BD%AE(7697)%0AmyPort.read()%3B" message="" highlight="" provider="manual"/]  從對應裝置端讀取資料，預設格式為 ASCII code. 影片連結： https://youtu.be/_EgFOG1MyEk [pastacode lang="python" manual="import%20processing.serial.*%3B%0A%0Aint%20rectX%2C%20rectY%3B%20%20%20%20%20%20%2F%2F%20Position%20of%20square%20button%0Aint%20circleX%2C%20circleY%3B%20%20%2F%2F%20Position%20of%20circle%20button%0Aint%20rectSize%20%3D%2090%3B%20%20%20%20%20%2F%2F%20Diameter%20of%20rect%0Aint%20circleSize%20%3D%2093%3B%20%20%20%2F%2F%20Diameter%20of%20circle%0Acolor%20rectColor%2C%20circleColor%2C%20baseColor%3B%0Acolor%20rectHighlight%2C%20circleHighlight%3B%0Acolor%20currentColor%3B%0Aboolean%20rectOver%20%3D%20false%3B%0Aboolean%20circleOver%20%3D%20false%3B%0A%0Aint%20bg%3D0%3B%0A%0ASerial%20myPort%3B%0A%0Avoid%20setup()%20%7B%0A%0A%20%20myPort%20%3D%20new%20Serial(this%2C%20Serial.list()%5B0%5D%2C%209600)%3B%0A%20%20size(640%2C%20360)%3B%0A%20%20rectColor%20%3D%20color(0)%3B%0A%20%20rectHighlight%20%3D%20color(51)%3B%0A%20%20circleColor%20%3D%20color(255)%3B%0A%20%20circleHighlight%20%3D%20color(204)%3B%0A%20%20baseColor%20%3D%20color(102)%3B%0A%20%20currentColor%20%3D%20baseColor%3B%0A%20%20circleX%20%3D%20width%2F2%2BcircleSize%2F2%2B10%3B%0A%20%20circleY%20%3D%20height%2F2%3B%0A%20%20rectX%20%3D%20width%2F2-rectSize-10%3B%0A%20%20rectY%20%3D%20height%2F2-rectSize%2F2%3B%0A%20%20ellipseMode(CENTER)%3B%0A%7D%0A%0Avoid%20draw()%20%7B%0A%20%20%0A%20%20update(mouseX%2C%20mouseY)%3B%0A%20%20%0A%20%20while%20(myPort.available()%20%3E%200)%20%7B%0A%20%20%20%20int%20inByte%20%3D%20myPort.read()%3B%0A%20%20%20%20if%20(inByte%20%3D%3D%20'C')%20%7B%0A%20%20%20%20%20%20bg%2B%2B%3B%0A%20%20%20%20%20%20if%20(bg%3E1)%20bg%3D0%3B%0A%20%20%20%20%20%20if%20(bg%3D%3D1)%20currentColor%3Dcolor(0%2C255%2C0)%3B%0A%20%20%20%20%20%20if%20(bg%3D%3D0)%20currentColor%3Dcolor(255%2C0%2C0)%3B%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20%0A%20%20background(currentColor)%3B%0A%20%20%0A%20%20if%20(rectOver)%20%7B%0A%20%20%20%20fill(rectHighlight)%3B%0A%20%20%7D%20else%20%7B%0A%20%20%20%20fill(rectColor)%3B%0A%20%20%7D%0A%20%20stroke(255)%3B%0A%20%20rect(rectX%2C%20rectY%2C%20rectSize%2C%20rectSize)%3B%0A%20%20%0A%20%20if%20(circleOver)%20%7B%0A%20%20%20%20fill(circleHighlight)%3B%0A%20%20%7D%20else%20%7B%0A%20%20%20%20fill(circleColor)%3B%0A%20%20%7D%0A%20%20stroke(0)%3B%0A%20%20ellipse(circleX%2C%20circleY%2C%20circleSize%2C%20circleSize)%3B%0A%7D%0A%0Avoid%20update(int%20x%2C%20int%20y)%20%7B%0A%20%20if%20(%20overCircle(circleX%2C%20circleY%2C%20circleSize)%20)%20%7B%0A%20%20%20%20circleOver%20%3D%20true%3B%0A%20%20%20%20rectOver%20%3D%20false%3B%0A%20%20%7D%20else%20if%20(%20overRect(rectX%2C%20rectY%2C%20rectSize%2C%20rectSize)%20)%20%7B%0A%20%20%20%20rectOver%20%3D%20true%3B%0A%20%20%20%20circleOver%20%3D%20false%3B%0A%20%20%7D%20else%20%7B%0A%20%20%20%20circleOver%20%3D%20rectOver%20%3D%20false%3B%0A%20%20%7D%0A%7D%0A%0Avoid%20mousePressed()%20%7B%0A%20%20if%20(circleOver)%20%7B%0A%20%20%20%20currentColor%20%3D%20circleColor%3B%0A%20%20%20%20myPort.write('A')%3B%20%20%23%E9%80%81%E5%87%BA%E5%AD%97%E5%85%83A%0A%20%20%7D%0A%20%20if%20(rectOver)%20%7B%0A%20%20%20%20currentColor%20%3D%20rectColor%3B%0A%20%20%20%20myPort.write('B')%3B%20%20%23%E9%80%81%E5%87%BA%E5%AD%97%E5%85%83B%0A%20%20%7D%0A%7D%0A%0Aboolean%20overRect(int%20x%2C%20int%20y%2C%20int%20width%2C%20int%20height)%20%20%7B%0A%20%20if%20(mouseX%20%3E%3D%20x%20%26%26%20mouseX%20%3C%3D%20x%2Bwidth%20%26%26%20%0A%20%20%20%20%20%20mouseY%20%3E%3D%20y%20%26%26%20mouseY%20%3C%3D%20y%2Bheight)%20%7B%0A%20%20%20%20return%20true%3B%0A%20%20%7D%20else%20%7B%0A%20%20%20%20return%20false%3B%0A%20%20%7D%0A%7D%0A%0Aboolean%20overCircle(int%20x%2C%20int%20y%2C%20int%20diameter)%20%7B%0A%20%20float%20disX%20%3D%20x%20-%20mouseX%3B%0A%20%20float%20disY%20%3D%20y%20-%20mouseY%3B%0A%20%20if%20(sqrt(sq(disX)%20%2B%20sq(disY))%20%3C%20diameter%2F2%20)%20%7B%0A%20%20%20%20return%20true%3B%0A%20%20%7D%20else%20%7B%0A%20%20%20%20return%20false%3B%0A%20%20%7D%0A%7D%0A" message="" highlight="" provider="manual"/]

7697端程式

如果您想用一般的 Arduino Uno, Mega 2560等等，請參考本文即可，會更簡單。Arduino端只要下載內附的範例 StandardFirmata 就可接收來自 Processing 端的指令。但由於 7697端的 Firmata 還要改，所以先使用 serial 送字元的方式處理。 [pastacode lang="python" manual="void%20setup()%0A%7B%0A%0A%20%20Serial.begin(9600)%3B%0A%20%20pinMode(3%2CINPUT)%3B%0A%20%20pinMode(4%2COUTPUT)%3B%0A%20%20pinMode(5%2COUTPUT)%3B%0A%20%20digitalWrite(4%2CLOW)%3B%0A%20%20digitalWrite(5%2CLOW)%3B%0A%7D%0A%0A%0Avoid%20loop()%0A%7B%0A%0A%20%20if%20(Serial.available())%20%7B%0A%20%20%20%20char%20code%20%3D%20Serial.read()%3B%0A%20%20%20%20if%20(code%20%3D%3D%20'A')%20%7B%0A%20%20%20%20%20%20digitalWrite(4%2CHIGH)%3B%0A%20%20%20%20%20%20digitalWrite(5%2CLOW)%3B%0A%20%20%20%20%7D%0A%20%20%20%20if%20(code%20%3D%3D%20'B')%20%7B%0A%20%20%20%20%20%20digitalWrite(4%2CLOW)%3B%0A%20%20%20%20%20%20digitalWrite(5%2CHIGH)%3B%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20if%20(digitalRead(3)%3D%3DLOW)%20%7B%20%20%2F%2F%E5%A6%82%E6%9E%9C%233%E6%8C%89%E9%88%95%E8%A2%AB%E6%8C%89%E4%B8%8B%EF%BC%8C%E9%80%81%E5%AD%97%E5%85%83%20C%20%E7%B5%A6%20Processing%0A%20%20%20%20Serial.print('C')%3B%0A%20%20%20%20delay(200)%3B%0A%20%20%7D%0A%7D%0A" message="" highlight="" provider="manual"/]