Processingで五角形・六角形・ハート形を描く

12月 1st, 2011

Processing Advent Calendar 2011 (1日目)
五角形・六角形・ハート形

五角形・六角形・ハート形

Processingには四角形を描くrect()や、円を描くellipse()などがありますが、これらと同じように五角形や六角形、そしてハート形を描くためのメソッドを用意しました。

 
void setup(){
  size(300, 300);
}
 
void draw(){
  pentagon(75, 75, 150);
  hexagon(225, 75, 150);
  heart(75, 225, 150, 150);
}
 
//  五角形の描画
void pentagon(float centerX, float centerY, float size){
  final float COS[] = {0.95105654, 0.5877853, -0.5877852, -0.95105654, 0};
  final float SIN[] = {-0.309017, 0.809017, 0.809017, -0.30901697, -1};
 
  final float RADIUS = size / 2;
  beginShape();
  for(int i = 0; i < 5; i++){
    float tx = COS[i] * RADIUS + centerX;
    float ty = SIN[i] * RADIUS + centerY;
    vertex(tx, ty);
  }
  endShape(CLOSE);
}
 
//  六角形の描画
void hexagon(float centerX, float centerY, float size){
  final float COS[] = {1, 0.5, -0.5, -1, -0.5, 0.5};
  final float SIN[] = {0, 0.8660254,  0.8660254, 0, -0.86602524, -0.86602524};
 
  final float RADIUS = size / 2;
  beginShape();
  for(int i = 0; i < 6; i++){
    float tx = COS[i] * RADIUS + centerX;
    float ty = SIN[i] * RADIUS + centerY;
    vertex(tx, ty);
  }
  endShape(CLOSE);
}
 
//  ハート形の描画
void heart(float centerX, float centerY, float width, float height){
  final float WIDTH = width / 2 * 0.85;
  final float HEIGHT = height / 2;
  final float OFFSET = centerY - (HEIGHT / 6 * 5);
  beginShape();
  for(int i = 0; i < 30; i++){
    float tx = abs(sin(radians(i * 12))) * (1 + cos(radians(i * 12))) * sin(radians(i * 12)) * WIDTH + centerX;
    float ty = (0.8 + cos(radians(i * 12))) * cos(radians(i * 12)) * HEIGHT + OFFSET;
    vertex(tx, ty);
  }
  endShape(CLOSE);
}

使い方は、それぞれのメソッドをスケッチの適当な場所にコピーして、呼び出してください。 rect()やellipse()と同じように、色をつけたり回転したりすることもできます。

それぞれ、座標は図形の中心の座標です。（ellipse()と同じ）

  • 五角形を描くメソッド
    • pentagon(x座標, y座標, サイズ);
  • 六角形を描くメソッド
    • hexagon(x座標, y座標, サイズ);
  • ハート形を描くメソッド
    • heart(x座標, y座標, 横幅, 縦幅);

五角形と六角形はそれぞれ高速化のため、描くために必要な座標の点は予め計算して定数にしてあります。これにより、毎回計算するよりも高速に描画ができます。 これらをbeginShape()とendShape()で繋ぐことで、図形を描画しています。

ハート形はカージオイド（wikipedia）を利用しています。ただこのままではハートには見えにくいので、少し数式に手を加えています。

Tags:
Posted in Processing　Advent　Calendar2011 | No Comments »

Comments

Leave a Reply

 Comment Form