Free Press

これらの曲線をよく見てみると、すぐに気づくことがあります：

1. 点は常に曲線上にあるとは限りません。 2 点の場合は 1 次曲線（直線）、3 点の場合は 2 次曲線（放物線）、4 点の場合は 3 次曲線になります。

2. 曲線は常に制御点の凸包の中にある：

   

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

ベジェ曲線の描画における主な価値 – ポイントを移動することによって曲線は直観的に明らかな方法で変化します。

下の例でマウスを使って制御点を動かしてみましょう。

気づいたように、曲線は接線 1 → 2 と 3 → 4 に沿って延びています。 いくつかの例を挙げてみよう。

De Casteljauのアルゴリズム

ベジェ曲線には数式があるが、それは後回しにして、De Casteljauのアルゴリズムは数学的定義と同じで、視覚的にその組み立て方を示しているからである。

まず、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に比例する距離にある点を取る。 例えば、t=0はセグメントの始点に、t=0.25はセグメントの始点から25%の長さに、t=0.5は50%（中間）、t=1はセグメントの終点に、それぞれ点があることになります。 下図では接続するセグメントを青く塗りつぶした。

For t=0.25	For t=0.5

1. さて、青いセグメントでは、tの同じ値に比例する距離上の点を取る。 つまり、t=0.25 (左図) ではセグメントの左4分の1の端に、t=0.5 (右図) ではセグメントの真ん中に点を取ることになります。

2. tが0から1まで続いているので、tの値によって曲線に1点ずつ追加されることになる。 このような点の集合がベジェ曲線を形成する。 上の写真では赤く放物線を描いています。

以上、3点に対する処理でした。

4点のデモ（マウスで移動可能）：

4点のアルゴリズム：

• 制御点をセグメントで接続します。 1 → 2, 2 → 3, 3 → 4.
• 0から1までの区間でtごとに:
  • これらのセグメント上に、先頭からtに比例した距離の点を取ります。 これらの点を結ぶと、2つの緑の線分ができる。
  • これらの線分上に、tに比例する点を取る。 7173>
  • 青い線分に、tに比例する点をとります。
• これらの点を合わせて曲線を形成する。

このアルゴリズムは再帰的で、制御点の数に関係なく一般化することができる。

制御点N個が与えられたとき：

1. 我々はそれらを接続して、最初にN-1セグメントを得る。
2. 次に0から1までの各tに対して、各セグメント上の点をtに比例した距離で取り、それらを接続する。
3. 点が1つになるまでステップ2を繰り返す。

   これらの点が曲線を作る。

   セグメントと曲線がどう作られるかをはっきり見るために例を実行したり一時停止したりする。

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

   ジグザグ制御点もうまく機能します：

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

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

   アルゴリズムの説明で不明な点があれば、上記のライブ例で曲線がどのように作られるかを見てください。

   アルゴリズムは再帰的であるため、5、6、またはそれ以上の制御点を使用して、任意の順序でベジェ曲線を構築することができます。 しかし実際には多くの点はあまり役に立たない。 通常は2-3点をとり、複雑な線はいくつかの曲線を接着する。

   与えられた点から曲線を描くには？

   ベジェ曲線を指定するには、制御点を用います。

   時には別のタスクがあります: 複数の点を通して曲線を描き、すべての点が1つの滑らかな曲線になるようにすることです。 この作業は補間と呼ばれ、ここでは扱わない。

   このような曲線にはラグランジュ多項式などの数学的公式がある。

   数学

   ベジェ曲線は数式で記述することができる

   見たように、実際には知る必要はなく、ほとんどの人はマウスでポイントを動かして曲線を描くだけです。

   制御点 Pi の座標が与えられると、最初の制御点の座標は P1 = (x1, y1)、2番目は P2 = (x2, y2) というように、曲線の座標はセグメント からのパラメータ 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

   x1, y1, x2, y2, x3, y3の代わりに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. 描画処理を使用する。

   ベジェ曲線の良い性質：

   • マウスで制御点を移動して滑らかな線を描くことができる。
   • 複雑な図形はいくつかのベジェ曲線で作ることができる。

   用途：

   • コンピュータグラフィック、モデリング、ベクトルグラフィック編集で使用。 フォントはベジェ曲線によって記述されます。
   • Web 開発では – Canvas および SVG 形式のグラフィックに使用します。 ちなみに、上記の「ライブ」の例はSVGで書かれています。 実際には 1 つの SVG 文書で、パラメータとしてさまざまな点が与えられます。 別ウィンドウで開いてソースを見ることができます: demo.svg.
   • CSS animation でアニメーションのパスと速度を記述するために使用されます。