2011/06/30

Vertices (processing教學)

在非常緊湊的工作營之後,是時候重拾processing自習的時候了.
題外話,本來對grasshopper有看沒有懂,在這次工作營應該是有稍許進步了,
不過完全不知道要拿來幹麻,感覺一坨拉股的東西都同時在學,
但在事務所我還是在用skp畫爽爽................
CCC說在接下來這一年要確立自己出去定位要在哪裡,
我到現在還是很茫然,所以才會什麼都想學,不求精但至少要會基本,
出去至少不會丟淡江臉,但學那麼多到底要幹麻啊!!!
我覺得林昭翰才是真的大智大慧. :-x



anyway,讓我們再開始一起學processing吧!
今天要說的是課本p69-78的Vertices(vertex的複數)
基本上它的觀念跟coreldraw的多線工具一樣
就是以一堆點 的先後順序接起來 你可以選擇要不要把線聚合成色塊
或是單純就讓它是一條很多節點的線
它基本的架構如下

beginShape()      開始連線
vertex(x,y)                諸多的節點(vertax 1, vertax 2, vertax 3, vertax 4 ........)
endShape()         結束連線

 


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


beginShape();
vertex(20,20);  //點01
vertex(100,20);  //點02
vertex(100,100);  //點03
vertex(20,100);  //點04
endShape();


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


//可以看到當我給四個點的時候,它會依先後順序把它接成一條線



size(200,200);
background(255);
strokeWeight(2);
fill(255,0,0);
smooth();


beginShape();
vertex(20,20);  //點01
vertex(100,20);  //點02
vertex(100,100);  //點03
vertex(20,100);  //點04
endShape(CLOSE);


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


//而如果我在endShape內填入CLOSE,則它會自動把起點跟終點連起來變成一色塊




而endShape內可以填東西的話,beginShape內一定也可以
而beginShape內可以填的東西有POINTS,LINES,TRIANGLES,QUADS等等
詳情請參照課本p73 簡單範例如下,只要更換上面程式裡beginShape內的指令即可


beginShape(POINTS);







beginShape(LINES);



beginShape(TRIANGLES);



beginShape(QUADS);



至於p75-78則是在講曲線跟貝茲曲線,
我個人覺得現階段是用不太到,所以請自己看囉,
也不難,只是設定控制點有些麻煩,可參照p76


透過之前學過的無ㄟ伯ㄟ,我們可以畫出以下的圖,
自己試完之後反白即有解答.




size(200,200);
background(255);
stroke(255);
strokeWeight(0.1);
smooth();
for(int i = 1; i <= 100; i += 1){
  beginShape(QUAD_STRIP);
  fill(random(255),random(255),random(255),20);
  vertex(i/2000 + random(200),i/2000 + random(200));
  vertex(i/2000 + random(200),i/2000 + random(200));
  vertex(i/2000 + random(200),i/2000 + random(200));
  vertex(i/2000 + random(200),i/2000 + random(200));
  endShape();
}
//saveFrame("p072-2-##.jpg");




Try it. :)

2011/06/20

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. :)








2011/06/19

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)被執行後,之後就會把testupdate給它一個新的值,然候再套回步驟二
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個紅色正方形排排站
之後才再畫了一個黃色方塊再左上角

你可以嘗試把testx < 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. :)

Control 1 : Decisions (processing教學)

Hi 大家好 吃完中飯打個嗝又是一條好漢
讓我們繼續P51-60的介紹

我們會學到

> 大於
>= 大於等於
< 小於
<= 小於等於

if() 如果
else if() 或是
else() 其他的

前四個太簡單 我不需要贅述
另外還有  != 兩邊不想等,  == 兩邊相等
不過應該用不太到 有興趣的同學 可以在Processing裡輸入
println( 3 != 4 ); 下面黑色對話框應該會出現true,也就是合理的意思
你可以打任何上述符號(>,<,>=,.....)進println(),合理的就會是true,反之是false
如果你輸入println( 3+2 = 5 ); Processing是不會屌你的
你一定要輸入println( 3+2 == 5 );才會顯示true

而if這東西就值得讓人玩味了
if() 如果
else if() 或是
else() 其他的

如果用它們來造句的話就是
if  Zooey Deschanel 能跟我同班就太棒了,
else if 新垣結衣跟我同班也很棒,
else 許純美,李敖之類的拜託別跟我同班
這樣你們大概懂意思吧?
讓我們以下面程式碼來更進一步解釋




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


int x = 420; // 首先我們直截了當的說x = 420

if(x > 100){
  if(x < 300){
    noStroke();
    fill(255,0,0);
    ellipse(100,100,40,40);
  }
  else{
    strokeWeight(5);
    line(0,0,200,200);
  }
}

//再來我們可以看到if裡面還有if這是為什麼呢
//因為processing裡你不能直接寫if(100 < x < 300) 它不會理你
//所以你才要在if(x>100)裡面再寫if(<300)
//因此上面這幾行的解釋就是如果100<x<300,則請幫我畫一個沒有外框線半徑為40的紅色圓
//要是x不介於100到300之間,那則畫一條線粗為5,由左上到右下的對角線

