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

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

bezier()

説明文

3次ベジェ曲線を描画します。これらの曲線は、 一連のアンカーポイントとコントロールポイントによって定義されます。最初の2つのパラメータは最初のアンカーポイントを指定し, 最後の2つのパラメータは他のアンカーポイントを指定します。これらは, 曲線の最初と最後のポイントになります。中央のパラメータは, 曲線の形状を定義する2つの制御点を指定します。近似的に言えば, コントロールポイントはカーブをその方向に「引き」ます。

ベジエ曲線はフランスの自動車技術者ピエールベジエによって開発され, 緩やかに傾斜した曲線を定義するためにコンピュータグラフィックスで一般的に使用されています。 curve()もご覧ください。

構文

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

bezier(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：2番目のアンカーポイントのx座標

• y4
  Number：2番目のアンカーポイントのy座標

• z1
  Number：最初のアンカーポイントのZ座標

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

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

• z4
  Number：2番目のアンカーポイントのZ座標

例1

function draw() {
  noFill();
  stroke(255, 0, 0); // 赤色を指定
  line(10, 10, 85, 10); // 上の線を描画
  line(15, 80, 90, 80); // 下の線を描画
  stroke(0, 0, 0); // 黒色を指定
  bezier(85, 10, 10, 10, 90, 90, 15, 80); // 右上から左下に bezier 曲線を描画
}

実行結果

例2

function draw() {
  background(0, 0, 0);
  noFill();
  stroke(255); // 白色を指定
  bezier(150, 150, 0, 100, 100, 0, 100, 0, 0, 0, 100, 0); // 下から上に bezier 曲線を描画
}

実行結果