ベジェ曲線

ベジェ曲線は、コンピュータグラフィックスで図形を描画したり、CSSアニメーションに使用したり、その他多くの場所で利用されています。

ベジェ曲線は非常に単純な概念であり、一度学習すれば、ベクターグラフィックスと高度なアニメーションの世界で快適に作業できるようになります。

制御点

ベジェ曲線は、制御点によって定義されます。

制御点は2、3、4、またはそれ以上存在する可能性があります。

例えば、2点の曲線

3点の曲線

4点の曲線

これらの曲線をよく見ると、すぐに次のことに気付くでしょう。

1. 点は必ずしも曲線上にあるとは限りません。これは perfectly normal です。後で曲線がどのように構築されるかを見ていきます。

2. 曲線の次数は、点の数から1を引いた数に等しくなります。 2点の場合は線形曲線（直線）、3点の場合は2次曲線（放物線）、4点の場合は3次曲線になります。

3. 曲線は常に制御点の凸包の内側にあります。

   

この最後の特性により、コンピュータグラフィックスでは交差テストを最適化できます。凸包が交差しない場合、曲線も交差しません。そのため、最初に凸包の交差をチェックすることで、非常に高速な「交差なし」の結果を得ることができます。凸包は、長方形、三角形など（上の図を参照）、曲線よりもはるかに単純な図形であるため、凸包の交差をチェックする方がはるかに簡単です。

描画におけるベジェ曲線の主な価値は、点を移動することで曲線が*直感的に明らかな方法で*変化することです。

以下の例で、マウスを使用して制御点を移動してみてください。

ご覧のとおり、曲線は接線1→2と3→4に沿って伸びています。

少し練習すれば、必要な曲線を得るために点をどのように配置すればよいか明らかになります。また、複数の曲線を接続することで、事実上あらゆるものを得ることができます。

いくつかの例を次に示します。

ド・カステリョのアルゴリズム

ベジェ曲線の数学的な公式がありますが、ド・カステリョのアルゴリズムは数学的定義と同一であり、視覚的にどのように構築されるかを示しているため、少し後で説明します。

最初に3点の例を見てみましょう。

デモを以下に示します。説明は後ほど行います。

制御点（1、2、3）はマウスで移動できます。「再生」ボタンを押して実行します。

3点ベジェ曲線を構築するためのド・カステリョのアルゴリズム

1. 制御点を描画します。上記のデモでは、1、2、3とラベル付けされています。

2. 制御点1→2→3の間に線分を構築します。上記のデモでは、茶色です。

3. パラメータ `t` は `0` から `1` に移動します。上記の例では、ステップ `0.05` が使用されています。ループは `0`、`0.05`、`0.1`、`0.15`、... `0.95`、`1` を繰り返します。

   これらの `t` の値ごとに

   • 各茶色の線分上で、その始点から `t` に比例した距離にある点を取ります。線分が2つあるため、点は2つになります。

     たとえば、`t=0` の場合、両方の点は線分の始点にあり、`t=0.25` の場合は線分の長さの25％の始点に、`t=0.5` の場合は50％（中央）、`t=1` の場合は線分の終点にあります。

   • 点を接続します。下の図では、接続線分は青色で描かれています。

`t=0.25` の場合	`t=0.5` の場合

4. 次に、青色の線分上で、同じ `t` の値に比例した距離にある点を取ります。つまり、`t=0.25`（左の図）の場合は線分の左端の4分の1の終点に、`t=0.5`（右の図）の場合は線分の中央に点があります。上の図では、その点は赤色です。

5. `t` が `0` から `1` に変化するにつれて、`t` の各値は曲線に点を追加します。そのような点の集合がベジェ曲線を形成します。上の図では、赤色で放物線状になっています。

これは3点のプロセスでした。しかし、4点でも同じです。

4点のデモ（点はマウスで移動できます）

4点のアルゴリズム

• 制御点を線分で接続します：1→2、2→3、3→4。3つの茶色の線分ができます。
• `0` から `1` の間隔の各 `t` について
  • これらの線分上で、始点から `t` に比例した距離にある点を取ります。これらの点は接続されているため、2つの緑色の線分ができます。
  • これらの線分上で、`t` に比例した点を取ります。1つの青色の線分ができます。
  • 青色の線分上で、`t` に比例した点を取ります。上記の例では、赤色です。
