ベジェ曲線を理解する

木瓜丸です。

みなさん、イラレ（私は金がないのでInkscape使いですが）とかでベジェ曲線使いますよね？使い始めた頃は制御点の置き方がわからなくてちんぷんかんぷんだった記憶があります。

この度開発しているアプリで、任意の関数をSVGで表現したくなったので、ベジェ曲線の原理を理解すべくまとめてみます。

2次ベジェ曲線

ベジェ曲線は、かんたんに言うと媒介変数表示で曲線を表しただけのものです。

まずは直線を引いてみます。2点 $P_0=\left( \begin{array}{c} x_0 \\ y_0 \\ \end{array} \right)$ , $P_1=\left( \begin{array}{c} x_1 \\ y_1 \\ \end{array} \right)$ として、2点を結ぶ直線は、

\begin{align*} & L(t) = (1-t)P_0 + tP_1 (0 \leq t \leq 1)\\ & \Longleftrightarrow \left( \begin{array}{c} X\\ Y\\ \end{array} \right)=(1-t)\left( \begin{array}{c} x_0\\ y_0\\ \end{array} \right) + t\left( \begin{array}{c} x_1\\ y_1\\ \end{array} \right) \end{align*}

と表せます。

では、ここで制御点 $P_2=\left( \begin{array}{c} x_2 \\ y_2 \\ \end{array} \right)$ なるものを導入してみましょう。 $P_0$ と $P_2$ の間を補間しながら、同時に $P_2$ と $P_1$ を補間する曲線を求めます。

\begin{align*} & B_0(t) = (1-t)P_0 + tP_2 \\ & B_1(t) = (1-t)P_2 + tP_1 \\ & L(t) = (1-t)B_0(t) + tB_1(t)\\ & \Longleftrightarrow \left( \begin{array}{c} X\\ Y\\ \end{array} \right)=(1-t)\left( \begin{array}{c} (1-t)x_0 + t(x_2)\\ (1-t)y_0 + t(y_2)\\ \end{array} \right) + t\left( \begin{array}{c} (1-t)x_2 + t(x_1)\\ (1-t)y_2 + t(y_1)\\ \end{array} \right) \end{align*}

こうするとtの次数が2の曲線の式が出来上がりました。これを2次ベジェ曲線といいます。

3次ベジェ曲線

今度は制御点を2つにしてみます。2つめの制御点 $P_3=\left( \begin{array}{c} x_3 \\ y_3 \\ \end{array} \right)$ としましょう。今回は $P_0$ と $P_2$ 、 $P_2$ と $P_1$ で得られる2次ベジェ曲線 $L_0(t)$ と、 $P_0$ と $P_3$ 、 $P_3$ と $P_1$ で得られる曲線 $L_1(t)$ を補間します。

まずは2つのベジェ曲線を出しましょう。

\begin{align*} & B_0(t) = (1-t)P_0 + tP_2 \\ & B_1(t) = (1-t)P_2 + tP_1 \\ & B_2(t) = (1-t)P_0 + tP_3 \\ & B_3(t) = (1-t)P_3 + tP_1 \\ & L_0(t) = (1-t)B_0(t) + tB_1(t) \\ & L_1(t) = (1-t)B_2(t) + tB_3(t) \\ \end{align*}

$L_0$ と $L_1$ を補間してみましょう。

\begin{align*} & L(t) = (1-t)L_0(t) + tL_1(t) \\ \end{align*}

めんどくさいので展開はしないですが、3次の曲線が得られることがわかると思います。こんなかんじで制御点が増えれば増えるほど高次のベジェ曲線になっていきます。

感想（ぼやき）

Wikipediaの数学系の記事マジで読みづらいんだけどあいつらどんな気持ちで記事書いとるんや

参考

POSTD『一から学ぶベジェ曲線』