Chap 01 Processing簡介

(1)

Chap 01 Processing簡介

Kun Shan University http://www.ksu.edu.tw

評分標準



期中作品 30%



期末作品 40%



上課與小考作業 30%

(2)

什麼是Processing

 http://www.processing.org



由Ben Fry (Broad Institute) 及Casey Reas (UCLA Design | Media Arts) 發起，並且是由 MIT Media Lab的Aesthetics and Computation Group的構想發展出來的



開放原始碼的程式語言及開發環境



以Java語法為基礎，可轉換為Java程式



主要用於藝術、影像、影音設計與處理



支援的平台有Linux、Mac OS X及Windows

Java

Processing

(3)

Processing下載與安裝

Processing介面介紹(1)

開發中Sketch名稱 Processing版本

執行/停止/新Sketch /載入Sketch/儲存Sketch /匯出Sketch

(4)

Processing介面介紹(2)

程式碼

輸出訊息 message

print

Processing介面介紹(3)



Help->Reference(->Extended)

<Reference>

Color

(5)

Sketch介紹



每一個專案都稱為一個sketch，每個sketch都有一個和sketch名稱相同的目錄，並在此目錄中產生一個sketch主程式



所有的sketch都集中放在sketchbook中，

sketchbook為檔案存放的路徑



程式執行所需資料(如圖檔、音效檔)可放置在與sketch主程式同目錄下的data目錄內(或與 sketch主程式同目錄)

(6)

Sketchbook設定



File->Preference

第一個sketch



Hello World

(7)

匯出sketch



可選擇兩種匯出的格式



Applet



Application

執行方式存取本地電腦資源

Applet 網路(瀏覽器) 需經過認證(signed) Application 本機 Yes

匯出Applet

(8)

匯出Application

Resource



Help->Reference



http://www.processing.org

(9)

Processing基本指令



Text



print(String) －顯示文字String



println(String) －顯示文字String並且換行

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

(10)

Processing的座標系統

(0,0) X軸

Y軸

size(X, Y)

(X, Y)

繪圖指令



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的圓

(11)

顏色系統



RGB / RGBA



CMYK

顏色表示方式



0~1, float



0~255, int



(255,0,0) ?



(255,0,0,10) ?

(12)

簡單的範例

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 設定背景色

設定填滿顏色無線條

畫矩形

設定線條顏色畫矩形

float angle=0;

size(450,450);

translate(10,10);

for(int j=0;j<20;j++) {

pushMatrix();

for(int i=0;i<20;i++) {

fill(i10,j10,0);

pushMatrix();

rotate(angle);

rect(-7,-7,14,14);

popMatrix();

translate(20,0);

angle+=PI/10;

}

(13)

Processing架構



基本模式(Basic Mode)



連續模式(Continuous Mode)



Java模式(Java Mode)

基本模式



直接撰寫所需程式碼



寫法最簡便，適合測試功能或簡單的程式

(14)

連續模式



提供兩個內建函式



setup()－程式開始執行後會被呼叫一次



draw()－程式開始執行後會不斷的被呼叫



可自訂其他函式

run setup draw

others

內建變數



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

}

<試試看>

放在draw和setup 的差別

<試試看>

加入smooth()

<試試看>

Alpha的影響

<想想看>

怎麼讓兩個圓形有不同顏色

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

(16)

Java模式



可自訂類別，以物件化、模組化的方式開發系

統

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

Mickey MickeyMouse

(17)

課堂作業



請用繪圖指令繪製一個圖案



追蹤滑鼠位置，並透過滑鼠位置進行互動



使用draw()的特殊功能，讓畫面可以更新製造出動態效果



整合有意義之圖形或Logo，暫時不要使用Image模式請使用程式將圖形繪製出來

