今天要介紹P5.js中，幾種常見的形狀工具函式，前面有說過，生成式藝術最常見的類型大部分為波普藝術，像是幾何交疊，線段表現等等，因此形狀的利用在這當中也相當重要，以下就讓我們一步一步開始吧。

幾何函式

• circle()

  這邊是指正圓形，正圓形是一個簡單的封閉形狀。函式總共有3個API可以利用

circle(30, 30, 20);
    //x軸,y軸,寬高

• ellipse()

  可以繪製橢圓形，寬度與高度可以不同。函式總共有5個API可以利用，前三個為x,y,寬，但在不填寫第四個參數的情況下，會默認高度跟隨寬度，而第五個參數是在繪製3D的時候才會用到，是為了指定構成橢圓周長的頂點數才設定的

ellipse(56, 46, 55, 55);
    //x軸,y軸,寬, 高

• line()

  可以繪製線段，主要是指兩點之間的路徑，因此可以使用 strokeWeight()改變寬度

line（x1，y1，x2，y2）
//x起點,y起點,x終點,y終點,

line（x1，y1，z1，x2，y2，z2）
//x起點,y起點,z起點,x終點,y終點,z終點

• rect()

  可以繪製矩形，因為也是封閉型狀，所以可以設定XY寬高就好，與橢圓形一樣，前三個為x,y,寬，不填寫第四個參數時，會默認高度跟隨寬度，第5-8個參數是用來設定左上角、右上角、右下角和左下角(順時針)的角半徑(弧度)，可以想成是css中的border radius

rect(x, y, w, [h], [tl], [tr], [br], [bl])
    //x軸,y軸,寬, 高 , 左上角, 右上角, 右下角, 左下角

• square()

  可以繪製四邊形，四個點的xy指定是從右上角順時針或逆時針(端看第二個點設定的位置)進行，有WEBGL模式(3D)可以設定

quad(x1, y1, x2, y2, x3, y3, x4, y4, [detailX], [detailY])

• triangle()

  可以繪製三角形，三角形是通過連接三個點創建的平面圖案，分別可以指定1至3的點的xy位置

triangle(x1, y1, x2, y2, x3, y3)

應用

應用實例

小結語

以上就是各式形狀的介紹與應用，謝謝大家今天的瀏覽喔~~