Bézier Curve

This explanation is currently available in Japanese.

ひとことで

制御点を並べ、その間を同じ比率で繰り返し分割していくことで得られる曲線です。曲線は最初と最後の制御点を必ず通り、途中の制御点は曲線を「引き寄せるハンドル」として働きます。Illustrator や Figma のペンツール、CSS の cubic-bezier()、フォントのアウトラインなど、あらゆる場所で使われています。

ゲームでの使いどころ

• 投げる・跳ぶ軌道：始点、頂点付近の 2 点、着地点で、放物線より自由な山なりの軌道を作れます。
• UI のアニメーション：画面の端から飛んでくるアイコン、獲得したコインが所持金表示に吸い込まれる動きなど。
• タイミングカーブ：CSS やゲームエンジンのイージング指定 cubic-bezier(x1, y1, x2, y2) は、時間を横軸にした 3 次ベジェです。
• レベルデザインの道・川：エディタでハンドルを操作して道路や柵を配置するツールの多くがベジェの連結です。

しくみ

De Casteljau のアルゴリズムがもっとも直感的な定義です。

1. 隣り合う制御点を $t : (1-t)$ に内分する点を求める（制御点が $n+1$ 個なら $n$ 個できる）。
2. できた点列に同じ操作を繰り返す。
3. 点が 1 つになったら、それが曲線上の点 $\mathbf{B}(t)$。

これを式で書くと、バーンスタイン多項式による重み付き和になります。3 次（制御点 4 個）の場合：

重要な性質がいくつかあります。

• 端点を通る：$t=0$ で $\mathbf{P}_0$、$t=1$ で $\mathbf{P}_3$。
• 端点での接線：始点では $\mathbf{P}_0 \to \mathbf{P}_1$ の方向、終点では $\mathbf{P}_2 \to \mathbf{P}_3$ の方向を向きます（ハンドルの向き）。
• 凸包性：曲線は制御点を囲む凸多角形の内側に収まります。衝突判定の大まかな絞り込みに使えます。
• アフィン不変：曲線を回転・拡大したければ、制御点だけ変換すれば済みます。

実装のポイント

• 長い経路は区間をつなぐ：制御点を増やして高次にするより、3 次ベジェをつないだほうが制御しやすく計算も安定します。つなぎ目を滑らかにするには、前の区間の $\mathbf{P}_2$、つなぎ目、次の区間の $\mathbf{P}_1$ を一直線に並べます。
• 向きの計算：移動するオブジェクトを進行方向へ向けるときは、上の接線を正規化して使います。

つまずきやすい点

• パラメータと距離は比例しない：$t$ を等間隔に進めても曲線上の間隔は等しくありません。制御点が偏るほど速度むらが大きくなります（弧長パラメータ化を参照）。
• 局所的に調整できない：1 本の高次ベジェでは、どの制御点を動かしても曲線全体が変わります。長い経路にはB スプラインのほうが向きます。
• 円は正確に描けない：多項式なので、4 分の 1 円でもわずかな誤差が残ります（係数 0.5523 の近似が有名です）。正確な円が必要なら NURBS を使います。

デモで試すこと

1. 「自動で動かす」をオフにして「t（手動）」を動かすと、作図の線が止まった状態で観察できます。青（1 段目）→ 紫（2 段目）→ 黄（曲線上の点）と、分割が進む様子を追ってください。
2. 制御点 P1・P2 を高く引き上げると山なりが高くなり、左右にずらすと非対称な跳躍になります。
3. 次数を 2 次に切り替えると、制御点 3 個の放物線状の曲線になります。