數位影像處理 Digital Image Processing

數位影像處理Digital Image Processing 吳育龍老師

What is Processing • http://www.processing.org • 由Ben Fry (Broad Institute) 及Casey Reas (UCLA Design | Media Arts) 發起，並且是由MIT Media Lab的Aesthetics and Computation Group的構想發展出來的 • Open Source • Based on JavaLanguage，Processing code can be transformed to Java code • 主要用於藝術、影像、影音設計與處理 • Support Linux, Mac OS X and Windows

Java Processing

Processing下載與安裝

Processing介面介紹(1) 開發中Sketch名稱 Processing版本執行/停止/新Sketch /載入Sketch/儲存Sketch /匯出Sketch

Processing介面介紹(2) 程式碼輸出訊息 message print

Processing介面介紹(3) • Help->Reference(->Extended) <Reference> Color

Sketch介紹 • 每一個專案都稱為一個sketch，每個sketch都有一個和sketch名稱相同的目錄，並在此目錄中產生一個sketch主程式 • 所有的sketch都集中放在sketchbook中， sketchbook為檔案存放的路徑 • 程式執行所需資料(如圖檔、音效檔)可放置在與sketch主程式同目錄下的data目錄內(或與sketch主程式同目錄)

Sketchbook設定 • File->Preference

第一個sketch • Hello World

匯出sketch • 可選擇匯出的格式 • Application

匯出Application

Resource • Help->Reference • http://www.processing.org

Internal Variable • width － int，視窗寬度 • height － int，視窗高度 • mouseX － int，滑鼠X座標 • mouseY －int，滑鼠Y座標

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

A Simple Example(Basic Mode) 視窗大小為200X200 設定背景色設定填滿顏色無線條畫矩形設定線條顏色畫矩形 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);

Basic Structure (Continuous Mode) begin setup() draw() others() stop() end

A Simple Example (Continuous Mode) 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); } <try> 加入smooth() <try> Alpha的影響 <try> 放在draw和setup的差別 <think> 怎麼讓兩個圓形有不同顏色

Image • PImage－儲存image的資料型別 • loadImage(URL) －從URL(包含本地路徑)載入圖片 • image(Image,X, Y) －在座標(X,Y)顯示Image • tint(R,G,B) －將要顯示的圖片染成指定的顏色 • noTint() －取消染色設定 • Background(Image) －將Image顯示為背景，大小需要和視窗一樣大

Picture is tinted color PImage b; size(640,240); b = loadImage("lenna.png"); tint(100, 0,100); // Tint purple image(b, 0, 0,320,200); noTint(); // Disable tint image(b, 320,0,320,200); <Reference> 可改變長寬比

Video 注意：外部Library import processing.video.*; • Movie－儲存影片的資料型別 • Methods • read() －讀取影片資料 • available() －boolean，確認影片資料是否可讀取 • play() －播放一次影片 • loop() －不斷播放影片 • pause() －暫停播放影片 • stop() －停止播放影片 • noLoop() －若目前是loop狀態，則播放結束後就不繼續播 • jump(Second) －跳到Second秒數的位置播放 • duration() －float，以秒數表示影片總長度 • time() －float，以秒數表示目前影片已播放的時間 • speed(Rate) －設定播放速度，Rate=1為正常，Rate>1則變快，1>Rate>0則變慢，Rate=-1則倒轉 • frameRate(FPS) －設定一秒鐘播放FPS個畫面

void draw() { if(myMovie.available()) myMovie.read(); image(myMovie, 0, 0); } 第二種作法 Play movie repeatedly import processing.video.*; Movie myMovie; void setup() { size(180,160,P2D); background(0); myMovie = new Movie(this, "station.mov"); myMovie.loop(); } void draw() {image(myMovie, 0, 0);} void movieEvent(Movie m) {m.read();} <試試看> 是否可用其他模式

import processing.video.*; Movie myMovie; void setup() { size(640,480,P2D); background(0); myMovie = new Movie(this, "station.mov"); myMovie.loop(); } void draw() { for(int i=0;i<8;i++) for(int j=0;j<6;j++) { tint(i*30,256-j*40,(i+j)*5); image(myMovie, i*80, j*80,80,80); } } void movieEvent(Movie m) {m.read();}

Control playing speed of movie import processing.video.*; Movie myMovie; int fps=15; float rate=1; void setup() { size(180,160,P2D); background(0); myMovie = new Movie(this, "station.mov"); myMovie.loop(); } void draw() {image(myMovie, 0, 0);} void movieEvent(Movie m) {m.read();} void mousePressed() { if(mouseButton==LEFT) {fps--;rate-=0.1;} else if(mouseButton==RIGHT) {fps++;rate+=0.1f;} if(fps<1) fps=1; //myMovie.frameRate(fps); myMovie.speed(rate); println("FPS: "+fps+" RATE: "+rate); }

數位影像處理 Digital Image Processing