複雑な形 : beginShape, endShape

beginShape, endShape

beginShape と endShape という２つの命令の間に頂点の座標を任意の数だけ指定することで、それらを結んだ図形を描くことができます。

サンプル

コード

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

void draw(){
  background( 20, 0, 60 );
  
  noStroke();
  fill( 255, 255, 0 );
  
  beginShape();
  vertex( 300, 100);
  vertex( 325, 160);
  vertex( 380, 160);
  vertex( 340, 200);
  vertex( 360, 260);
  vertex( 300, 220);
  vertex( 240, 260);
  vertex( 260, 200);
  vertex( 215, 160);
  vertex( 280, 160);
  endShape( CLOSE );
}

補足

beginShape 関数に引数を与えることで様々な描画パターンを作ることができます。詳しくは公式ドキュメントを参照。頂点を結ぶ線は直線だけでなく曲線も使うことができます。詳しくは詳しくは公式ドキュメントを参照。

補足２

上記の星を描く処理を関数化してみましょう。

サンプル

コード

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

void draw(){
  background( 20, 0, 60 );
  
  noStroke();
  fill( 255, 255, 0 );
  
  drawStar( 150, 150, 40, 0.2 );
  drawStar( 300, 250, 50, 0.6 );
  drawStar( 450, 200, 30, 0.4 );
}

void drawStar( int x, int y, float s, float r ){
  pushMatrix();
  translate( x, y );
  rotate( radians( -90 ) );
  
  beginShape();
  for( int i=0; i<10; i++){
    float px;
    float py;
    if( i % 2 == 0 ){
      px = s * cos( radians( 36 * i ) );
      py = s * sin( radians( 36 * i ) );
    } else {
      px = s * r * cos( radians( 36 * i ) );
      py = s * r * sin( radians( 36 * i ) );
    }
    vertex( px, py );
  }
  endShape(CLOSE);
  
  popMatrix();
}

補足

星形を描くための処理をまとめた drawStar という関数を作りました。vertex の座標を三角関数を使って計算しています。関数の引数 r を用いて星の膨らみ具合を調整できるようにしています。