Help us understand the problem. What is going on with this article?

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

このページでは「P5.js 日本語リファレンス」 の curveVertex関数を説明します。

curveVertex()

説明文

曲線の頂点座標を指定します。この関数は beginShape() と endShape() の間で、かつbeginShape() に MODE パラメータが指定されていない場合にのみ使用できます。 WebGL モードの場合, curveVertex() は2Dおよび3Dモードで使用できます。 2Dモードは2つのパラメータを想定していますが、3Dモードは3つのパラメータを想定しています。

一連の curveVertex() ラインの最初と最後のポイントは、カーブの開始と終了をガイドするために使用されます。 2番目と3番目のポイント間に小さな曲線を描くには, 最低4つのポイントが必要です。 curveVertex() を使用して5番目のポイントを追加すると、2番目、3番目、4番目のポイント間にカーブが描画されます。 curveVertex() は Catmull-Rom スプラインの実装です。

構文

curveVertex(x, y)

curveVertex(x, y, [z])

パラメタ

  • x

    Number:頂点のx座標

  • y

    Number:頂点のy座標

  • z

    Number:頂点のz座標(WebGLモードの場合)(オプション)

例1

function draw() {
  strokeWeight(5);

  // 定義点を描画する
  stroke(50, 200, 255); // 水色
  point(150, 80);
  stroke(255, 0, 0); // 赤色
  point(84, 91);
  stroke(0, 255, 0); // 緑色
  point(68, 19);
  stroke(0, 0, 255); // 青色
  point(21, 17);
  stroke(255, 165, 0); // オレンジ色
  point(32, 91);

  strokeWeight(1);
  noFill();
  stroke(0);

  beginShape();
    curveVertex(150, 80); // 水色
    curveVertex(84, 91);  // 赤色
    curveVertex(68, 19);  // 緑色
    curveVertex(21, 17);  // 青色
    curveVertex(32, 91);  // オレンジ色
    curveVertex(32, 91);  // オレンジ色
  endShape();
}

実行結果

curveVertex.png

著作権

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

bit0101
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away