Simple tutorial for Processing getting started. code: https://sites.google.com/a/cavedu.com/www/file/code_151202.rar?attredirects=0&d=1

1. Processing 互動媒體開發
結合 Arduino
CAVEDU Education,2013

2. 曾吉弘
nissin@cavedu.com
國北教大玩具與遊戲設計碩士
政治大學資訊管理學士
淡江電機博士班就讀中
現為CAVE教育團隊 技術總監
多校機器人業界講師
<MAKE>、<ROBOCON>雜誌特約編輯

3. Processing簡介
• Processing 由Ben Fry 及Casey Reas 發起，並且是由
MIT Media Lab的Aesthetics and Computation Group
的構想發展出來的。
• Processing 開放原始碼的程式語言及開發環境，以Java語
法為基礎，可轉換為Java程式，主要用於藝術、影像、影
音設計與處理。支援的平台有Linux、Mac OS X及
Windows。
• 現在 Processing 可與 Arduino 嵌入式開發進行互動，更
可結合 Android 行動裝置。

4. 程式碼
常用功能
偵錯訊息

5. • Run
• Stop
• New
• Open
• Save
• Export Application

6. Processing 基本程式架構
• void setup()
• 設定與宣告
• void draw()
• 負責繪圖的無窮迴圈

7. 001：長方形
1. size(200,200);
2. background(255);
3. stroke(0);
4. fill(150);
5. rect(50,50,75,100);

8. 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);

9. 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);

10. Processing Color Selector

11. 挑戰
• 改用for loop 產生一排五個圓
• 連顏色一起random?
– random(255);

12. 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); //以下省略

13. 005：小機器人

14. 006：滑鼠座標
• mouseX：滑鼠X座標
• mouseY：滑鼠Y座標

15. 007：滑鼠點擊mousePressed

16. 008：鍵盤按鍵事件
• keyPressed / key ==‘?’

17. 15_1 載入圖片
• 圖檔要放在 /data 中

18. 15_3 隨機顯示圖片
• 隨機指定影像陣列之 index 達到隨機換圖
的效果
• 挑戰！如何改為依序顯示？(i++ / i--)

19. Clock：文字與系統時間
• 取得系統時間
• 根據XY座標改
變顏色

20. 重要連結
• http://wiki.processing.org/w/Android
• http://pandalabccc.blogspot.tw/search/label/Processi
ng
• http://www.learningprocessing.com/
• http://hali619.blogspot.tw/2012/08/processing1.html
• Ketai – Processing Android Library