Processing 基礎 一 畫幾何圖形

Processing 基礎 一 畫幾何圖形

      Processing 重點在於用程式畫圖，再用一連串的圖做成動畫，在畫圖前有幾個觀念要先了解。

坐標系統

         Processing 的坐標左上角是x0,y0 ，往右邊x會增加往下y增加，Processing 的平面座標負數物體會超出畫面， 3D 坐標 z 需是負數。

色彩空間

    Processing 預設採用 RGB 色彩空間 ，RGB採用加法混色法，因為它是描述各種「光」通過何種比例來產生顏色。光線從暗黑開始不斷疊加 產生顏色。RGB描述的是紅綠藍三色光的數值。Processing 灰階 一樣是用加法 0為黑色255 為白色。

圖片來源 : 維基百科

 實際操作

   開啟Processing 輸入以下程式碼。


size(640, 480);          //視窗大小
background(180,0,168);   //背景顏色 紅 180 綠 0 藍 168
stroke(0);              // 物體框 灰階 0

fill(125,128);          // 填滿顏色 灰階 125 透明度 128
triangle(18,18, 18, 360, 81, 360); //畫三角形

fill(102,128,0,128);    // 填滿顏色 紅 102 綠 128 藍 0 透明度 128
rect(81, 81, 63, 63);   //畫方形

fill(204);    //填滿顏色 灰階 204
quad(189, 18, 216, 18, 216, 360, 144, 360); //畫四角形

fill(255);   // 填滿顏色 灰階 255
ellipse(300, 200, 72, 72);  // 畫圓形

fill(255);  // 填滿顏色 灰階 255
arc(480, 280, 280, 280, PI, TWO_PI); // 畫弧形

按  "撥放 " Processing IDE 會依照輸入的程式畫出圖形。

 可以改變程式內的數字試看看有甚麼不同的結果。

Processing 函數

size()

    size()定義畫面尺寸，必須在程式第一行或是setup()後的第一行，例如size(640,480)是定義畫面的寬度是640點高度是480點，size()只能定義一次程式運作中無法改變,未定義size()預設為100x100，size()也可指定渲染器種類。

語法 :

size(寬度,高度)

size(寬度,高度,渲染器)

background()

       background() 是設定背景顏色，Processing預設背景為淺灰色，如填入一個值(0~255中間)會是灰階，填入兩個數值(128,20)第二個數字是代表不透明度，Processing預設顏色是RGB模式可以填入16進制的顏色表示法如(#FF00FF)，也可以填入三個數字(255,0,255)會是紫色。第4個數字是代表不透明度(255,0,0,128)紅色不透明度。彩色模式如果改為HSB模式這三個值代表(色相,亮度,飽和)。背景也可使用圖片,圖片大小要與畫面大小一致。

語法 :

background( 紅綠藍 ) 

background( 紅綠藍, 不透明度 ) 

background( 灰階 ) 

background( 灰階,不透明度 )        

background( 色相 , 亮度 , 飽和度 )  //HSB模式

background( 色相, 亮度,飽和度, 不透明度 )    //HSB模式

background( 圖片 )

stroke()

         stroke() 是設定邊框顏色，如填入一個值(0~255中間)會是灰階，填入兩個數值(128,20)第二個數字是代表不透明度，Processing預設顏色是RGB模式可以填入16進制的顏色表示法如(#FF00FF)，也可以填入三個數字(255,0,255)會是紫色。第4個數字是代表不透明度(255,0,0,128)紅色不透明度。彩色模式如果改為HSB模式這三個值代表(色相,亮度,飽和)。

也可直接使用無邊框模式 noStroke（）

語法:

stroke( 紅綠藍 ) 

stroke( 紅綠藍, 不透明度 ) 

stroke( 灰階 ) 

stroke( 灰階,不透明度 )        

stroke( 色相 , 亮度 , 飽和度 )  //HSB模式

stroke( 色相, 亮度,飽和度, 不透明度 )    //HSB模式

fill()

      fill() 是設定填滿顏色，如填入一個值(0~255中間)會是灰階，填入兩個數值(128,20)第二個數字是代表不透明度，Processing預設顏色是RGB模式可以填入16進制的顏色表示法如(#FF00FF)，也可以填入三個數字(255,0,255)會是紫色。第4個數字是代表不透明度(255,0,0,128)紅色不透明度。彩色模式如果改為HSB模式這三個值代表(色相,亮度,飽和)。

也可直接使用無邊框模式 noFill（）

語法 :

fill( 紅綠藍 ) 

fill( 紅綠藍, 不透明度 ) 

fill( 灰階 ) 

fill( 灰階,不透明度 )        

fill( 色相 , 亮度 , 飽和度 )  //HSB模式

fill( 色相, 亮度,飽和度, 不透明度 )    //HSB模式

triangle()

     triangle() 是畫一個三角形，指定三點就會畫出一個封閉型的三角形，須指定每一點的x,y坐標。

語法 : 

triangle(X1，Y1，X2，Y2，X3，Y3）

rect()

     rect() 是畫一個4方型有八的參數可下。rect(250,250,50,40)在坐標x250,y250地方畫一個寬度50高度40的方形。rect(250,250,50,40,10)在坐標x250,y250地方畫一個寬度50高度40，圓角半徑10的方形。rect(250,250,50,40,10,5,7,4)在坐標x250,y250地方畫一個寬度50高度40，左上圓角半徑10，右上圓角半徑5，右下圓角半徑7，左下圓角半徑4的方形。

語法 :

rect(x, y, 寬度 , 高度)
rect(x, y, 寬度 , 高度 , R角)
rect(x, y, 寬度 , 高度 , 左上R角,右上R角,右下R角,左下R角)

ellipse()

       ellipse() 畫一個橢圓，ellipse(100,100,30,30) 在 x100,y100的地方畫一個高度30寬度30的圓。寬度跟高度一樣就是圓，寬度跟高度不一樣就叫橢圓。

語法 :

 ellipse(x, y, 寬度 , 高度)

arc()

    arc()是畫一個弧形，arc(480, 280, 280, 280, PI, TWO_PI)在x480,y280畫一個高度280寬度280起始點為PI終止點為TWO_PI的弧形。模式可決定弧形是否封閉，預設為開放。

語法 : 

arc(x, y, 寬度,高度,起始點,終止點)

arc(x, y, 寬度,高度,起始點,終止點,模式)

參考資料 :

https://processing.org/

https://zh.wikipedia.org/