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

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

curve()

説明文

中央の4つのパラメータとして指定された2点間に曲線を描画します。最初の2つのパラメータは、曲線が描画されていなくてもこの点からカーブが作成されたかのようにする制御点です。同様に最後の2つのパラメータは、曲線が描画されていなくてもこの点までカーブが作成されたかのようにする制御点です。

一連の curve() を組み合わせたり curveVertex() を使用したりすることでより長いカーブを作成できます。 curveTightness() と呼ばれる追加の関数は曲線の視覚的な品質を制御します。curve() は Catmull-Rom スプラインの実装です。

構文

curve(x1, y1, x2, y2, x3, y3, x4, y4)

curve(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)

パラメタ

• x1
  Number：開始制御点のx座標

• y1
  Number：開始制御点のy座標

• x2
  Number：最初の点のx座標

• y2
  Number：最初の点のy座標

• x3
  Number：2番目の点のx座標

• y3
  Number：2番目の点のy座標

• x4
  Number：終了制御点のx座標

• y4
  Number：終了制御点のy座標

• z1
  Number：開始制御点のZ座標

• z2
  Number：最初の点のz座標

• z3
  Number：2番目の点のz座標

• z4
  Number：終了制御点のz座標

例

function draw(){
  noFill();

  stroke(255, 0, 0);
  curve(10, 50, 150, 30, 220, 160, 280, 15);


  stroke(0, 0, 255); // 青色の設定
  circle(10, 50, 6); // 開始制御点の描画
  
  stroke(255, 200, 0); // オレンジ色の設定
  circle(150, 30, 6); // 最初の点

  stroke(0, 255, 255); // 水色の設定
  circle(220, 160, 6); // 2番めの点

  stroke(205, 255, 35); // 黃緑色の設定
  circle(280, 15, 6); // 終了制御点の描画  
}

実行結果

著作権

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