For loop (processing教學)

早上莫名的被陌生電話叫起床 打過去也不接 幹 5:30ㄟ 幹
被吵醒後儘管再努力都睡不回去 就在工作營開始前把for loop的剩下講完吧
今天講得就是P.66的for中有for,用講得也許有點抽象,所以我們直接以下圖來解釋

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

for(int y = 0; y < 200; y += 40){
  for(int x = 0; x < 200; x += 40){
    fill((x+y)*0.796875);
    rect(x,y,40,40);
  }
}
//for中有for的話會以裡面的for優先執行,亦即x的遞增40先執行
//同時隨著畫色塊的同時我希望有灰階的漸變
//所以你可以看到我有寫fill((x+y)*0.796875);
//這0.796875怎麼來的呢? 因為我知道最後一次的(x,y)為(160,160)同時它要是完全白色的
//因此255全白 / (x + y)= 255 / (160 + 160) = 0.796875

//saveFrame("p067-##.jpg");



如果你還不懂for中有for怎麼跑的,讓我們透過這低能diagram來解析

for(int y = 0; y < 200; y += 40){
  for(int x = 0; x < 200; x += 40){}
}

誠如前面所說,裡面的for會先跑,所以我們會有x0,x1,x2,x3,x4, 然後它會對應y0
當這五個都跑完後,才會開始第二輪的x0,x1,x2,x3,x4, 然後再來是為應y1,以此類推

當然for中也可以加if,但當你越來越複雜時這樣一層包一層也不是辦法,
以後會有比較聰明的寫法.

以下我們以畫一陽春美國國旗為練習,除了for以外還有if,
但我在畫得過程遇上一些未知的原因,無法很聰明的靠一個for loop寫完
因此程式寫得有點多,如果你可以更短的寫出來,請分享一下,
先嘗試看看,不行再反白copy程式碼

size(300,200);
background(255,0,0);
noStroke();
smooth();

for(int y = 0; y < 200; y += 10){
  for(int x = 0; x < 300; x += 10){
    if((y % 20) == 0){
    fill(255);
    rect(0,y*2,width,20);
    }
  }
}

fill(0,0,100);
rect(0,0,130,100);

for(int y = 0; y < 200; y += 10){
  for(int x = 0; x < 300; x += 10){
    if(x <= 120){
      if(y <= 90){
      if((x+y) % 20 == 0){
      fill(255);
      ellipse(x,y,5,5);
    }
    }
    }
  }
}

//saveFrame("p068-##.jpg");

Try it. :)