• これらの点が一緒になって曲線を形成します。

このアルゴリズムは再帰的であり、任意の数の制御点に一般化できます。

N個の制御点が与えられた場合

1. 最初にN-1個の線分を得るために、それらを接続します。
2. 次に、`0` から `1` までの各 `t` について、各線分上で始点から `t` に比例した距離にある点を取り、それらを接続します。N-2個の線分ができます。
3. 点が1つだけになるまで、ステップ2を繰り返します。

これらの点が曲線を形成します。

例を実行して一時停止し、線分と曲線がどのように構築されるかを明確に確認してください。

`y=1/t` のような曲線

ジグザグの制御点も正常に機能します

ループを作成することも可能です

滑らかでないベジェ曲線（これも可能です）

アルゴリズムの説明で不明な点がある場合は、上記の実際の例を見て、曲線がどのように構築されるかを確認してください。

アルゴリズムは再帰的であるため、任意の次数のベジェ曲線を構築できます。つまり、5、6、またはそれ以上の制御点を使用できます。しかし、実際には多くの点はあまり役に立ちません。通常は2〜3点を取り、複雑な線には複数の曲線を接着します。こうすることで、開発と計算が簡素化されます。

数学

ベジェ曲線は、数学的公式を使用して記述できます。

見てきたように、実際にそれを知る必要はありません。ほとんどの人はマウスで点を移動することで曲線を描画します。しかし、数学に興味がある人のために、ここに示します。

制御点 `P<sub>i</sub>` の座標が与えられた場合：最初の制御点の座標は `P<sub>1</sub> = (x<sub>1</sub>, y<sub>1</sub>)`、2番目の制御点の座標は `P<sub>2</sub> = (x<sub>2</sub>, y<sub>2</sub>)` などとなり、曲線の座標はセグメント `[0,1]` からのパラメータ `t` に依存する式によって記述されます。

• 2点曲線の式

  P = (1-t)P1 + tP2

• 3つの制御点の場合

  P = (1−t)2P1 + 2(1−t)tP2 + t2P3

• 4つの制御点の場合

  P = (1−t)3P1 + 3(1−t)2tP2 +3(1−t)t2P3 + t3P4

これらはベクトル方程式です。言い換えれば、`P` の代わりに `x` と `y` を入れて、対応する座標を取得できます。

たとえば、3点曲線は、次のように計算された点 `(x,y)` によって形成されます。

• x = (1−t)2x1 + 2(1−t)tx2 + t2x3
• y = (1−t)2y1 + 2(1−t)ty2 + t2y3

`x<sub>1</sub>`、`y<sub>1</sub>`、`x<sub>2</sub>`、`y<sub>2</sub>`、`x<sub>3</sub>`、`y<sub>3</sub>` の代わりに、3つの制御点の座標を入れ、`t` が `0` から `1` に移動するにつれて、`t` の各値に対して曲線の `(x,y)` が得られます。

たとえば、制御点が `(0,0)`、`(0.5, 1)`、`(1, 0)` の場合、方程式は次のようになります。

• x = (1−t)2 * 0 + 2(1−t)t * 0.5 + t2 * 1 = (1-t)t + t2 = t
• y = (1−t)2 * 0 + 2(1−t)t * 1 + t2 * 0 = 2(1-t)t = –2t2 + 2t

ここで、`t` が `0` から `1` に変化するにつれて、各 `t` に対する値 `(x,y)` の集合が、そのような制御点の曲線を形成します。

まとめ

ベジェ曲線は、その制御点によって定義されます。

ベジェ曲線の2つの定義を見てきました

1. 描画プロセスを使用する: ド・カステリョのアルゴリズム。
2. 数式を使用する。

ベジェ曲線の優れた特性

• 制御点をマウスで動かすことで、滑らかな線を描くことができます。
• 複雑な形状は、複数のベジェ曲線で構成できます。

使用方法

• コンピュータグラフィックス、モデリング、ベクターグラフィックエディターで使用されます。フォントはベジェ曲線で記述されます。
• Web開発では、CanvasやSVG形式のグラフィックに使用されます。ちなみに、上記の「ライブ」サンプルはSVGで記述されています。実際には、異なるポイントをパラメータとして与えられた単一のSVGドキュメントです。別のウィンドウで開いてソースを確認できます: demo.svg。
• CSSアニメーションでは、アニメーションのパスと速度を記述するために使用されます。