week3
Welcome to the Interaction-Design-Foundation wiki!
-
我們先來開始熟練一下if的使用，畫一顆球，讓它會依造我們設定的方向去移動，當超過邊界的時候，就做某件事：
if( x>width ) { x = 0; }跟if( y>height ) { y = 0; }
這兩個條件，就是用來判定x座標是否超過右邊界，y座標是否超過下邊界，則分別把x與y座標重新設為0。
- 接著把上面這隻程式再進化一點，讓球可以自由的彈跳：
- 在實際寫作if條件的時候，常會有一種狀況：要同時滿足兩個以上的條件，才會去做某件事。
ex. 如果這個 男生很帥 而且 身高又超過180，我就可以答應他跟我要FB帳號。
我們可以把這樣的情形翻譯成：
if( _條件1_ && _條件2_) { 去做某件事; }
我們使用了
&&來當做而且的符號。
- 當然了，我們也會遇到，兩個條件擇一就滿足的狀況。
ex. 如果 太陽從西邊出來 或是 世界末日了，我才會考慮跟他交往。
我們可以把這樣的情形翻譯成：
if( _條件1_ || _條件2_) { 去做某件事; }
我們使用了
||來當做或者的符號。
- 之前我們有講過if的基本運用，用於批次處理的狀況，例如連續畫10個圓。而對於2D平面繪圖，For還有一個殺手級的運用，就是處理整個畫面的繪圖。
--- 例如我們可以設計每隔20畫一個直徑為10的圓：
範例程式：Nest_For.pde
在這個程式中，我們可以看到
用了兩個for迴圈，分別針對x軸跟y軸做批次處理，每增加一次x軸的位移，就依序把y軸增加好幾個圓，結束就再往右移動一排繼續畫。
這樣的技巧就可以用在掃描螢幕然後畫規律的圖，更可以利用這樣來製作出整個畫面的互動效果。
--- 例如我們就可以來製作一個一樣畫面佈滿了點，而這些點會隨著滑鼠的移動，而改變他們的大小:
這裡我們用了兩個processing內建的函式(function)，來幫助我們做點運算：
- 兩點距離：
dist(x1, y1, x2, y2)，算出兩點的距離
所以我們可以寫為dist(x, y, mouseX, mouseY)，把點(x,y)跟滑鼠位置(mouseX,mouseY)距離算出來。
- 數值侷限：
constrain(數值, 最小值, 最大值)，把數值局限於設定的最小值與最大值之間，確保數值不會超出去。
所以我們在這個程式裡寫為～constrain(兩點距離/5, ball_minsize, ball_maxsize)， 注意這裡的"兩點距離/5"，是為了讓距離作為操作更有效果，透過除以一個數值，讓它更能若在設定的最大值～最小值之間，這樣效果看起來會更好看。
其實我們在上面已經偷偷用到函式(Funciton)這個東西了，基本上可以把它看成一個有特定功能黑盒子，當你丟什麼東西進去，他會產生特定的東西出來，然而這個黑盒子我們可以不知道他內部是怎麼運作的。
例如我們上面用到的 dist()，若我們去看官方的reference: dist() ，可以看到語法(Syntax)是dist(x1, y1, x2, y2)，傳入的參數型態(Parameters)是浮點數(float)，回傳(Returns)的數值是float。
也就可以白話的翻成，要求兩點距離，要給四個浮點數數值，也就是分別兩個點的x,y座標，這函數處理完後，會產生一個浮點數的距離數值給你。
函式的基本型為：
回傳值型態 函式名稱(參數型態1 參數名1, 參數型態2 參數名2, 參數型態3 參數名3, ....) {
做什麼事;
回傳;
}
例如：
int abc(int a1, int a2) { return a1+b2; }
- 我們來試著自己實作個黑盒子，來做點小功能：
範例程式：function.pde
- Function1 : 做一個兩個數字相加，回傳相加後的數值的功能
int a_plus_b(int a, int b) { return a+b; }
- Function2 : 做一個兩個數字相乘，回傳相加乘的數值的功能
int a_mul_b(int a, int b) { return a*b; }
- Fucntion3 : 根據傳入的數字決定回傳的文字
String QA(int sel) { if(sel==1) { return "I am happy"; }else if(sel==2) { return "I love cake"; } return "nothing"; }
注意，上面只是完成黑盒子而已，還沒有使用，所以當我們要使用時，我們要把要傳入的數值放入，以及黑盒子產生的結果要拿來做什麼，以這個範例，我們只是單純印出來~println()。
ex1: 實作 2345 + 9998，然後印出來
int c = a_plus_b(2345, 9998); println(c);
ex2: 實作 22 x 101，然後印出來
int d = a_mul_b(22, 101); println(d);
ex3: 實作輸入1跟2，會回答不同問題
println( QA(1) ); println( QA(2) );
- 同樣的，函式也可以用來幫助我們畫圖更方便，我們可以設計好一個畫圖的函式，改變傳入的參數，就可以做很多變化，但程式碼卻很精簡。
例如：實作一個同心圓的函式，可以設定改變座標、尺寸大小，以及圓的數量
範例程式：function_02.pde
透過draw_Target(x座標, y座標, 大小, 數量);，可以自由在畫面上畫同心圓。