【Processing】bezierTangent()の使い方【曲線の特定の場所での方向や角度を計算する関数】

size(400, 400);  // キャンバスのサイズを400x400ピクセルに設定

noFill();  // 図形の内部を塗りつぶさないように設定
bezier(100, 200, 150, 50, 350, 350, 300, 100);  // ベジエ曲線を描画（4つの制御点を指定）

stroke(255, 102, 0);  // 線の色をオレンジに設定
int steps = 16;  // ベジエ曲線上のステップ数を16に設定
for (int i = 0; i <= steps; i++) {  // 0からステップ数までループ
  float t = i / float(steps);  // tは0から1までのステップごとの値
  float x = bezierPoint(100, 150, 350, 300, t);  // tにおけるベジエ曲線上のx座標を計算
  float y = bezierPoint(200, 50, 350, 100, t);  // tにおけるベジエ曲線上のy座標を計算
  float tx = bezierTangent(100, 150, 350, 300, t);  // tにおけるx方向の接線を計算
  float ty = bezierTangent(200, 50, 350, 100, t);  // tにおけるy方向の接線を計算
  float a = atan2(ty, tx);  // 接線の角度を計算
  a -= HALF_PI;  // 角度を90度回転
  line(x, y, cos(a) * 32 + x, sin(a) * 32 + y);  // 接線を描画
}