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

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

curveTangent()

説明文

点 a、b、c、d の位置 t での曲線の接線を算出します。パラメータ t は 0 と 1 の間で変化し、a と d は曲線上の点、bとcは制御点です。

構文

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

パラメタ

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

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

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

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

• t
  Number：0と1の間の値

戻り値

Number：位置 t の接線

例1

function draw(){
  noFill();
  stroke(0);
  curve(5, 26, 73, 24, 73, 61, 15, 65); // 曲線を描画

  let steps = 4;
  for(let i = 0; i <= steps; i++){
    let t = i / steps;
    let x = curvePoint(5, 73, 73, 15, t); // 曲線上のx座標を取得
    let y = curvePoint(26, 24, 61, 65, t); // 曲線上のy座標を取得

    let tx = curveTangent(5, 73, 73, 15, t); // 曲線の接線x座標を取得
    let ty = curveTangent(26, 24, 61, 65, t); // 曲線の接線y座標を取得

    let a = atan2(ty, tx); // x軸からの角度を取得
    a -= HALF_PI;
    stroke(255, 0, 0);
    line(x, y, cos(a)* 8 + x, sin(a)* 8 + y); // 赤色で法線を描画
  }
}

実行結果

著作権

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