2010年4月27日 星期二

For_Loop_RandomLines(PROCESSING) For迴圈線線






For_Loop 就是所謂的迴圈
是程式裡面常見的邏輯
簡單來說 就是一種遞增或遞減的程式
看看下面的程式


void setup(){
size(400,400);
background(255);
smooth();
}


void draw(){
strokeWeight(2);
strokeCap(ROUND);
line(20,20,20,380);
line(40,20,40,380);
line(60,20,60,380);
line(80,20,80,380);
line(100,20,100,380);
line(120,20,120,380);
line(140,20,140,380);
line(160,20,160,380);
line(180,20,180,380);
line(200,20,200,380);
line(220,20,220,380);
line(240,20,240,380);
line(260,20,260,380);
line(280,20,280,380);
line(300,20,300,380);
line(320,20,320,380);
line(340,20,340,380);
line(360,20,360,380);
line(380,20,380,380);
}


結果如下:












其實就是簡單的畫一排線
可是如果你要這樣一個一個打
可能你覺得複製貼上比較快


但是使用For迴圈
卻可輕易在兩三行程式內解決
觀察上面的程式
發現 畫線程式中
y座標位置則是維持一樣
但x座標位置則是每一行增加20


所以
line(x1, 20, x2, 380)
的 x1, x2是從 20做為開始
每次增加20的方式來畫線
因此會出現
line(20,20,20,380)
line(40,20,40,380)
line(60,20,60,380)
.........................
line(380,20,380,380)
的程式


再來我們先了解For_Loop的語法
就可輕易解決他


從上面的程式我們試著來解釋這個程式


For(我宣告一個變數 i,  i 要從多少開始; i 只要小於400; 當下面大括號程式執行完後幫我+差距){
   畫線();
}


甚麼意思呢?
就是我這個 i 他有可能會成為程式執行裡面的變數
i 幫我從 ? 數字開始執行
當開始執行完我要他做的程式
幫我加上差距值
如果加完差距值
i值仍在我要求的底限範圍內
那就幫我再執行一次我要做的事情
不斷不斷的加差距
直到超過底限 就不執行


如果你還是不清楚
沒關係 就照著語法打就好了
只要記得 將
for(int i = 20; i < 400; i += 20)
中的 20改成你要開始的數字
400改成你要到多少
20改成你每次的差距是多少
就可以了 


稍微補充幾點
1. int 就是 Integer整數的意思
    int i 就是宣告一個整數 i
   所以如果你後面的使用 i 
   他必須要是整數
   如果他計算出來是帶有小數的可能會無法執行
   此刻要變成
   float i 去宣告
   float是浮點數 簡單說就是帶有小數點的數值


2. i = i +20
   這個地方的等號 其實比較像是指定
   所以 i = i +20的意思是
   只要之後遇到 i  則帶入 i +20這個數字
   所以 i 如果等於20 
   i = i+20之後 i 就會變成40
  再遇到一次 i = i+20 i 就會變成40+20 = 60
  在程式中 為了偷懶
  有人會寫成 
   i+=20 其實等同於 i = i + 20
   i-=20  其食等同於 i = i - 20
  
所以上面的程式會變成這樣
void setup(){

size(400,400);
background(255);
smooth();
}


void draw(){
strokeWeight(2);
strokeCap(ROUND);
 for(int i=20; i < 400; i+=20){
        line(i,20,i,380);
  }
}

執行看看 應該會得到相同結果

那試試看這個












只是將程式中 i 的位置
移到y座標的位置上
void setup(){

size(400,400);
background(255);
smooth();
}

void draw(){
strokeWeight(2);
strokeCap(ROUND);
 for(int i=20; i < 400; i+=20){
   line(20,i,380,i);
 }
}

那這個呢












也很簡單
就試一次將畫線程式中的 i 放到x座標位置
  一次將畫線程式中的 i 放到y座標位置

程式如下
void setup(){

size(400,400);
background(255);
smooth();
}

void draw(){
strokeWeight(2);
strokeCap(ROUND);
 for(int i=20; i < 400; i+=20){
  line(20,i,380,i);
  line(i,20,i,380);
 }
}
至於這個就思考一下了
 











其實很簡單就是將strokeWeight()
放到For_Loop裡面
再將原本要放數字的地方改成 i
stokeWeight( i )即可

將上面的程式稍微修改一下
並加入亂數
亂數指令為
random(min, max);
亂數(最小值, 最大值);
比方說
random(0,400);
他就會從0~400任一之間取一亂數

所以一開始的圖形是怎麼畫出來的呢
其實就是亂數選取x座標或y座標
void setup(){

size(600,600);
background(255);
smooth();
//noLoop();
}

void draw(){
strokeWeight(2);
strokeCap(ROUND);
for(int i=0; i < 600; i+=1){
 stroke((i+1)*30,(i+20)/3,(i+20)/2);
  line(random(0,600),0,random(0,600),600)
  line(0,random(0,600),600,random(0,600));  }
}

你可以注意到
i 除了改變現調顏色的作用之外
並沒有改變現的位置
所以在此處
i 變成了次數的計算工具
從0每次加1 加到600
所以表示線條要畫 600次

我們分開觀察一下
亂數x座標












亂數y座標












全亂













當你將上面程式執行時
你會發現他會不停的換圖形
因為
在void draw裡面本身就是一個不斷執行的迴圈
所以其實之前所畫的圖形
他都是不停的在重畫當中
只因為我們先前所做的東西
並沒有特意的改變位置
所以你會覺得他仍在同一個位子上

因為RANDOM的關係
造成圖形每次結果不同
所以 此刻
我們在
void setup(){
size(600,600);

background(255);
smooth();
noLoop();
}
多加一行noLoop();
他就會停止
不過當你每次重新執行這個程式的時候
他都會有不同的結果
做動畫或互動的時候
這個noLoop就必須關掉
試試看吧

這次所談論的是一層迴圈
下次將討論 兩層迴圈~

沒有留言:

張貼留言