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

2024年11月20日

URLをコピーしました！

ワタタク

今回の記事の目的はProcessingの「bezierTangent()」を理解し、自分なりに使ってみること。

この記事を書いた人

ワタタク

プロフィール

クリエイティブコーディング初心者が、アーティストとして活躍するまでの上達の過程を発信
コンセプトは「クリエイティブコーディング1万時間の歩き方」
参考にしてもらえるブログにするため、Processingを独学で勉強して共有中

記事内のProcessingのバージョンは4.3。

【Processing】bezierTangent()について

bezierTangent()について

bezierTangentは、ベジエ曲線の接線という意味
ジエ曲線は、なめらかな曲線を描くための方法です。bezierTangent()は、その曲線の特定の場所での方向や角度を計算する関数
構文：bezierTangent(x1, y1, x2, y2, x3, y3, x4, y4, t)
- bezierTangent(点1のx, 点1のy, 点2のx, 点2のy, 点3のx, 点3のy, 点4のx, 点4のy, t)
【注意点】

【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);  // 接線を描画
}