P5.js 日本語リファレンス(bezierVertex)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の bezierVertex関数を説明します。

bezierVertex()

説明文

ベジェ曲線の頂点座標を指定します。 bezierVertex() を呼び出すたびに、2つの制御点とベジェ曲線の1つのアンカー点の位置が定義され、新しいセグメントが線または形状に追加されます。 WebGL モードの場合、bezierVertex() は2Dおよび3Dモードで使用できます。 2Dモードは6つのパラメータを想定していますが、3Dモードは9つのパラメータ(z座標を含む)を想定しています。

beginShape() 呼び出し内で bezierVertex() を初めて使用するときは、最初のアンカーポイントを設定するために、その前に vertex() を呼び出す必要があります。この関数は beginShape() と endShape() の間で、beginShape() に MODE または POINTS パラメータが指定されていない場合にのみ使用する必要があります。

構文

bezierVertex(x2, y2, x3, y3, x4, y4)

bezierVertex(x2, y2, z2, x3, y3, z3, x4, y4, z4)

パラメタ

x2
Number：最初の制御点のx座標

y2
Number：最初の制御点のy座標

x3
Number：2番目の制御点のx座標

y3
Number：2番目の制御点のy座標

x4
Number：アンカーポイントのx座標

y4
Number：アンカーポイントのy座標

z2
Number：最初の制御点のz座標(WebGLモードの場合)

z3
Number：2番目の制御点のz座標(WebGLモードの場合)

z4
Number：アンカーポイントのz座標(WebGLモードの場合)

例1

function draw() {
  noFill();
  beginShape();
  vertex(30, 20);
  bezierVertex(80, 5, 80, 75, 30, 75);
  endShape();

  strokeWeight(6);

  // 定義点を描画する
  stroke(255, 0, 0); // 赤色
  point(30, 20);
  stroke(0, 255, 0);  // 緑色
  point(80, 5);
  stroke(0, 0, 255); // 青色
  point(80, 75);
  stroke(255, 165, 0); // オレンジ色
  point(30, 75);

  strokeWeight(1);
  stroke(0);
}

実行結果

著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。