設計人生

大家好~ 我是Zak

進到第二堂課啦啦啦啦啦啦~
今天教的主要是熟悉Processing的基礎圖形的程式碼~~

P.S.因為是自主學習的教學文，會有很多不夠專業的地方，有錯誤歡迎網友指正。

那我們開始吧

***********************************************************************************************

在打程式碼前，必須要先了解一個很重要的觀念 
在不打任何程式碼前按下執行，它會自動執行一個100*100像素的視窗。
中間灰色方塊的左上的座標是(0, 0)，中央位置為(50, 50)，右下的座標為(99, 99)(圖片畫太快畫錯了，不過應該能理解吧(汗))，你可能會問為什麼? 但我們就是以0開始計數。

 
另外程式碼的規定很嚴格，該大寫就大寫，該小寫就小寫，該空白鍵就空白鍵，不然就算你打的文字都是對的他還是會躺著不執行喔~(程式碼就是那麼任性

***********************************************************************************************

那接下來就是開個大點的視窗啦~~我想100*100像素的視窗應該不能做太多事。
首先畫個500*500的視窗，程式碼為：

size(500, 500);
size(寬x個像素, 高y個像素);

按下Run鍵，就會看到視窗囉。
那確認沒問題，就把視窗關閉或按下Stop鍵。
然後在這裡很建議初學者在程式碼後面做紀錄，使用兩條斜線 // 後面的字就會變成灰色，主要用於註明。
P.S.如果你發現無法執行請檢查，逗點後面要有個空白鍵，且括弧後面要有分號喔！

******************************************************************************************************************

接下來我們在畫布中間點一個點，程式碼為：

point(250, 250);
point(x, y);

按下Run鍵，感覺好像沒有東西，不過仔細看中間是真的有個點喔。

*********************************************************************************************************************

接下試試以下的東西，程式碼分別為：

線段
line(250, 250, 499, 499);
line(250, 250, 600, 0);
line(x1, y1, x2, y2);
我增加了兩條線段，大家應該還記的我們的視窗大小是500*500，在第二條線段我用了600這樣線段就畫到視窗外了，這表示我們可以填入超出視窗的值(負值也可以)，以下圖形也可以自行試試看。

三角形
triangle(250, 250, 250, 499, 150, 450);
triangle(x1, y1, x2, y2, x3, y3);
三角形由三個點座標形成。

四角形
quad(250, 250, 125, 125, 250, 50, 345, 13);
quad(x1, y1, x2, y2, x3, y3, x4, y4);
四角形同三角形，只是四角形的四個點必須按照順序，可以試著將第三個點與第四個點交換，得到的將不是四角形。

長方形
rect(350, 225, 100, 100);
rect(350, 225, 50, 50);
rect(x, y, width, height);
(x, y)是指長方形的左上角的點，後面分別填上寬(x軸)跟高(y軸)
這裡畫了兩個長方形(方形也用這個畫)，我故意用同一個點做起始點，可以發現邊常50*50的長方形疊在100*100的長方形上，表示我寫在下面的圖形會覆蓋到之前寫的圖形，這點在之後寫程式時自己注意即可。

圓形
ellipse(50, 250, 50, 50);
ellipse(100, 250, 20, 50);
ellipse(x, y, width, height);
(x, y)是指圓的中心點，後面分別填上半徑寬(x軸)跟高(y軸)。

缺角圓
arc(50, 310, 40, 40, 0, radians(270));
arc(100, 310, 40, 40, radians(50), radians(270));
arc(x, y, width, height, radians(開始角度), radians(結束角度));
(x, y)是指圓的中心點，後面分別填上半徑寬(x軸)跟高(y軸)，另外再加上起始角度，開始的角度如果是0，就填0即可，不必再打radians了。
而圓的0度是指y軸水平線，然後順時鐘旋轉。

******************************************************************************************
好了，講到這裡基本圖形就完成了
接下來講點其他的東西吧~~

目前的這個2.2.1的版本似乎是支援平滑化的所以smooth基本上沒什麼功用，不過你可以關閉平滑化功能。

smooth();   //平滑化
noSmooth();   //不要平滑化(S是大寫喔！！)

在圖片中可以很清楚看到noSmooth下的圖形邊緣都會出現鋸齒狀。

*******************************************************************************************

說到這裡大家還記的之前的point嗎? 
想要增加它的大小，我們可以使用調整筆畫粗細的程式碼。

strokeWeight(20);   //粗細為20個像素(W是大寫喔！！)
strokeWeight(3);
strokeWeight(像素大小);  

如果你不想要外框線，你可以填入

noStroke();  //(S是大寫喔！！)

***********************************************************************************************

學會調整筆畫粗細，你就可以決定筆畫屬性了。

只適用圖形
strokeJoin(ROUND);  //圖形為圓角
strokeJoin(BEVEL);  //圖形為斜角
只適用線段
strokeCap(SQUARE);  //兩端為方形
strokeCap(ROUND);  //兩端為圓形

 

************************************************************************************************

最後的最後就來到上色嚕~~

先開啟Processing 上方Tools裡的Color Selector，它可以幫助你搜尋RGB色彩。
然後除了RGB，也不能忘了灰階。

可以填色的部分分別為

background();   //背景
fill();  //圖形內部
stroke();   //圖形外框及線條
如果你想要灰階的顏色在括弧裡填上0－255之間的值，其中0是黑色，255是白色。

background(0);   

如果你填入RGB三個數字的值，即會顯示你要的色彩。

fill(R, G, B); 

如果你不想要填入任何顏色

noFill();   //圖形內部無色
noStroke();  //沒有外框線

如果你要控制顏色的透明度，在RGB數值後面加上透明度數值即可，範圍是0－255，0是透明，255是不透明。

fill(80, 192, 232, 125);
fill(R, G, B, 透明度);

今天的教學到這邊~~，下一次會進到自定義圖形。

那我們下次見囉！