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

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

quadraticVertex()

説明文

2次ベジェ曲線の頂点座標を指定します。 quadraticVertex() を呼び出すたびにベジェ曲線の1つの制御点と1つのアンカー点の位置を指定すると、線分または形状に新しいセグメントが追加されます。 quadraticVertex() が beginShape() 呼び出し内で初めて使用されるとき、最初のアンカーポイントを設定するには、その前に vertex() を呼び出す必要があります。 WebGL モードの場合, quadraticVertex() は2Dおよび3Dモードで使用できます。 2Dモードでは4つのパラメータが想定されますが, 3Dモードでは6つのパラメータ(z座標を含む)が想定されます。

この関数は, beginShape() と endShape() の間で, beginShape() に MODE または POINTS パラメータが指定されていない場合にのみ使用する必要があります。

構文

quadraticVertex(cx, cy, x3, y3)

quadraticVertex(cx, cy, cz, x3, y3, z3)

パラメタ

cx
Number：制御点のx座標

cy
Number：制御点のy座標

x3
Number：アンカー点のx座標

y3
Number：アンカー点のy座標

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

z3
Number：アンカー点のz座標(WebGLモードの場合)

例1

function draw() {
  strokeWeight(5);

  // 定義点を描画する
  stroke(255, 0, 0); // 赤色
  point(20, 20);
  stroke(0, 255, 0); // 緑色
  point(80, 20);
  stroke(0, 0, 255); // 青色
  point(50, 50);

  noFill();
  strokeWeight(1);
  stroke(0);
  
  beginShape();
    vertex(20, 20);  // 赤色
    quadraticVertex(80, 20, 50, 50); // 緑色、青色
  endShape();
}

実行結果

例2

function draw() {
  strokeWeight(5);

  // 定義点を描画する
  stroke(255, 0, 0); // 赤色
  point(20, 20);
  stroke(0, 255, 0); // 緑色
  point(80, 20);

  stroke(0, 0, 255); // 青色
  point(50, 50);

  stroke(50, 200, 255); // 水色
  point(20, 80);
  stroke(255, 165, 0); // オレンジ色
  point(80, 80);
  stroke(190, 0, 255); // 紫色
  point(80, 60);

  noFill();
  strokeWeight(1);
  stroke(0);
  
  beginShape();
    vertex(20, 20); // 赤色
    quadraticVertex(80, 20, 50, 50); // 緑色、青色
    quadraticVertex(20, 80, 80, 80); // 水色、オレンジ色
    vertex(80, 60);  // 紫色
  endShape();
}

実行結果

著作権

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) に従います。