else{
  rectMode(CENTER);
  fill(0,255,0);
  rect(100,100,30,30);
}

//這幾行則是說,如果上面的if通通不成立
//那就幫我畫一個以中心為基準點邊長為30的綠色正方形吧

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



可是我們可以看到,畫面上只畫了一條對角線,
因為在第一段的if中,儘管100<x<300沒有成立,因為x=420
但我已經在之後加了else就畫一條對角線吧
所以這個if已經成立了,因此最後再加畫正方形的else就不會出現

同理可證以下程式碼




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


int x = 100; //這次設兩個數值
int y = 200; //x = 100, y = 200


if(x > 500){
  fill(255,0,0);
  ellipse(100,100,40,40);
}

//如果x>500,請幫我畫一個半徑40的紅圓,但在這不成立,所以不會畫出

else if(y > 300){
  stroke(0,0,255);
  strokeWeight(5);
  line(0,0,200,200);
}

//如果上述不成立,那y>300的話,畫一條對角線也可以,但在這也不成立,所以不會畫出

else{
  noStroke();
  rectMode(CENTER);
  fill(0,255,0);
  rect(100,100,30,30);
}

//剛好上述兩個if都不成立,因此除了if 之外的所有可能都直接幫我畫一個正方形
//邊長為30,中心在圖中心,顏色為綠色同時不要有外框線

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



到這我們進度到P.60了,但是我沒有講P57-59的內容,
它基本上是在講true,false的東西,不過應該用不太到,
所以有興趣的可以自己翻一下即可,不難

Try it. :)

2011/06/18

Data 1 : Variables (processing教學)

今天要教得是簡單到不行的數學符號
連我這個高中數學只要考61分就沾沾自喜的人都覺得簡單
相信大家都很快就融會貫通了
而且一下子就會P37-60囉 是不是很划算?



基本上processing的數值分為兩種
int  /  沒小數點的整數
float  /  有小數點
因此我們可以在程式裡面寫int = 3但不可以寫int = 3.0
但是 你可以寫float = 3.0 也可以寫 float = 3 因為他會默認為3.0
這跟我叫你爸你打我媽一樣沒道理 但就是這樣

同時因為processing在畫圖時它是有個框架的
意即畫面的長(width)與寬(height)
因此當有時你要把畫面畫滿時可以直接寫它們來取代
當你改背景大小時也會一起改省一些力氣
讓我們畫一個陸老師最喜歡的法國國旗來說明



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


fill(0,0,255);
rect(0,0,width/3,height);
//先從原點(0,0)為基準點畫一藍方塊,寬為畫面的1/3,長等於畫面長


fill(255,0,0);
rect(width/3*2,0,width/3,height);
//因為我知道背景為白,因此中間那白方塊我不用畫
//但第三塊紅方塊要怎麼畫呢,方法千百種,你可以直接給座標或用中心點之類的
//在這因為我知道整個國旗是三等分的,所以我知道我只要先把寬除3再乘2
//把它設為我的起始x點,y點為0就可以了


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






再來會介紹幾個符號 但絕對不會跟陸老師的符號學一樣博大精深
所以不要怕 帶著大學生的程度來學小學生的東西
+  (加) 
-  (減)
*  (乘) 
/  (除) 
%  (整除,這符號比較特別,當10/3=3.33333時,10%3=3....1,也就是會得3餘1的意思)
++  (遞增, x++的意思就是x+1+1+1+1+1.........)
--  (遞減, y++的意思就是y-1-1-1-1-1.........)
+=  (x += 7,意即x+7+7+7+7+7,所以通常我不會用到++或--我都直接用+= 1或-= 1)
-=  (x -= 7,意即x-7-7-7-7-7,所以通常我不會用到++或--我都直接用+= 1或-= 1)
*=  (道理同上 x *= 3,意即 x*3*3*3*3*3*3...........)
/=  (道理同上 y /= 5,意即 y/5/5/5/5/5/5..........)






你看到這一定會覺得我是不是低能兒在講這種連常識都稱不上的東西
但沒辦法 當我們開始宗旨是從零開始 我們除了學站著尿尿外也要學蹲著尿尿
儘管它跟拖褲子放屁沒兩樣 所以還是要講下去


上述的符號是比較常用的
而以下則是課本上的 但CCC沒教想必冷門至極


ceil()
floor()
有學過Ecotect的同學一定記得我們在設材質時有所謂的天花ceiling和地板floor
int x = ceil(2.1) = 3 ,  int x = floor(2.9) = 2
很簡單就知道ceil就是無論小數為多少直接進位,而floor則反之


round()
round則是我們最熟知的四捨五入
int x = round(2.4) = 2 , int x = round(2.5) = 3


min()
max()
看字面就知道是找最大值跟最小值
int k = min(3,-2,9) = -2
int k = max(3,-2,9) = 9






part1結束,晚些再講P51-60的Control 1 : Decisions
因為連我打下來都感到有點心虛,掰噗


