processing 基礎教學
TRANSCRIPT
Processing 互動媒體開發 結合 Arduino
CAVEDU Education,2013
國北教大玩具與遊戲設計碩士
政治大學資訊管理學士
淡江電機博士班就讀中
現為CAVE教育團隊 技術總監
多校機器人業界講師
<MAKE>、<ROBOCON>雜誌特約編輯
Processing簡介
• Processing 由Ben Fry 及Casey Reas 發起，並且是由MIT Media Lab的Aesthetics and Computation Group的構想發展出來的。
• Processing 開放原始碼的程式語言及開發環境，以Java語法為基礎，可轉換為Java程式，主要用於藝術、影像、影音設計與處理。支援的平台有Linux、Mac OS X及Windows。
• 現在 Processing 可與 Arduino 嵌入式開發進行互動，更可結合 Android 行動裝置。
程式碼
常用功能
偵錯訊息
• Run
• Stop
• New
• Open
• Save
• Export Application
Processing 基本程式架構
• void setup()
• 設定與宣告
• void draw()
• 負責繪圖的無窮迴圈
001：長方形
1. size(200,200);
2. background(255);
3. stroke(0);
4. fill(150);
5. rect(50,50,75,100);
002：無填滿小圓
1. size(200,200);
2. smooth();
3. background(255);
4. // noFill() leaves the shape with only an outline.
5. noFill();
6. stroke(0);
7. ellipse(60,60,100,100);
003：三個小圓 1. smooth();
2. background(255);
3. noStroke();
4. // Bright red
5. fill(255,0,0);
6. ellipse(20,20,16,16);
7. // Dark red
8. fill(127,0,0);
9. ellipse(40,20,16,16);
10. // Pink (pale red)
11. fill(255,200,200);
12. ellipse(60,20,16,16);
Processing Color Selector
挑戰
• 改用for loop 產生一排五個圓
• 連顏色一起random?
– random(255);
004：透明度
1. // Example 1-4: Alpha Transparency
2. size(200,200);
3. background(0);
4. noStroke();
5. // No fourth argument means 100% opacity.
6. fill(0,0,255);
7. rect(0,0,100,200);
8. // 255 means 100% opacity.
9. fill(255,0,0,255);
10. rect(0,0,200,40);
11.// 75% opacity.
12. fill(255,0,0,191);
13. rect(0,50,200,40); //以下省略
005：小機器人
006：滑鼠座標
• mouseX：滑鼠X座標
• mouseY：滑鼠Y座標
007：滑鼠點擊mousePressed
008：鍵盤按鍵事件
• keyPressed / key ==‘?’
15_1 載入圖片
• 圖檔要放在 /data 中
15_3 隨機顯示圖片
• 隨機指定影像陣列之 index 達到隨機換圖的效果
• 挑戰！如何改為依序顯示？(i++ / i--)
Clock：文字與系統時間
• 取得系統時間
• 根據XY座標改變顏色
重要連結
• http://wiki.processing.org/w/Android
• http://pandalabccc.blogspot.tw/search/label/Processing
• http://www.learningprocessing.com/
• http://hali619.blogspot.tw/2012/08/processing1.html
• Ketai – Processing Android Library