ノード一覧に戻る

パス接線

path_tangent

ベジェパス上の指定位置の接線方向を取得します

確認済み
解説あり

入力ポート

名前説明
パス
path
Path
必須
接線をサンプリングするベジェパス

出力ポート

名前説明
方向
direction
Vec2
正規化された接線方向ベクトル
角度
angle
Float
接線の角度(0〜360°)

パラメータ

名前既定値範囲説明・選択肢
サブパス
sub_path_index
Int
00–255

接線サンプリング対象のサブパス番号(0 = 最初)

位置
t
Float
00–1 / step 0.01

パス上の位置(0=始点、1=終点)

sub_path_index のスライダー上限は入力に応じて更新されます。保存済み番号が現在の 範囲外でも値は書き換えず警告だけを表示し、サブパス数が戻ると以前の選択が復活します。

概要

パス上の位置(t)における進行方向(接線の向き)を取り出すノードです。 path_sample(位置)とペアで使うと、「パスに沿って動きながら、進行方向を 向く」——矢・魚・車のような自然な軌道アニメーションが作れます。

使い方のポイント

  • 定番セット: 同じ t を path_sample(→移動)と path_tangent (→transform の回転)の両方に配る。t の駆動源は1つにするのがコツ
  • angle は度数(0〜360)でそのまま transform の回転に入る
  • 向きが逆(お尻から進む)なら path_reverse を前段に、または angle に180を足す

関連ノード

  • path_sample — 位置側の相方(ほぼ常にセット)

  • transform — 回転の適用先

  • path_reverse — 進行方向の反転

  • math_op — 角度のオフセット調整

  • バージョン: 1

動作

  1. sample_path_tangent() で t 位置の接線ベクトルを取得
  2. ベクトルを正規化(長さ1に変換)
  3. atan2 で角度を計算し、0〜360° にラップ
  4. パス未接続時は direction=(1,0), angle=0° を返す

使用例

パスに沿った回転アニメーション

[BezierPath] → path → [PathTangent] → angle → [Transform(rotation)] → [Preview]
                            ↑ t                           ↑
                    [TimeSource → Remap]            [PathSample → x,y]

t を📌入力ピン化して TimeSource → Remap の出力を接続し、PathSample と組み合わせることで、パスに沿って移動しながら進行方向に回転するアニメーションが実現できます。

ノード一覧に戻る
パス接線 — PixPipeline ノード解説