デジタルデザインやコンピュータグラフィックスの世界で最も広く使われているのが「3次ベジェ曲線」です。
IllustratorのペンツールもCSSのcubic-bezier()も、Webフォントの文字の形も、その根底にはこの3次ベジェ曲線の数学が存在しています。
しかし、「3次ベジェ曲線を実際に使ってはいるけれど、計算式まで理解しているかと聞かれると自信がない」という方も多いのではないでしょうか。
本記事では、3次ベジェ曲線の数学的定義、パラメータ方程式、4つの制御点の関係、曲線補間の仕組みについて、図解的な視点を交えながらわかりやすく解説します。
数学が得意でない方にも理解していただけるよう、できるだけ直感的な説明を心がけています。
ぜひ最後までお読みいただき、3次ベジェ曲線への理解を深めてみてください。
3次ベジェ曲線とは何か？基本概念と数学的定義
それではまず、3次ベジェ曲線の基本概念と数学的定義について解説していきます。
3次ベジェ曲線（Cubic Bézier Curve）とは、4つの制御点を用いてパラメータ方程式によって定義される3次多項式の曲線のことです。
「3次」という言葉が示すのは、曲線を表す多項式の次数が3であることを意味しています。
4つの制御点をP0、P1、P2、P3とすると、3次ベジェ曲線B(t)は以下のパラメータ方程式で定義されます。
3次ベジェ曲線の基本式：
B(t) = (1-t)³P0 + 3t(1-t)²P1 + 3t²(1-t)P2 + t³P3 （0 ≦ t ≦ 1）
ここでtはパラメータ（0から1の実数）、P0〜P3はそれぞれの制御点の座標を表します。
この式は一見複雑に見えますが、各項の係数（バーンスタイン基底関数と呼ばれます）が曲線の形状にどう貢献しているかを理解すると、非常に美しい対称性を持っていることがわかります。
バーンスタイン基底関数の意味
3次ベジェ曲線の式に登場する4つの係数（(1-t)³、3t(1-t)²、3t²(1-t)、t³）は「バーンスタイン基底関数」と呼ばれます。
これらはそれぞれ、4つの制御点P0〜P3が曲線上の点B(t)に与える「重み（影響度）」を表しています。
各バーンスタイン基底関数の値の例（t=0, 0.5, 1の場合）：
t=0のとき：(1)³=1、0、0、0 → B(0)=P0（始点）
t=0.5のとき：0.125、0.375、0.375、0.125 → 4点の加重平均
t=1のとき：0、0、0、(1)³=1 → B(1)=P3（終点）
t=0のとき曲線は始点P0と一致し、t=1のとき終点P3と一致することが式から確認できます。
t=0.5のとき、P0とP3よりもP1とP2の重みが大きいことがわかり、これが制御点P1・P2が曲線の「中間部分を引き寄せる」ことに対応しています。
バーンスタイン基底関数の4つの値の合計は常に1になるという性質があり、これによりベジェ曲線は制御点の「凸包（コンベックスハル）」の内部に必ず収まるという重要な特性が保証されます。
凸包性（Convex Hull Property）とは
3次ベジェ曲線の重要な数学的性質の一つが「凸包性」です。
凸包とは、複数の点を全て含む最小の凸多角形のことを指します。
ベジェ曲線の凸包性とは、「曲線は必ず4つの制御点が作る凸包の内部か境界上を通る」という性質で、曲線が制御点の外に飛び出すことがないことを保証しています。
この性質は、コンピュータグラフィックスにおいて曲線の当たり判定（衝突検出）や描画範囲の計算を効率化するために非常に重要な役割を果たします。
たとえば、ゲーム開発において弾丸の軌道をベジェ曲線で表現する際、凸包を使って衝突判定の計算量を削減するテクニックが活用されます。
アフィン不変性（Affine Invariance）
3次ベジェ曲線のもう一つの重要な性質が「アフィン不変性」です。
これは、制御点に対して平行移動・回転・スケール変換などのアフィン変換を行うと、曲線もそのまま同じ変換が適用されるという性質です。
実用的に言えば、「制御点を変換すれば曲線も自動的に変換される」ということになり、グラフィックスプログラミングにおいて曲線の変形処理を非常に効率的に行えます。
アフィン不変性はCGソフトやゲームエンジンでオブジェクトを変形・移動する際の計算最適化に不可欠な性質です。
4つの制御点の役割と曲線形状への影響
続いては、4つの制御点それぞれの役割と、曲線形状への具体的な影響について確認していきます。
3次ベジェ曲線はP0・P1・P2・P3の4点によって定義されますが、各点が担う役割は異なっています。
P0とP3（始点・終点アンカーポイント）
P0は曲線の始点で、t=0のときに曲線が通過する点です。
P3は曲線の終点で、t=1のときに曲線が通過する点です。
これら2点は曲線が必ず通過するアンカーポイントであり、曲線の開始位置と終了位置を直接決定します。
P0→P1の方向ベクトルは始点での曲線の接線方向に等しく、P2→P3の方向ベクトルは終点での接線方向に等しいという重要な関係があります。
この性質により、複数の3次ベジェ曲線セグメントをなめらかに接続する際の接線一致（C1連続性）が制御しやすくなっています。
P1とP2（制御点）の役割
P1とP2は曲線が必ずしも通過しない「制御点（コントロールポイント）」です。
P1は始点P0に近い部分の曲線を「引き寄せる」働きを持ち、P2は終点P3に近い部分の曲線を引き寄せます。
これらの位置を変えることで、曲線の曲がり方が変わります。
| 制御点 | 種類 | 曲線との関係 | 影響する曲線部分 |
|---|---|---|---|
| P0 | アンカーポイント（始点） | 曲線上の点 | 始点そのもの |
| P1 | 制御点 | 曲線上にない（通常） | 始点付近の形状・接線方向 |
| P2 | 制御点 | 曲線上にない（通常） | 終点付近の形状・接線方向 |
| P3 | アンカーポイント（終点） | 曲線上の点 | 終点そのもの |
P1とP2が直線P0P3上に並んでいる場合、曲線は直線になります。
P1とP2が同じ側に大きく離れると、曲線は大きく曲がり、S字の反対側（どちらか一方のみに曲がる）形状になります。
P1とP2が逆方向に離れると、S字カーブが形成されます。
この「P1とP2の位置関係がS字カーブか一方向カーブかを決める」という原理を理解することが、意図した曲線形状を描くうえで非常に重要です。
制御点間の距離が曲率に与える影響
制御点の位置だけでなく、P0とP1の距離、P2とP3の距離も曲線の形状に大きく影響します。
P0-P1間の距離が長いほど、始点付近での曲線の曲がり始めが緩やかになります。逆に短いと、始点付近での曲がりが急になります。
同様にP2-P3間の距離は終点付近での曲がり具合を決定します。
この「距離が曲率を決める」という性質がデザインツールの「ハンドルの長さ」という概念に対応しており、ハンドルを長くすると曲線がゆったりと曲がり、短くすると急に曲がるという直感的な操作感覚の根拠となっています。
ド・カステリョのアルゴリズムによる3次ベジェ曲線の計算
続いては、ド・カステリョのアルゴリズムによる3次ベジェ曲線の計算方法について確認していきます。
3次ベジェ曲線の計算には、展開されたパラメータ方程式を直接計算する方法と、ド・カステリョのアルゴリズムを使う方法の2通りがあります。
後者は幾何学的な直感と一致した計算手順であり、数値的安定性が高いため実装に広く使われています。
ド・カステリョアルゴリズムの3次への適用
3次ベジェ曲線へのド・カステリョアルゴリズムの適用は、3回の線形補間（LERP）として行われます。
3次ベジェ曲線のド・カステリョアルゴリズム（パラメータtでの計算）：
【ステップ1：第1段階の線形補間】
Q0 = (1-t)P0 + tP1
Q1 = (1-t)P1 + tP2
Q2 = (1-t)P2 + tP3
【ステップ2：第2段階の線形補間】
R0 = (1-t)Q0 + tQ1
R1 = (1-t)Q1 + tQ2
【ステップ3：第3段階の線形補間】
B(t) = (1-t)R0 + tR1 ←これが曲線上の点
このアルゴリズムを展開すると、先ほどのバーンスタイン基底関数による式と完全に一致することが確認できます。
ド・カステリョアルゴリズムの優れた点は、計算が直感的であること、そしてアルゴリズムの副産物として「曲線の分割」が自然に行えることです。
ステップ1〜3で得られた点（P0、Q0、R0、B(t)、R1、Q2、P3）を使うと、元の曲線をt地点で2つのベジェ曲線に正確に分割できます。これは曲線のクリッピングやLOD（詳細度）制御に活用されています。
行列形式による3次ベジェ曲線の表現
3次ベジェ曲線は行列形式でも表現でき、コンピュータグラフィックスのプログラミングでは行列演算として効率的に計算されることもあります。
3次ベジェ曲線の行列形式（t=[t³ t² t 1]、M＝ベジェ行列、P＝制御点ベクトルとして）：
B(t) = T × M × P
ベジェ行列M：
[-1 3 -3 1]
[ 3 -6 3 0]
[-3 3 0 0]
[ 1 0 0 0]
この行列表現は、GPUでの並列計算に適しており、3Dゲームエンジンや映像レンダリングシステムにおいて大量の曲線を高速に計算する際に活用されています。
曲線の長さの計算（弧長の積分）
3次ベジェ曲線の長さ（弧長）を求めることは、等速度での曲線上の移動やオブジェクトの配置計算などで必要になる場面があります。
しかし、ベジェ曲線の弧長は一般的には閉じた形の解析解が存在せず、数値積分（ガウス・ルジャンドル積分など）によって近似計算されます。
実用的な近似手法として、曲線をn個の直線セグメントに分割してその長さの合計を求める方法があり、分割数を増やすほど精度が上がります。
アニメーションでオブジェクトを曲線に沿って等速で動かしたい場合は、パラメータtと弧長の対応テーブルをあらかじめ計算して使うアーク・レングス・パラメタライゼーションという手法が広く使われています。
3次ベジェ曲線の実装と応用例
続いては、3次ベジェ曲線の実装方法と代表的な応用例について確認していきます。
数学的な原理を理解したうえで、実際のプログラミングやデザインツールでどのように活用されているかを見ていきましょう。
JavaScriptでの3次ベジェ曲線の実装
WebブラウザのCanvas APIでは、3次ベジェ曲線を描くためのbezierCurveTo()メソッドが用意されています。
Canvas APIでの3次ベジェ曲線の描画例：
const ctx = canvas.getContext(‘2d’);
ctx.beginPath();
ctx.moveTo(50, 200); // P0（始点）
ctx.bezierCurveTo(100, 50, 250, 50, 300, 200); // P1, P2, P3
ctx.stroke();
bezierCurveTo()の引数は（P1x, P1y, P2x, P2y, P3x, P3y）であり、P0は直前のmoveTo()またはlineTo()の位置になります。
このAPIを使えば、Web上でのインタラクティブなグラフィクスやゲームにおいて、滑らかな曲線を簡単に描画できます。
CSSのcubic-bezier()とアニメーションへの応用
CSSでは、transition-timing-functionとanimation-timing-functionプロパティにcubic-bezier()関数を使うことで、アニメーションの速度変化（イージング）を3次ベジェ曲線で定義できます。
CSSのcubic-bezier()の使用例：
transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.0);
※引数は(P1x, P1y, P2x, P2y)で、P0は(0,0)、P3は(1,1)に固定されています。
P1y・P2yが0〜1の範囲外になると、バウンドするようなアニメーション効果も作れます。
CSSのeasingは時間軸（横軸）と進行度（縦軸）の関係を定義するもので、P1とP2のY座標が1を超えるとオーバーシュート（行き過ぎてから戻る動き）を表現できます。
ease-in、ease-out、ease-in-outなどのキーワードも、特定のcubic-bezier()値のショートカットです。
フォントとSVGパスへの応用
デジタルフォントの文字形状は、OpenTypeやTrueTypeなどのフォーマットにおいて、3次ベジェ曲線（TrueTypeでは2次ベジェ曲線）によって定義されています。
1文字の輪郭が数個〜数十個のベジェ曲線セグメントの連続で表現されており、どんな解像度でも鮮明に表示できるスケーラブルなフォントが実現されています。
SVGでも3次ベジェ曲線はCコマンドで記述でき、任意の複雑な形状を数学的に正確に表現できます。
これらの応用例を見ると、3次ベジェ曲線がいかに現代のデジタル表現の根幹を支えているかがよくわかるでしょう。
まとめ
本記事では、3次ベジェ曲線の数学的定義から始まり、パラメータ方程式、バーンスタイン基底関数、4つの制御点の役割、ド・カステリョのアルゴリズム、そして実践的な実装例まで幅広く解説してきました。
3次ベジェ曲線の本質は、「4つの制御点によってなめらかな曲線を数学的に定義する」という非常にシンプルなアイデアにあります。
しかしその背後には、バーンスタイン基底関数の美しい対称性や凸包性・アフィン不変性といった優れた数学的性質が備わっており、だからこそグラフィックスからフォント、アニメーションまであらゆる分野で活用されているのです。
計算式の意味を理解することで、デザインツールの操作もプログラミングの実装も、より深い理解と精度で行えるようになります。
本記事を足がかりに、3次ベジェ曲線の数学的な美しさと実用的な強力さをぜひ自分自身の創作活動に活かしてみてください。
