ベジエ曲線を描く

ベジエ曲線はquadraticVertex関数、bezierVertex関数で描く

processingでベジエ曲線を描くには、2次のベジエ曲線を描くためのquadraticVertex関数と3次のベジエ曲線を描くためのbezierVertex関数を使います。

quadraticVertex関数

quadraticVertex関数は以下のように利用します。

beginShape();
vertex(x1,y1);
quadraticVertex(x2,y2,x3,y3);
endShape();

quadraticVertex関数の各パラメータは次のようになっています。

• x2　(float)　2次のベジエ曲線の制御点のx座標
• y2　(float)　2次のベジエ曲線の制御点のy座標
• x3　(float)　2次のベジエ曲線の終点のx座標
• y3　(float)　2次のベジエ曲線の終点のy座標

quadtaticVertex関数を利用する際は、任意の図形を描くときに利用するbeginShape関数とendShape関数の間に設定します。また、ベジエ曲線の始点はvertex関数などを用いて別途指定する必要があります。上の例では、vertex(x1,y1)を設定することで\((x1,y1)\)を始点にしています。

bezierVertex関数

bezierVertex関数は以下のように利用します。

beginShape();
vertex(x1,y1);
bezierVertex(x2,y2,x3,y3,x4,y4);
endShape();

bezierVertex関数の各パラメータは次のようになっています。

• x2　(float)　3次のベジエ曲線の1つ目の制御点のx座標
• y2　(float)　3次のベジエ曲線の1つ目の制御点のy座標
• x3　(float)　3次のベジエ曲線の2つ目の制御点のx座標
• y3　(float)　3次のベジエ曲線の2つ目の制御点のy座標
• x4　(float)　3次のベジエ曲線の終点のx座標
• y4　(float)　3次のベジエ曲線の終点のy座標

bezierVertex関数を利用する際も、beginShape関数とendShape関数の間に設定し、始点は別途指定します。

利用例

quadraticVertex関数やbezierVertex関数を用いてベジエ曲線を描く例を示します。

void setup(){
  size(400,400);  
  fill(128,128,128);

  beginShape();
  vertex(120, 80);
  bezierVertex(320, 0, 320, 300, 90, 300);
  quadraticVertex(220, 210, 120, 80);
  endShape(CLOSE);

}

quadraticVertex関数やbezierVertex関数を2つ以上続けて利用する際、先に描いたベジエ曲線の終点が次に描くベジエ曲線の始点になることに注意が必要です。

単体のベジエ曲線であればbezier関数でも描ける

ベジエ曲線を利用して何らかの図形を描く場合は上記のquadraticVertex関数やbezierVertex関数を利用する方がよいと思います。ただ、ベジエ曲線を単体で描くのであれば、bezier関数も便利です。

bezier(x1,y1,x2,y2,x3,y3,x4,y4);

各パラメータは次のようになっています。

• x1　(float)　3次のベジエ曲線の始点のx座標
• y1　(float)　3次のベジエ曲線の始点のy座標
• x2　(float)　3次のベジエ曲線の1つ目の制御点のx座標
• y2　(float)　3次のベジエ曲線の1つ目の制御点のy座標
• x3　(float)　3次のベジエ曲線の2つ目の制御点のx座標
• y3　(float)　3次のベジエ曲線の2つ目の制御点のy座標
• x4　(float)　3次のベジエ曲線の終点のx座標
• y4　(float)　3次のベジエ曲線の終点のy座標

以下に、bezier関数を用いてベジエ曲線を描く例を示します。

void setup(){
  size(400,400); 
  noFill();
  bezier(120, 80, 320, 0, 320, 300, 90, 300);
}