4. vertex（頂点）を使用した図形の描画（processing 3D入門）

次は、vertex（頂点）を使用した図形の描画描画です。
これを使うと、様々な形の図形を描くことができます。
まずは、beginShape()で形を描くことを宣言し、vertex(x, y)で一つずつ頂点を指定していきます。

size(400, 400, P3D);

beginShape();
vertex(20, 20);
vertex(120, 20);
vertex(120, 120);
vertex(20, 120);
endShape(CLOSE);

次に、四角形を描いてみます。

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

void draw() {
  background(0);
  translate(width/2, height/2);    //立体の中心を画面中央に移動  
  rotateY(radians(mouseX));    //Y軸に対してマウスのX軸の動きによって角度を変える

  fill(255);

  beginShape(QUADS);    //四角形を描くことを宣言する
  //正面
  vertex(100, 50, 0);  //一点ずつ順番に座標を指定する
  vertex(100, -50, 0);
  vertex(-100, -50, 0);
  vertex(-100, 50, 0);

  //縦
  vertex(0, 50, 100);  //一点ずつ順番に座標を指定する
  vertex(0, -50, 100);
  vertex(0, -50, -100);
  vertex(0, 50, -100);
  endShape();    //四角形を閉じる
}

ここでのポイントは、QUADSと宣言していれば、いくつvertexを書いても必ずオブジェクトにしてくれます。

最後に、カスタム立方体を書いてみましょう。ここでは、一つずつ面を描いていきます。こうすることによって、一つずつの面に違う色を当てはめることも可能になります。

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

void draw() {
  background(0);

  translate(width/2, height/2);    //立体の中心を画面中央に移動  
  rotateY(radians(mouseX));    //Y軸に対してマウスのX軸の動きによって角度を変える
  rotateX(radians(mouseY));    //Y軸に対してマウスのX軸の動きによって角度を変える 

  fill(255);

  scale(100);    //拡大
  beginShape(QUADS);

  //正面
  fill(255, 0, 0);
  vertex(-1,  1,  1);
  vertex( 1,  1,  1);
  vertex( 1, -1,  1);
  vertex(-1, -1,  1);
  //右
  fill(0, 255, 0); 
  vertex( 1,  1,  1);
  vertex( 1,  1, -1);
  vertex( 1, -1, -1);
  vertex( 1, -1,  1);
  //後ろ
  fill(0, 0, 255); 
  vertex( 1,  1, -1);
  vertex(-1,  1, -1);
  vertex(-1, -1, -1);
  vertex( 1, -1, -1);
  //左
  fill(255, 255, 0); 
  vertex(-1,  1, -1);
  vertex(-1,  1,  1);
  vertex(-1, -1,  1);
  vertex(-1, -1, -1);
  //下
  fill(0, 255, 255); 
  vertex(-1,  1, -1);
  vertex( 1,  1, -1);
  vertex( 1,  1,  1);
  vertex(-1,  1,  1);
  //上
  fill(255, 0, 255); 
  vertex(-1, -1, -1);
  vertex( 1, -1, -1);
  vertex( 1, -1,  1);
  vertex(-1, -1,  1);

  endShape();
}