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

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

bezierTangent()

説明文

ポイント a、b、c、d の位置 t での bezier への接線を算出します。パラメータ a と d はカーブの最初と最後のポイントで、b と c はコントロールポイントです。最終的なパラメーター t は 0 と 1 の間で変化します。

構文

bezierTangent(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(205, 0, 250); // 紫色を設定
  bezier(85, 20, 10, 10, 90, 90, 15, 80); // bezier 曲線を描画
  
  let steps = 3;
  for (let i = 0; i <= steps; i++) {
    let t = i / steps;
    let x = bezierPoint(85, 10, 90, 15, t); // bezier 曲線上のx座標を取得
    let y = bezierPoint(20, 10, 90, 80, t); // bezier 曲線上のy座標を取得
    let tx = bezierTangent(85, 10, 90, 15, t); // bezier 曲線の接線x座標を取得
    let ty = bezierTangent(20, 10, 90, 80, t); // bezier 曲線の接線y座標を取得
    let a = atan2(ty, tx); // x軸からの角度を取得
    a += PI;
    stroke(255, 0, 0); // 赤色を設定
    line(x, y, cos(a) * 20 + x, sin(a) * 20 + y); // 法線を描画

    stroke(0, 0, 255); // 青色を設定
    line(x, y, cos(a) * -20 + x, sin(a) * -20 + y); // 反対側に法線を描画

    stroke(0);
    ellipse(x, y, 6, 6);
  }
}

実行結果

例2

function draw(){
  noFill();

  stroke(255, 0, 0); // 赤色を設定
  bezier(125, 20, 10, 10, 90, 90, 15, 80); // bezier 曲線を描画

  stroke(0, 255, 0); // 緑色を設定
  circle(125, 20, 8); // 始点を描画

  stroke(0, 0, 255); // 青色を設定
  circle(15, 80, 8); // 終点を描画

  stroke(200, 0, 255); // 紫色を設定
  circle(10, 10, 8); // 最初の制御点を描画

  stroke(245, 210, 0); // 黄色を設定
  circle(90, 90, 8); // 2番めの制御点を描画

  let steps = 16;
  stroke(50, 200, 255); // 水色を設定
  for (let i = 0; i <= steps; i++){
    let t = i / steps;
    let x = bezierPoint(125, 10, 90, 15, t); // bezier 曲線上のx座標を取得
    let y = bezierPoint(20, 10, 90, 80, t); // bezier 曲線上のy座標を取得
    let tx = bezierTangent(125, 10, 90, 15, t); // bezier 曲線の接線x座標を取得
    let ty = bezierTangent(20, 10, 90, 80, t); // bezier 曲線の接線y座標を取得
    let a = atan2 (ty, tx); // x軸からの角度を取得
    a = a - HALF_PI;
    line(x, y, cos(a) * 12 + x, sin(a) * 12 + 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) に従います。