Processing 筆記 （三）- 直線、弧線、封閉區間

1. line(x1, y1, x2, y2) 可用來畫 2D 中的直線。line (x1, y1, z1, x2, y2, z2) 可用來畫 3D 中的線，但須在此物件被移動過後，才可看得出其與 2D 直線之不同。
2. stroke( ) 可用來設定直線的顏色，用法跟 fill( ) 類似，strokeWeight( ) 則用來設定線的厚度。例如：

void draw( ){
    stroke(0xFFCCFF00); // 設定線條顏色為黃
    strokeWeight(5); // 將線條厚度設定為 5 個像素
    line (0, 100, 600, 400);
    line(600, 400, 300, 0);
    line(300, 0, 0, 100);
}
   
3. curve( ) 用來畫曲線，2D 中使用 curve (x1, y1, x2, y2, x3, y3, x3, y4)，3D 中使用 curve (x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)。其中，x1, y1, z1 為第一個曲線的軸心點 (anchor poitn)，曲線朝向其彎曲的第一個點；x3, y3, z3 為曲線的起點；x4, y4, z4 為第二個曲線的軸心點；亦即曲線朝向其彎曲的第二個點。

範例：以滑鼠位置影響曲線的方向

void setup() {
   size(400, 400);
}

void draw(){
   background(255); // 白色背景
   fill(0); // 黑色內部
   int xVal = mouseX*3-100; // 滑鼠位置決定 anchor point
   int yVal = mouseY*3-100;
   curve(xVal, yVal, 100, 100, 100, 300, xVal, yVal);
   curve(xVal, yVal, 100, 300, 300, 300, xVal, yVal);
   curve(xVal, yVal, 300, 300, 300, 100, xVal, yVal);
   curve(xVal, yVal, 300, 100, 100, 100, xVal, yVal);
}

4. vertex 為兩調線的交會處，例如三角形的頂點、星形的角等。在 processing 中可使用三個或更多個頂點連結成一個封閉區間，其內部可以填色或不填色。所用的物件 (method) 為 beginShape( ) 與 endShape( )，兩者之間以 vertex( ) 鍵入頂點座標，所設的頂點會自動相連。


範例：以滑鼠決定三角形的第三個角的位置

void setup( ) {
    size(400, 400);
}

void draw( ){
    background(255); //黑色背景
    fill(0); // 白色封閉區間
    beginShape();
    vertex(0,0);
    vertex(400, 400);
    vertex(mouseX, mouseY);
    endShape();
}