Download as PDF, PPTX
Uploaded byCAVEDU Education
Processing Tutorial - Create your interactive program in a click~
本文件介绍了《Processing》互动媒体与Android智慧型手机的研讨会，涵盖基本的Processing环境设置、项目执行及与手机交互的技术。内容包括图形绘制、移动设备硬件状态获取以及程序结构和常用功能。Processing作为一种开放原始码的编程语言，特别适合艺术及设计领域，并支持与Arduino及Android设备的互动。
Processing Tutorial - Create your interactive program in a click~
- 1.
- 2.
- 3.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 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 由BenFry 及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 基本程式架構 • voidsetup() • 設定與宣告 • 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.
- 21. 挑戰 • 改用for loop產生一排五個圓 • 連顏色一起random? – random(255);
- 22. 004：透明度 1. // Example1-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.
- 24.
- 25.
- 26. 008：鍵盤按鍵事件 • keyPressed /key ==‘?’
- 27. 15_1 載入圖片 • 圖檔要放在/data 中
- 28. 15_3 隨機顯示圖片 • 隨機指定影像陣列之index 達到隨機換圖 的效果 • 挑戰！如何改為依序顯示？(i++ / i--)
- 29.
- 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