繪圖基本參數 - 形狀，座標，大小，顏色

今天來總整理一下常用的繪圖指令
在p5.js中，為了簡化程式的編寫，將繪圖功能，變成一個一個的指令

指令的語法，例如：畫方形功能指令語法如下
rect(x, y, w, h);
rect() 是指令函式
x, y, w, h 是指令的輸入參數
指令函式的結尾需要加上 分號 ; 才算是完成指令的執行。

方形
rect(x, y, w, h);
x, y 是指方形左上角的位置

圓形
ellipse(x, y, w, h);
x, y 是指圓心的位置

線段
line(x1, y1, x2, y2);

線段端點形式
strokeCap(ROUND);
strokeCap(SQUARE);
strokeCap(PROJECT);

線段連接形式
strokeJoin(MITER);
strokeJoin(BEVEL);
strokeJoin(ROUND);

弧形
arc(x, y, w, h, sd1, sd2);
sd1: 啟始角度
sd2: 結束角度

在p5.js的規則，角度0度在 正X軸的方向，順時針旋轉為正的角度。
原點座標在畫布的左上角位置
向右為正X軸方向
向下為正Y軸方向
這個是在電腦程式圖像的座標規則
與一般數學的座標規則是不相同的

角度的單位，是採用弳度的單位
角度：0 -> 90 -> 180 -> 270 -> 360
弳度：0 -> HALF_PI -> PI -> (3/4)*TWO_PI -> TWO_PI

填入顏色
fill(r, g, b, a);
fill(gray, alpha);

無填入
noFill();

邊線顏色
stroke(r, g, b, a);
stroke(gray, alpha);

無邊線
noStroke();

邊線寬度
strokeWeight(w);

背景顏色
background(r, g, b, a);
background(gray, alpha);

透明背景
background(0, 0);

點
point(x, y, [z])；

建立畫布圖像
createCanvas(w, h)

建立圖層圖像
createGraphics(w, h);

平移
translate(x, y, z);

旋轉
rotate(sd);
rotateX(sd);
rotateY(sd);
rotateZ(sd);

縮放
scale(rx, ry);

新的繪圖設定，常見於新的座標設定
push(); // 開始

pop(); //結束

端點圖形 (外層順時針)
beginShape();
vertex(x1, y1);
vertex(x2, y2);
vertex(x3, y3);
endShape();

端點圖形 (內層逆時針)
beginShape();
vertex(mx1, my1);
vertex(mx2, my2);
vertex(mx3, my3);
vertex(mx4, my4);

beginContour();
vertex(nx1, ny1);
vertex(nx2, ny2);
vertex(nx3, ny3);
vertex(nx4, ny4);
endContour();

endShape(CLOSE);

文字
text("abc", x, y);

文字大小
textSize(sz);

文字對齊設定
textAlign(CENTER, TOP);

文字字形設定
textFont('Georgia');

p5.js Reference
https://p5js.org/reference/