Processing筆記03—基本圖形繪製

基本圖形的繪製，是進行製作動畫和交互的基礎，Processing提供了豐富的圖形繪製相關函數來滿足我們的繪圖需求。

1. 座標

任何圖形繪製都離不開座標系，在Processing中，原點爲窗口的左上角，座標值從左向右x軸增加，從上向下y軸增加。在每一個Processing程序中都有一個**size()**函數，用來設置運行窗口的寬度和高度。

我們使用**point()**來繪製最基本的像素點，它的參數就是x軸和y軸的座標。

2. 基本圖形

• 直線：line(x1, y1, x2, y2)
• 三角形：triangle(x1, y1, x2, y2, x3, y3)
• 四邊形：quad(x1, y1, x2, y2, x3, y3, x4, y4)
• 矩形：rect(x, y, width, height)
• 橢圓：ellipse(x, y, width, height)
• 扇形：arc(x, y, width, height, start, stop)

line(10, 10, 100, 20);
triangle(160, 40, 180, 10, 200, 30);
quad(40, 30, 90, 50, 90, 80, 20, 70);
rect(150, 60, 50, 40);
ellipse(50,120,40,30);
ellipse(130,120,40,40);
arc(40, 150, 50,60,0,3);

值得注意的是，**arc()**的最後兩個參數是設置角度，其單位使用弧度表示，其中180°、45°、90°、360°定義了特殊命名PI、QUARTER_PI、HALF_PI、TWO_PI。

3. 繪圖順序

由於程序的順序執行，如果兩個圖形的座標有重疊部分，後繪製的圖形會覆蓋前面繪製的圖形。

4.繪圖屬性

• 描邊粗細樣式：strokeWeight()，默認參數爲1像素

size(480, 120);

ellipse(35,60,60,60);
strokeWeight(5);
ellipse(105,60,60,60);
strokeWeight(8);
ellipse(175,60,60,60);
strokeWeight(20);
ellipse(260,60,60,60);

• 描邊端點樣式：strokeCap()，參數ROUND(圓形)、SQUARE(方形)、PROJECT(混合)

size(480, 120);

strokeWeight(20);
line(30,25,100,95);
strokeCap(SQUARE);
line(130,25,200,95);
strokeCap(PROJECT);
line(230,25,300,95);
strokeCap(ROUND);
line(330,25,400,95);

• 線段轉角樣式：strokeJoin()，參數ROUND(圓形)、BEVEL(斜切)、MITER(斜接)

size(480, 120);

strokeWeight(10);
rect(20,25,60,60);
strokeJoin(ROUND);
rect(100,25,60,60);
strokeJoin(BEVEL);
rect(180,25,60,60);
strokeJoin(MITER);
rect(260,25,60,60);

5. 顏色

所有圖形初始狀態都是白色填色、黑色描邊的，我們可以使用background()、fill()、**stroke()**函數來改變顏色。我們可以使用一個0-255的參數來表示灰度，但更多情況下，我們會使用三個0-255的RGB參數來創建色彩。

size(480, 120);

noStroke(); //隱藏描邊
background(0, 25, 50);
fill(255, 0, 0);
ellipse(120, 90, 200, 200);
fill(0, 255, 0);
ellipse(228, -8, 200, 200);
fill(0, 0, 255);
ellipse(256, 126, 200, 200);

在**fill()和strock()**函數中可設置第四個可選參數alpha，用來控制透明度，取值範圍0-255。

有了這些繪圖函數，基本就能滿足我們各種繪圖需求了，你也來試試吧。

---

關注公衆號「TonyCode」，回覆「1024」獲取1000G學習資料。
個人博客