Try it! :)

Shape (processing教學)



再來這篇會介紹
smooth();
triangle(x1,y1,x2,y2,x3,y3);
rect(x,y,height,width);
ellipse(x,y,width,height);
fill();
noFill();

基本上processing除了點跟線外,
二維圖形最常用的就是方形rect()跟圓形ellipse(),有時候也會有三角形triangle()
當然還有四點成形quad()跟貝茲曲線beizer()等型態可以做,
相關詳情可以參考課本的P.28

而方形跟圓形都分別有rectMode()跟ellipseMode()可以決定基準點,
可能是從左上角,右下角或中心為基準點,詳情請參考課本的P.35

至於stroke的收頭方式又分為
單線的strokeCap();
外框線的stokeJoin();
它們各有三種收頭方式,但因為不常用,
所以請自行參考課本P.34

其他指令由下面程式碼來解釋



size(200,200);
background(0);
smooth();
//smooth()基本上就是讓圖不要那麼鋸齒狀,可比看出跟上一篇的圖比其來,這篇的圖比較滑順
//所以通常我們一開始的背景設定都會先把這行打好

stroke(255,0,0);
ellipse(50,100,30,30);
//首先我們在(50,100)這點畫上一半徑為30的圓形,當然你也可以兩向半徑給不一樣的數值就是橢圓
//圓形的外框線為紅線,如果沒有告訴processing要fill()或noFill(),它會自動填上預設顏色
//同時沒有給strokeWeight()時就會默認為1,因此看得不是很清楚

noFill(); //三角形不要填色
strokeWeight(3); //線粗為3
stroke(0,0,255); //線為藍色
triangle(100,10,10,190,190,190); //找三點畫出一三角形


noStroke(); //方形不要有外框線
fill(255,255,0,150); //把方形填黃色(255,255,0),而第四個逗號即透明度,255為不透明,0為完全透明
rect(140,90,30,30); //在(140,90)這個點往右各畫長度30的邊,亦即是正方形

saveFrame("p029-##.jpg");






結果我們可以清楚看出processing內的先後關係,
因為先畫圓再畫三角形,最後畫方形,
所以我們可以看到因為三角形比圓後畫,
因此它的線是蓋在圓上面的,同時因為沒填色,可以完全看到黑色背景.
而方形又蓋在三角的上面,但因為有透明度,所以看得到其後的框線.
基本上這樣課本P.17-36應該都沒什麼問題了


Try it. :)

Basic (processing教學)


第一篇我們就直接從最基本的開始說,
當然你可能長長看到我說就是這樣,
因為這也是CCC對我說的,人家就是這樣規定這樣寫.

這裡先講到
size();
background();
stroke();
strokeWeight();
point();


每道processing的指令後都會需要一個括號,
它是用來輸入數值的,如果沒填,它就會有一個默認的值被自動填入,
每個指令為何後面都有一個分號,還有指令大小寫有影響,要注意別打錯.
而processing每行指令有先後關係,越上面的越先執行,
當然在for()裡面再加for()之類會有例外,但基本上就是越上行的越優先執行.
當任一行文字前有//時,processing都會視別那行//之後的字為無效,
所以你就可以用來打註解,但//並不影響下一行的執行,
但在processing裡似乎無法識別中文.所以下程式碼我打得中文你還是得殺掉.


size(200,200);
//這決定你的畫面大小,如果你什麼都不填默認值就是100 x 100


background(0);
//這決定你的背景顏色,可以是黑白灰,0是黑,255是白,中間的數就是深淺灰
//亦可以是彩色的,那你就要填RGB三數值寫法就會是background(0,0,255);  藍色的底

stroke(255,0,0); //stroke指得是這一筆的顏色,可能是一點或是一劃
strokeWeight(10); //strokeWeight指得是這一筆或一劃的粗度,默認值為1
point(50,100); //point就是點,processing裡的(0,0)點都在左上角

strokeWeight(20);
stroke(255);
point(100,100);

strokeWeight(30);
stroke(0,0,255);
point(150,100);

saveFrame("p025-##.jpg");
//saveFrame()是當你想把圖片存起來時的指令
//saveFrame("???-###.jpg");
//基本上???就是你的檔名,###是你的編號共有幾位數,靠你要輸出很多張做 GIF時決定
//至於能輸出什麼類型確定的是tif跟jpg,其他你可以自己嘗試



所以結果你可以看到我要三點分別在(50,100),(100,100),(150,100)上
同時三點分別為紅白藍,點的大小分別為10,20,30

Try it. :)


Start (processing教學)


暑假可以說是開始了 雖然還不知道計劃如何
但我希望可以在這暑假把Processing這本書好好看完
透過自己的理解做一些簡單的介紹
因為自己也是新手 所以你有興趣的話可以跟我一起重新從零開始
不過我絕對不會講得比CCC好,所以真的想精進的請報考淡江建築研究所.
主要是先看p.17-501 所以一天看個十頁好像才看得完噢 加油 :)