Using Processing 2 to create various kinds of interactive programs and games. Further you can combine Processing with Arduino and Android phone. More interesting: http://www.cavedu.com

1. Processing 互動媒體結合
Android智慧型手機研習營
CAVE Education,2013

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

3. Creativity
Adventure
Virtue
Enjoy

6. Robocon雜誌國際中文版

7. Facebook  CAVE教育團隊

8. CAVE系列叢書

9. CAVE活動公布欄

10. CAVE課程

11. CAVE實驗室

12. 本日流程
• 9:30 CAVE教育團隊簡介
• 9:50 Processing 環境安
裝 設定 Android SDK 資
料夾 與Android 裝置驅動
程式 介紹Processing IDE
與程式基礎架構 第一支
Processing 程式 - 繪製幾
何圖形
• 10:30 結合鍵盤與滑鼠動
作 按下不同的按鍵畫出各
種圖形與線條 滑鼠點擊與
拖拉 - 小畫家
• 13:00 將Processing 專案
執行於手機
如何下載外部函式庫
觸碰互動小球範例
• 15:30 取得手機的硬體狀
態
加速度、姿態感測器
取得座標
• 16:50 結語、賦歸

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

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

15. • Run
• Verify
• New
• Open
• Save
• Export Application

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

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

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

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

20. Processing Color Selector

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

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

23. 005：小機器人

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

25. 007：滑鼠點擊mousePressed

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

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

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

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

30. 重要連結
• 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