ベジェ曲線の定義

ベジェ曲線とは

フランスの自動車メーカーの技術者であるBezier氏が考案した曲線で、割と直観的に扱える曲線です。
この曲線は制御点と呼ばれる点で制御します。

$n$ 次ベジェ曲線は $n - 1$ 個の制御点を持ち、 $n$ はパラメータ $t$ の次数です。
よく用いられるのは、 $2$ 次ベジェ曲線、 $3$ 次ベジェ曲線です。
例えば、 $2$ 次ベジェ曲線なら、制御点は $3$ つあり、 $3$ 次ベジェ曲線なら、制御点は $4$ つあります。

なお、ベジェ曲面については本記事では説明しません。(ベジェ曲線を理解していれば、分かればわかると思います)

定義は以下のようになります。
制御点を ${\bf B}_0,{\bf B}_1,\ldots,{\bf B}_{N-1}$ とすると、ベジェ曲線は、

$\begin{eqnarray} {\bf P}(t)=\sum_{i=0}^{N-1}{\bf B}_iJ_{N-1,i}(t) \end{eqnarray}$

と表現されます。ここで、 $J_{n, i}(t)$ はバーンスタイン基底関数です。

$\begin{eqnarray} J_{n, i}(t)=\begin{pmatrix}n\\ i\end{pmatrix}t^i(1-t)^{n-i} \end{eqnarray}$

$t$ が $0$ から $1$ まで変化する時、 ${\bf B}_0$ と ${\bf B}_{N−1}$ を両端とするベジェ曲線が得られます。
一般には両端以外の制御点は通りません。

ベジェ曲線の定義って曲線をイメージしにくいですよね。
ってことで、手作業の作図法を説明します。
再帰的にベジェ曲線上の点を求めるわけですが、この「再帰的」というのがプログラムに向いているため、
今から作図する方法で、プログラムも組まれていることが多いように思います。
3次ベジェ曲線を具体的に作図することにより、イメージを深めましょう。
制御点が ${\bf B}_0=(0,0),{\bf B}_1=(0,0.5),{\bf B}_2=(0.5, 1),{\bf B}_3=(1,1)$ で $t=0.5$ のベジェ曲線上の点 ${\bf P}(t)$ を求めてみます。
1. ${\bf B}_0,{\bf B}_1$ を $t:(1-t)$ に分割する点 ${\bf C}_0$ を求めます。
2. ${\bf B}_1,{\bf B}_2$ を $t:(1-t)$ に分割する点 ${\bf C}_1$ を求めます。
3. ${\bf B}_2,{\bf B}_3$ を $t:(1-t)$ に分割する点 ${\bf C}_2$ を求めます。
4. ${\bf C}_0,{\bf C}_1$ を $t:(1-t)$ に分割する点 ${\bf D}_0$ を求めます。
5. ${\bf C}_1,{\bf C}_2$ を $t:(1-t)$ に分割する点 ${\bf D}_1$ を求めます。
6. ${\bf D}_0,{\bf D}_1$ を $t:(1-t)$ に分割する点が ${\bf P}(t)$ です。
1から6までの手順を見てわかるとおり、再帰的な処理になっています。

f:id:olj611:20220414111349p:plain:w400

$t$ を $0$ から $1$ まで $0.1$ 刻みでベジェ曲線上の点を表示すると、以下のようになります。

f:id:olj611:20220414111614p:plain:w400

作図と定義を照らし合わせる

3次ベジェ曲線の作図法と定義が一致することを確認してみます。
点 ${\bf C}_0$ は ${\bf B}_0,{\bf B}_1$ を $t:(1-t)$ に分割するので、

$\begin{eqnarray} {\bf C}_0=(1-t){\bf B}_0+t{\bf B}_1 \end{eqnarray}$

となります。
同様に、点 ${\bf C}_1,{\bf C}_2$ は以下のようになります。

$\begin{eqnarray} {\bf C}_1=(1-t){\bf B}_1+t{\bf B}_2\\ {\bf C}_2=(1-t){\bf B}_2+t{\bf B}_3 \end{eqnarray}$

また、同様に点 ${\bf D}_0,{\bf D}_1$ は以下のようになります。

$\begin{eqnarray} {\bf D}_0&=&(1-t){\bf C}_0+t{\bf C}_1\\ &=&(1-t)((1-t){\bf B}_0+t{\bf B}_1)+t((1-t){\bf B}_1+t{\bf B}_2)\\ &=&(1-t)^2{\bf B}_0+2t(1-t){\bf B}_1+t^2t{\bf B}_2\\ {\bf D}_1&=&(1-t){\bf B}_2+t{\bf B}_3\\ &=&(1-t)((1-t){\bf B}_1+t{\bf B}_2)+t((1-t){\bf B}_2+t{\bf B}_3)\\ &=&(1-t)^2{\bf B}_1+2t(1-t){\bf B}_2+t^2t{\bf B}_3\\ \end{eqnarray}$

最後に、 ${\bf P}(t)$ は以下のようになります。

$\begin{eqnarray} {\bf P}(t)&=&(1-t){\bf D}_0+t{\bf D}_1\\ &=&(1-t)((1-t)^2{\bf B}_0+2t(1-t){\bf B}_1+t^2t{\bf B}_2)+t((1-t)^2{\bf B}_1+2t(1-t){\bf B}_2+t^2t{\bf B}_3)\\ &=&(1-t)^3{\bf B}_0+3t(1-t)^2{\bf B}_1+3t^2(1-t){\bf B}_2+t^3{\bf B}_3\\ \end{eqnarray}$

以上より、3次ベジェ曲線の作図法と定義が一致することが確認できました。

参考リンク

ベジェ曲線 - Wikipedia
【JavaScript】ベジェ曲線を使ったアニメーション【Canvas】(私が以前Qiitaに書いた記事)