1 / 29

C++

C++. Java. Processing. 互動多媒體. 精簡. 精簡. 精簡. 互動裝置. Arduino UI. Arduino. 自動控制. Android. 平板程式. Amarino. 移動控制. Processing 特色 開發環境跨平台 ： Windows / Mac / Linux 執行環境 跨平台 ： Windows / Android 簡單易學 ： for artist 資源眾多：與 Java 完全相容 功能強大 (with Arduino) 硬體控制：互動裝置、 自動控制、智慧家電. Processing

maximus-zenas
Download Presentation

C++

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. C++ Java Processing 互動多媒體 精簡 精簡 精簡 互動裝置 Arduino UI Arduino 自動控制 Android 平板程式 Amarino 移動控制

  2. Processing特色 • 開發環境跨平台：Windows / Mac / Linux • 執行環境跨平台：Windows / Android • 簡單易學：for artist • 資源眾多：與Java完全相容 • 功能強大(with Arduino) • 硬體控制：互動裝置、 自動控制、智慧家電

  3. Processing • http://www.processing.org • Ardunio • http://www.arduino.cc • Amarino • http://www.amarino-toolkit.net/

  4. 環境安裝 Java Processing 精簡 JDK Processing-1.5 精簡 Arduino UI Arduino-0021 Android Installer_r16-windows

  5. Processing基本指令 • Image • size(Width, Height) －設定畫布大小為(Width, Height) • background(R, G, B) －設定畫布顏色 • fill(R, G, B) －設定畫筆顏色(填滿) • noFill() －無填滿(透明) • stroke(R, G, B) －設定畫筆顏色(線條) • noStroke() －無線條 • 顏色欄位若只有指定一個值，代表灰階顏色 • 如fill(100)等同fill(100,100,100)的效果 <Reference> Color

  6. Processing的座標系統 size(X, Y) X軸 (0,0) Y軸 (X, Y)

  7. 繪圖指令 • point(X, Y) －在(X,Y)畫一個點 • line(X1, Y1, X2, Y2)－畫一條(X1,Y1)到(X2,Y2)的線 • rect(X1, Y1, Width, Height)－以(X1,Y1)為起始點畫一個長為Width(X軸) ，寬為Height(Y軸)的矩形 • ellipse(X1, Y1, RX, RY)－以圓心(X1,Y1)畫一個X軸半徑為RX，Y軸半徑為RY的圓 <Reference> 2D Primitives

  8. 顏色系統 • RGB / RGBA • CMYK

  9. 顏色表示方式 • 0~255, int • (255,0,0) ? • (255,0,0,10) ?

  10. 簡單的範例 size(200,200); background(0,0,0); fill(255,0,0); noStroke(); rect(10,10,20,20); stroke(0,255,0); rect(10,40,20,20); 視窗大小為200X200 設定背景色 設定填滿顏色 無線條 畫矩形 設定線條顏色 畫矩形

  11. Processing架構 • 基本模式(Basic Mode) • 連續模式(Continuous Mode) • Java模式(Java Mode)

  12. 基本模式 • 直接撰寫所需程式碼 • 寫法最簡便，適合測試功能或簡單的程式

  13. 連續模式 • 提供兩個內建函式 • setup()－程式開始執行後會被呼叫一次 • draw()－程式開始執行後會不斷的被呼叫 • 可自訂其他函式 setup draw run others

  14. 內建變數 • width － int，視窗寬度 • height － int，視窗高度 • mouseX － int，滑鼠X座標 • mouseY －int，滑鼠Y座標

  15. 連續模式 void setup() { size(200, 200); noStroke(); fill(0, 100, 150, 200); } void draw() { background(255); ellipse(width-mouseX, height-mouseY, 50, 50); ellipse(mouseX, mouseY, 50, 50); } <試試看> 加入smooth() <試試看> Alpha的影響 <試試看> 放在draw和setup的差別 <想想看> 怎麼讓兩個圓形有不同顏色

  16. void setup() { size(200, 200); noStroke(); fill(0, 100, 150, 200); } void draw() { background(255); mickey(mouseX, mouseY); } void mickey(int x,int y) { ellipse(mouseX-25, mouseY-25, 30, 30); ellipse(mouseX+25, mouseY-25, 30, 30); ellipse(mouseX, mouseY, 50, 50); }

  17. Java模式 • 可自訂類別，以物件化、模組化的方式開發系統

  18. MickeyMouse mm; int sx,sy; void setup() { size(200, 200); noStroke(); fill(0, 100, 150, 200); mm=new MickeyMouse(); } void draw() { background(255); mm.show(mouseX,mouseY); mickey(mm.sx,mm.sy); } void mickey(int x,int y) { ellipse(x-25, y-25, 30, 30); ellipse(x+25, y-25, 30, 30); ellipse(x, y, 50, 50); } class MickeyMouse { float speed=0.05,prex=-1,prey=-1; public int sx,sy; void show(int mx,int my) { if(prex==-1) {sx=mx;sy=my;prex=mx;prey=my;} else { float dx = mx - prex; if(abs(dx) > 1) { prex += dx * speed; } float dy = my - prey; if(abs(dy) > 1) { prey += dy * speed; } sx=int(prex); sy=int(prey); } } } Mickey MickeyMouse

  19. Keyboard <補充> Processing稱為inside event • keyPressed() －Callback，按鍵按下 • keyReleased() －Callback，按鍵放開 • keyPressed －boolean，目前按鍵是否有被按下 • keyCode －被按下的特殊按鍵代號 • key －char/int，被按下的按鍵代號(ASCII)

  20. 不使用Callback的作法 /* title: Move ball by keyboard description: detect input key by polling method created: Feb. 17, 2009 by: ylw */ int px,py; void setup() { size(200, 200); fill(0, 100, 150, 200); smooth(); px=width/2; py=height/2; } void draw() { background(255); if(keyPressed) { if(key=='a' && px>0) px--; //往左移 if(key=='d' && px<width) px++; //往右移 if(key=='w' && py>0) py--; //往上移 if(key=='s' && py<height) py++; //往下移 } ellipse(px, py, 50, 50); } <補充> 這種作法又稱為polling(輪詢)

  21. 使用Callback的作法 /* title: Move ball by keyboard description: detect input key by callback method created: Feb. 17, 2009 by: ylw */ int px,py; void setup() { size(200, 200); fill(0, 100, 150, 200); smooth(); px=width/2; py=height/2; } void draw() { background(255); ellipse(px, py, 50, 50); } void keyPressed() { if(key=='a' && px>0) px--; //往左移 if(key=='d' && px<width) px++; //往右移 if(key=='w' && py>0) py--; //往上移 if(key==‘s’ && py<height) py++; //往下移 println((int)key); }

  22. 特殊按鍵的判斷 /* title: Move ball by keyboard description: detect input key by callback method created: Feb. 17, 2009 by: ylw */ int px,py; void setup() { size(200, 200); fill(0, 100, 150, 200); smooth(); px=width/2; py=height/2; } void draw() { background(255); ellipse(px, py, 50, 50); } void keyPressed() { if(key==CODED) { if(keyCode==LEFT && px>0) px--; //往左移 if(keyCode==RIGHT && px<width) px++; //往右移 if(keyCode==UP && py>0) py--; //往上移 if(keyCode==DOWN && py<height) py++; //往下移 } println((int)key); } <Reference> UP, DOWN, LEFT, RIGHT, ALT, CONTROL, SHIFT

  23. Mouse • mousePressed() －Callback，滑鼠按鍵按下 • mouseReleased() －Callback，滑鼠按鍵放開 • mouseDragged() －Callback，滑鼠按鍵按下並移動 • mouseMoved() －Callback，滑鼠移動但按鍵沒按下 • mousePressed－boolean，目前滑鼠按鍵是否有被按下 • mouseButton－被按下的按鍵代號(LEFT/RIGHT/CENTER) • mouseX/ mouseY －目前滑鼠游標座標 • pmouseX/ pmouseY －目前滑鼠游標座標與上一次座標的位移量

  24. 相對位移 (mouseX, mouseY) (1,2) (pmouseX, pmouseY) (9,13) (mouseX, mouseY) (10,15)

  25. 在draw取得相對位移 void setup() { size(200, 200); background(255); } void draw() { line(pmouseX, pmouseY, mouseX, mouseY); }

  26. 在mouse event取得相對位移 void setup() { size(200, 200); background(255); } void draw() { } void mouseMoved() { line(pmouseX, pmouseY, mouseX, mouseY); }

  27. 取得相對位移兩種方法的合併比較 void setup() { size(200, 200); background(255); } void draw() { stroke(200,0,0); line(pmouseX, pmouseY, mouseX, mouseY); } void mouseMoved() { stroke(0); line(pmouseX, pmouseY, mouseX, mouseY); }

  28. void setup() { size(400,400); smooth(); stroke(0); } void draw(){} void mouseMoved() { int px,py; background(255); noFill(); ellipse(120,200,130,120); ellipse(280,200,130,120); fill(100); px=(int)((mouseX-200)*0.2); py=(int)((mouseY-200)*0.2); ellipse(120+px,200+py,20,15); ellipse(280+px,200+py,20,15); }

More Related