Processing 基礎 二 正多邊圖形&星星

    你的世界是甚麼形狀?你喜愛的又是甚麼形狀?三角形?五角?八角?這個範例做了一個polygon()的函數，用polygon()函數能做出任何的正多邊形。

     Processing 是做動畫用的，很多設定概念都來自於動畫，這範例看起來是三個多邊形在轉動，事實上是電腦不斷的算出每個多邊形的頂點然後畫線填滿。

   第二段是畫星星，star()這個函數能畫出任何光芒數的星星。

   用 Processing 網站所提供的範例更改。


畫多邊形

void setup() {
  size(640, 480);  //畫面大小640 X 480
  frameRate(60);   //畫面更新速率 60/秒

}

void draw() {
  background(102);     //背景設為 灰階 102
  pushMatrix();    
  fill(255,0,0);     //填滿紅色
  translate(width*0.2, height*0.5); //坐標0,0切換到畫面寬度*0.2高度*0.5的位置
  rotate(frameCount / 100.0);   //旋轉
  polygon(0,0,100, 3);        // 3角形

  popMatrix();
  pushMatrix();
  fill(0,255,0);   //填滿紅色
  translate(width*0.5, height*0.5);
  rotate(frameCount / 50.0);
  polygon(0, 0, 80, 20);  // 20角形
  popMatrix();

  pushMatrix();
  fill(0,0,255);  //填滿藍色
  translate(width*0.8, height*0.5);
  rotate(frameCount / -100.0);
  polygon(0, 0, 70, 7);   //7角形
  popMatrix();

}
void polygon(float x, float y, float radius, int npoints) {      //多邊形函數
  float angle = TWO_PI / npoints;
  beginShape();
  for (float a = 0; a < TWO_PI; a += angle) {
    float sx = x + cos(a) * radius;
    float sy = y + sin(a) * radius;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

按"撥放"後有三個物體在旋轉

畫星星

void setup() {

  size(640,480);

}

void draw() {

  background(102);

  

  pushMatrix();

  fill(#FCB71F);  

  translate(width*0.2, height*0.5);

  rotate(frameCount / 200.0);

  star(0, 0, 5, 70, 3); 

  popMatrix();

  

  pushMatrix();

  translate(width*0.5, height*0.5);

  fill(#EA9763);   

  rotate(frameCount / 400.0);

  star(0, 0, 60, 100, 12); 

  fill(#F06711);  

  ellipse(0, 0, 100,100); 

  popMatrix();

  

  pushMatrix();

  fill(#B1B1DE);  

  translate(width*0.8, height*0.5);

  rotate(frameCount / -100.0);

  star(0, 0,30, 70, 5); 

  popMatrix();

}

void star(float x, float y, float radius1, float radius2, int npoints) {  //星狀函數

  float angle = TWO_PI / npoints;

  float halfAngle = angle/2.0;

  beginShape();

  for (float a = 0; a < TWO_PI; a += angle) {

    float sx = x + cos(a) * radius2;

    float sy = y + sin(a) * radius2;

    vertex(sx, sy);

    sx = x + cos(a+halfAngle) * radius1;

    sy = y + sin(a+halfAngle) * radius1;

    vertex(sx, sy);

  }

  endShape(CLOSE);

}

按 "播放"後

Processing 函數

rotate()

     rotate()物體繞著原點旋轉，物體旋轉會是整物體的矩陣都一起轉動，配合pushMatrix()translate(x, y)popMatrix()一起使用。

語法 :

rotate(角度)

pushMatrix()
popMatrix()

pushMatrix();popMatrix()是一組的, pushMatrix()後 translate()開始變換坐標0,0的相對位置popMatrix()後會把坐標恢復為系統預設坐標。

語法 :

pushMatrix()

.

.

popMatrix()

translate()

       translate();是重新定義坐標原點,translate(50,50)會把坐標0,0重新定位在原本50,50的地方，在下一次translate(50,50)坐標0,0會在畫面100,100的位置，一般都跟pushMatrix();popMatrix()配合使用。

語法 :

translate(x, y)
translate(x, y, z)

frameRate()

    frameRate()指定畫面更新速率，frameRate(30)就是每秒30幅，這跟電腦的運算能力也有關係，電腦能力不足時會無法達到指定的更新速率。

語法 :

 frameRate(速率)

beginShape()

      beginShape()會沿著指定的端點畫直線或是點到endShape()結束，未指定參數時beginShape()會沿著指定的端點一直畫直線，beginShape(POINTS) 只會畫點，beginShape(LINES)會在兩點間劃出一條線，第2點不會與第3點連接，beginShape(TRIANGLES)每三點畫出一個獨立三角形....。

語法 :

beginShape()
beginShape(類型)

類型
POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP

endShape()

        endShape()是結束畫形狀的函數，endShape()最後一點不會連接到第一點。endShape(CLOSE)會把最後一個頂點連接到第一個頂點。

語法 :

endShape()
endShape(CLOSE)

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