week1

Welcome to the Interaction-Design-Foundation wiki!

---

Getting Start with Processing

1st Week (2014.3.5)

[學習資源介紹]

• Processing.org
• Processing Reference : Processing的資源索引
• Processing Tutorials : Processing的官方教材
• Processing Example : Processing的官方範例

Processing 基本框架：

設定畫布大小的語法： size( 畫布寬度 , 畫布高度 );

設定畫布背景顏色的語法： processing中的基本顏色選擇有兩種方式：灰階和RGB三原色，數值分別都是0~255

background( 灰階數值 ); 或 background( R數值, G數值, B數值 );

---

• 畫圓： ellipse( x座標, y座標, 寬度, 高度);

寬度跟高度一樣的話就是圓形～

寬度跟高度不一樣的話就是橢圓形～

在setup區塊中的，只會執行一次，而在draw區塊中的，則會一直不斷地畫

---

• 填色： fill( R, G, B); or fill(灰階數值);

• 外框色： storke( R, G, B); or stroke(灰階數值);

• 無框色： noStorke(); 注意S是大寫的

• 無填色： noFill(); 注意F是大寫的

---

• 滑鼠互動： mouseX :滑鼠的x座標 , mouseY :滑鼠的y座標

透過活用mouseX跟，mouseY就可以繪製跟著滑鼠走的圖形 (注意！要開始把圖畫到draw()中了)

---

綜合練習. 畫豬頭

程式範例

P.S.

int pigeye_pos = 0; 宣告一個int變數來存位置數值

pigeye_pos = constrain(mouseX, 170, 230); 用了一個特別的語法constrain(val, min, max)，來限制一個數值的最大與最小值