2010年4月27日 星期二

For_Loop_dotsDots(PROCESSING) For迴圈點點

有了上次for_Loop迴圈線的概念之後
我們來試試看兩層迴圈
其實兩層迴圈的概念就類似在畫格子一般
所以也不用害怕
照上次的邏輯
這個迴圈應該很容易












程式如下:
void setup(){
 size(600,600);
 background(255,255,255);
 smooth();
}

void draw(){
 for (int i=20 ; i<600; i=i+20){
  strokeWeight(4);
  point(i,20);
 }
}

point(x,y)就是畫點的意思
這邊用畫點來說明比較清楚容易懂
那麼一樣可以畫出另一個向度












這邊就不提供程式了
最後你頂多把這兩個程式合起來
會畫出下列圖形












可是我們要的是星羅棋布的格點
所以這時候就必須要用兩層迴圈了
 for (int i=20 ; i<600; i=i+20){ 

 for(int j =20; j<600; j=j+20){
  strokeWeight(4);
  point(i,j);
 }
}

程式是一行一行讀的
所以我們解釋一下上面這個程式
電腦會如何運算

電腦讀到第一行(第一個迴圈)時 他會知道
這時候 i = 20
進到第二行(第二個迴圈)時 他知道
這時候 j =20
所以他畫點 point( i, j )時
會代入( 20, 20 )

這時候記住
你還在第二個迴圈當中
所以你回到第二行
因為 j 沒有超過600 所以 j = j +20
j = 40再畫點 point ( 20,40 )

注意到 因為你沒有跳出第二個迴圈
所以你的 i 還是保持20

所以點就從(20, 20), (20,40), (20,60), (20,80)......到(20,580)
這個時候 j 再進入下一次回圈之前已經>=600
所以他跳出
回到第一行
跑完第一輪的第一迴圈
所以 i 要加20 變成40
在進到第二行
j 又從20開始加 加到580
(40,20), (40,40), (40,60),.....(40,580)
在跳出
i 加20 變成60再跑一次
就這樣一直跑下去
直到
point( 580, 580)
才結束

結果如下












程式如下:
void setup(){
size(600,600);
background(255,255,255);
smooth();
}

void draw(){
 for (int i=20 ; i<600; i=i+20){
  for(int j =20; j<600; j=j+20){
     strokeWeight(4);
      point(i,j);
  }
 }
}

你可以把他想像成打洞機
從左上角開始打打完最上面那行
再打下一行
一直打到右下角

所以最一開始的圖形
現在看起來應該簡單許多
只是將點換成圓
然後從中心點畫十字
並且利用筆的顏色stroke();
做一個漸層的變化
這邊漸層變化
是利用不斷變動的i,j值
放入筆色stroke();指令中
因為i j 直隨著位置不同而變化
因此顏色也會跟著變

程式如下
void setup() 

{
size(700,700);
background(255);
smooth();
}

void draw()
{
 for(float i =20; i < height; i = i+20){ 
  for(float j=20; j < width; j= j+20){
    stroke(i/2,j/2,((mouseX+mouseY)+j+i)/10);
    strokeWeight(4);
    ellipse(i,j,20,20);
    point(i,j);
    strokeWeight(2);
    line(i,j-10,i,j+10);
    line(i-10,j,i+10,j);
    //rectMode(CENTER);
    //rect(i,j,5,5);
   }
  }
}


也可以試試看把圓換成方
顏色加減數字也可以改
甚至圓半徑大小也可以隨 i j 變化
另外筆色也可依照滑鼠位置改變
自己玩玩看吧

















沒有留言:

張貼留言