Processing 基礎 ( 五 ) 座標和素材

      Processing 雖然簡單視覺化，但是基本觀念還是要有。用統一的形容詞畫出來才會一樣，比方說我畫一條線，要求全班同學要跟我畫的一模一樣，最簡單方法是用方格紙告訴同學從1,2劃到5,6。

    這在面對面時很好溝通，要求不在場的同學也劃出一樣的就要規定統一的形容詞。規定剛剛劃線動作形容詞 " 線(1,2,5,6) "，再次要同學劃另一條線時只要告訴同學 " 線(1,7,8,0) "同學應該很快就劃出來了。

坐標系

     坐標系是規定方格紙上哪邊要當原點(0,0)，當一個點在方格上時如何標註，最常用的繪圖的坐標原點是在左下方，往右x 數字變大往上y數字變大，標註時前面數字為x後面數字為y。例如 : (4,6)

     在數學上因為有負數，坐標原點(0,0)會放在中間，往右x為正數增加往左x為負數減少，往上y正數增加往下y負數減少。例如 : (-3,2),(4,-1)

      發明電視時影像是由左上角開始，電視數位化後就把原點(0,0)放在左上角，Processing 也是以這為標準，在這坐標系往右x增加往下y增加。 例如: (6,3)

繪圖

   點

     一個圖面最簡單的是一個點，要用Processing 劃一個點可以用 point(x,y) ，Processing 就會在x,y的交叉點劃一個點。 例如 point(4,3)

 線

     在一個平面上的兩個點用最短距離聯起來就是直線，Processing 只要指定兩點就可劃出一條線 line(x1,y1,x2,y2)。例如 line (1,1,5,6)

三角形

    三角形式構成幾何圖形最簡單的形狀，任何平面都可以拆成三角形組合，要劃三角型只要把平面上的三點用直線連接起來，Processing 只要指定三點就會劃出三角形 triangle(x1, y1, x2, y2, x3, y3) 。 例如 : triangle(2,1,6,2,3,5)

方型

    方型是4個角每個角都是90度的平面圖型，如果角度不是90度的4角平面叫4角形，Processing 劃方形就不是指定4個點，預設是指定一點再指定寬高rect(x,y,width,height) 。例如 : rect(2,3,4,3)

       方型除了預設的劃法外還可指定半徑是劃法，rectMode(CENTER);rect(x,y,width,height)。例如 : rectMode(CENTER);rect(4,6,2,4)

     方形還有指定兩點劃法， rectMode(CORNERS);rect(x,y,x2,y2)。例如 : rectMode(CORNERS);rect(1,1,5,3)

橢圓

     橢圓是在一個平面劃一個圓形封閉的空間，x軸,y軸等長是"圓"，x軸,y軸不等長是"橢圓"，Processing預設是指定中心點再指定兩軸長度， ellipse(x, y, width,height) 。例如 :ellipse(5, 5, 4,6)

     橢圓也可用角落劃法 ellipseMode(CORNER);ellipse(x,y,width,height) 例如 :  rectMode(CORNER);ellipse(2,2,3,3,width,height) 

      橢圓也可用兩點劃法，  ellipseMode(CORNERS);ellipse(x1,y1,x2,y2)。 例如 : ellipseMode(CORNERS);ellipse(2,1,5,6) 

參考資料 : https://processing.org/tutorials/drawing/