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

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

bezierPoint()

説明文

ポイント a、b、c、d の位置 t の bezier 値を算出します。パラメータ a と d はカーブの最初と最後のポイントで、b と c は制御点です。パラメータ t は0と1の間で変化します。これは x 座標、y 座標それぞれで実行して t でのベジエ曲線の位置を取得できます。

構文

bezierPoint(a, b, c, d, t)

パラメタ

• a
  Number：曲線上の最初の点の座標

• b
  Number：最初の制御点の座標

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

• d
  Number：曲線上の2番目の点の座標

• t
  Number：0と1の間の値

戻り値

Number：位置 t での bezier の値

例1

function draw(){
  noFill();
  let x1 = 85,
      x2 = 10,
      x3 = 90,
      x4 = 15;

  let y1 = 20,
      y2 = 10,
      y3 = 90,
      y4 = 80;

  bezier(x1, y1, x2, y2, x3, y3, x4, y4);
  fill(255);
  let steps = 5;

  for(let i = 0; i <= steps; i++){
    let t = i / steps;
    let x = bezierPoint(x1, x2, x3, x4, t); // bezier 曲線上の x 座標を算出
    let y = bezierPoint(y1, y2, y3, y4, t); // bezier 曲線上の y 座標を算出
    ellipse (x, y, 5, 5); // 算出したxy座標上に円を描画
  }
}

実行結果

著作権

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