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