Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Processing Tutorial - Create your interactive program in a click~

4.736 visualizaciones

Publicado el

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

Publicado en: Diseño, Tecnología
  • Sé el primero en comentar

Processing Tutorial - Create your interactive program in a click~

  1. 1. Processing 互動媒體結合Android智慧型手機研習營CAVE Education,2013
  2. 2. 曾吉弘nissin@cavedu.com國北教大玩具與遊戲設計碩士政治大學資訊管理學士淡江電機博士班就讀中現為CAVE教育團隊 技術總監多校機器人業界講師<MAKE>、<ROBOCON>雜誌特約編輯
  3. 3. CreativityAdventureVirtueEnjoy
  4. 4. Robocon雜誌國際中文版
  5. 5. Facebook  CAVE教育團隊
  6. 6. CAVE系列叢書
  7. 7. CAVE活動公布欄
  8. 8. CAVE課程
  9. 9. CAVE實驗室
  10. 10. 本日流程• 9:30 CAVE教育團隊簡介• 9:50 Processing 環境安裝 設定 Android SDK 資料夾 與Android 裝置驅動程式 介紹Processing IDE與程式基礎架構 第一支Processing 程式 - 繪製幾何圖形• 10:30 結合鍵盤與滑鼠動作 按下不同的按鍵畫出各種圖形與線條 滑鼠點擊與拖拉 - 小畫家• 13:00 將Processing 專案執行於手機如何下載外部函式庫觸碰互動小球範例• 15:30 取得手機的硬體狀態加速度、姿態感測器取得座標• 16:50 結語、賦歸
  11. 11. Processing簡介• Processing 由Ben Fry 及Casey Reas 發起,並且是由MIT Media Lab的Aesthetics and Computation Group的構想發展出來的。• Processing 開放原始碼的程式語言及開發環境,以Java語法為基礎,可轉換為Java程式,主要用於藝術、影像、影音設計與處理。支援的平台有Linux、Mac OS X及Windows。• 現在 Processing 可與 Arduino 嵌入式開發進行互動,更可結合 Android 行動裝置。
  12. 12. 程式碼常用功能偵錯訊息
  13. 13. • Run• Verify• New• Open• Save• Export Application
  14. 14. Processing 基本程式架構• void setup()• 設定與宣告• void draw()• 負責繪圖的無窮迴圈
  15. 15. 001:長方形1. size(200,200);2. background(255);3. stroke(0);4. fill(150);5. rect(50,50,75,100);
  16. 16. 002:無填滿小圓1. size(200,200);2. smooth();3. background(255);4. // noFill() leaves theshape with only anoutline.5. noFill();6. stroke(0);7. ellipse(60,60,100,100);
  17. 17. 003:三個小圓1. smooth();2. background(255);3. noStroke();4. // Bright red5. fill(255,0,0);6. ellipse(20,20,16,16);7. // Dark red8. 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);
  18. 18. Processing Color Selector
  19. 19. 挑戰• 改用for loop 產生一排五個圓• 連顏色一起random?– random(255);
  20. 20. 004:透明度1. // Example 1-4: Alpha Transparency2. 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); //以下省略
  21. 21. 005:小機器人
  22. 22. 006:滑鼠座標• mouseX:滑鼠X座標• mouseY:滑鼠Y座標
  23. 23. 007:滑鼠點擊mousePressed
  24. 24. 008:鍵盤按鍵事件• keyPressed / key ==‘?’
  25. 25. 15_1 載入圖片• 圖檔要放在 /data 中
  26. 26. 15_3 隨機顯示圖片• 隨機指定影像陣列之 index 達到隨機換圖的效果• 挑戰!如何改為依序顯示?(i++ / i--)
  27. 27. Clock:文字與系統時間• 取得系統時間• 根據XY座標改變顏色
  28. 28. 重要連結• 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

×