Control 2 : Repetition (processing教學)

從P61-68中,我們要學一個很重要的東西 for()
從標題的Control 2 : Repetition(重複)看就知道
這是一個帶有重覆性功能的指令

這就可以解釋為什麼CCC常在說for loop,for loop,for loop,...........
因為帶有重覆性 所以也可能是一無限循環
而loop的中文意思即是環或圈(帶有循環的意思)

它會常常被用到 所以這是絕對必學的一個指令
從P.63我們可以看到for的基本架構

for (init ; test ; update){
    statements;
}

init 是 固定值,可以是int或float
test 是 驗證固定值的公式
update 是 更新公式得出的結果
statments 是當for裡test得到的結果是true時,即執行下面的statements

至於它到底是怎麼跑整個流程呢
讓我翻譯六條P.63的流程告訴你

1.當有一init時 ex. int x = 3
2.用test來驗證這值代入公式時為true或false ex. x > 2即為true, x > 4即為false
3.如果test為true,則到步驟四,若為false則直接跳至步驟六
4.因為test為true,所以執行for裡面的statements ex. x += 1
5.當statements第一次(應該說原始狀態即x = 3)被執行後,之後就會把test用update給它一個新的值,然候再套回步驟二
6.當test得到的結果為false,則跳出for,繼續執行其他下面的程式指令

以下程式可以簡單把for基本講清楚

size(200,200);
background(255);

for(int x = 0; x < 5; x += 1){
  rectMode(CENTER);
  fill(255,0,0);
  rect(100+(x*10),100,10,10);}
//先設一個init,即int x = 0
//而test這驗證程式為x < 5
//如果test為true的話,那裡頭的statements,
//亦即以中心為基準畫一邊長為10,紅色有邊框的正方形
//如果test為true的話,那之後的update即會生效,也就是 x += 1
//因此整個程式會這樣跑,我會在x值後面加數字(照理應該沒有)這樣比較好知道跑到第幾個x了
//一開始x1 = 0那它是否小於5? 是!所以在(100+(x1*10),100)處給我畫一個正方形
//因為x1已經跑過一次了,所以要更新它為x2,也就是x2 = x1 + 1 = 1
//那它是否小於5? 是!所以在(100+(x2*10),100)處給我畫一個正方形
//以此類推到x6時,x6 = x5 + 1 = 4 + 1 =5
//那它是否小於5? 否! 所以就會跳出for,開始繼續下面畫一黃色方塊在左上角的程序

rectMode(CORNER);
noStroke();
fill(255,255,0);
rect(0,0,30,30);
//畫一黃色方塊在左上角

//saveFrame("p063-1-##.jpg");



因此我們可以看到因為在for裡面總共跑了5次循環,
同時我設定每一次循環方形的基準x點都會向右偏移10
所以可以看到總共有5個紅色正方形排排站
之後才再畫了一個黃色方塊再左上角

你可以嘗試把test的x < 5改為x > 5
就會發現因為init代入test時直接為false
所以就直接跳出for然後只畫了左上角的黃正方形

會了for loop,你就可以開始畫一些漸變的東西如以下

size(200,200);
background(255);
smooth();

for(int x = 0; x < 30; x += 1){
  rectMode(CENTER);
  strokeWeight(2);
  stroke(255,0+x*8.5,0,200);
  noFill();
  ellipse(100,100,10*x,10*x);
}

//saveFrame("p063-2-##.jpg");



當然就像if一樣,for也有for中有for的概念,下一篇會講
以後甚至有for中有if,if中有for等等
跟人工進化一樣讓人看得不知所措
反正還沒碰到就當沒發生麻 啾咪

Try it. :)