- 目次
- 絵描き
- 理解
- まとめ
- センス
【絵描き】実際にベジェ曲線を使う技法
ベジェ曲線ついて
ベクター形式とは
【ベクター形式】画像やコンピュータグラフィックを、座標や数学的な計算による図形として表現する方式のこと。
（画像形式の例）PDF, SVG, EPSなど
ベジェ曲線はベクター形式の代表的な手法である。
【発案者】ベジェ曲線の成り立ち
この曲線の理論は、フランス自動車メーカーのド・カステリョとピエール・ベジェが独立に考案しました。
1900年の真ん中ごろのお話です。
ベジェ曲線のパーツ
（アンカーポイント・ハンドル・セグメント）
ベジェ曲線
アンカーポイントとハンドルで、カーブを描く。
アンカーポイントはカーブの両端点のことある。
ハンドルはアンカーポイントでカーブの曲がり具合を調整するものである。
各部の名称.
アンカーポイント…点AとB。
ハンドル…図では点Bのハンドルを線分BHとして表す。
セグメント…アンカーポイントを結ぶカーブのこと。
制御点…点AとB, Hの総称。
【絵描き】Illustratorのベジェ曲線を使おう
【ペンツール機能】線分を描く
Illustratorの【ペンツール】機能で線分を引いてみよう。
線分の描き方
アンカーポイントを2点打つと、線分が描ける。
作業. ※iPad版Illustrator
①の場所をクリック
②の場所をクリックする
【ペンツール機能】カーブを描く
Illustratorの【ペンツール】機能で曲線カーブを引いてみよう。
カーブの描き方
アンカーポイントを打つと同時にマウスをドラッグすることでハンドルが現れる。ハンドルを調整することで、カーブを描くことができる。
始点と終点のそれぞれでハンドルを指定することができる。
作業. ※iPad版Illustrator
■終点のハンドルの調整
①の場所をクリック
②の場所をクリック、そのままドラッグしてハンドルを調整する
■始点と終点のハンドルの調整
①の場所をクリック、そのままドラッグしてハンドルを調整する
②の場所をクリック、そのままドラッグしてハンドルを調整する
【理解】ベジェ曲線の数学的解説
ベジェ曲線の数式について
ベジェ曲線の定義
$\displaystyle \mathbf{P}(t) = \sum_{k=0}^{n} {}_n \mathrm{C}_k (1-t)^{n-k}t^k \mathbf{P}_k$
定義（Bezier Curve）
平面内の点 $\mathbf{P}_{0}$, $\mathbf{P}_{1}$, $\cdots$ , $\mathbf{P}_{n}$ をとる. $0 \leqq t \leqq 1$ について,
$\mathbf{P}(t)$ $\displaystyle = \sum_{k=0}^{n} {}_n \mathrm{C}_k (1-t)^{n-k}t^k \mathbf{P}_k$
を定め, この軌跡をベジェ曲線という.
$\mathbf{P}_{0}$ $=(0,0)$,
$\mathbf{P}_{1}$ $=(1,1)$,
$\mathbf{P}_{2}$ $=(2,0)$
とします。
$\mathbf{P}(t)$
$={}_2 \mathrm{C}_0 (1-t)^{2} \mathbf{P}_0$ $+{}_2 \mathrm{C}_1 (1-t)t \mathbf{P}_1$ $+{}_2 \mathrm{C}_2 t^2 \mathbf{P}_2$
$=(2t, -2t^2+2t)$
です。これが $2$ 次のベジェ曲線です。
ド・カステリョのアルゴリズム
$\mathbf{P}_{i, j}(t) = (1-t) \mathbf{P}_{i, j-1}(t) + t \mathbf{P}_{i+1, j-1}(t)$, $1 \leqq j \leqq n$, $0 \leqq i \leqq n-j$
ド・カステリョのアルゴリズムと呼ばれるベジェ曲線のアルゴリズムを理解してみよう。
De Casteljauのアルゴリズム
平面内の点 $\mathbf{P}_{0,0}$, $\mathbf{P}_{1,0}$, $\cdots$ , $\mathbf{P}_{n,0}$ をとる. $0 \leqq t \leqq 1$ を固定する.
$1 \leqq j \leqq n$, $0 \leqq i \leqq n-j$ について漸化式
$\mathbf{P}_{i, j}(t) = (1-t) \mathbf{P}_{i, j-1}(t) + t \mathbf{P}_{i+1, j-1}(t)$
によって $\mathbf{P}_{0, n}(t)$ を定める. $\mathbf{P}_{i,0}(t)=\mathbf{P}_{i,0}$ とする.
$\mathbf{P}_{0,n}(t)$ の $0 \leqq t \leqq 1$ の範囲における軌跡は $n$ 次ベジェ曲線となる.
解説.
$n$ 次ベジェ曲線を定める方程式の定義は次の式だった.
$\displaystyle \sum_{k=0}^{n} {}_n \mathrm{C}_k (1-t)^{n-k}t^k \mathbf{P}_{k,0}$
ここで, 便宜上, $b_{k,j}(t) = {}_j \mathrm{C}_k (1-t)^{j-k}t^k$ とする.
$j$ に関して, $\mathbf{P}_{i, j}(t)$ $\displaystyle =\sum_{k=i}^{i+j} b_{k-i,j} \mathbf{P}_{k,0}$ となることを仮定して, $j+1$ のときも, この形になることを示す.
実際に, $j=1$ のときは,
$\mathbf{P}_{i, 1}(t)$ $= (1-t) \mathbf{P}_{i, 0} + t \mathbf{P}_{i+1, 0}$ $=b_{0,1}\mathbf{P}_{i, 0} + b_{1,1}\mathbf{P}_{i+1, 0}$ $=b_{0,j}\mathbf{P}_{i, 0} + b_{1,j}\mathbf{P}_{i+1, 0}$
となり, 仮定を満たす.
$j+1$ のとき, $\mathbf{P}_{i, j+1}(t)$ を計算する.
$\mathbf{P}_{i, j+1}(t)$ $= (1-t) \mathbf{P}_{i, j} (t)+ t \mathbf{P}_{i+1, j}(t)$
であり, $\mathbf{P}_{i, j}(t)$ と $\mathbf{P}_{i+1, j}(t)$ について仮定を適用する.
$\displaystyle \mathbf{P}_{i, j}(t)=\sum_{k=i}^{i+j} b_{k-i,j} \mathbf{P}_{k,0}$
$\displaystyle \mathbf{P}_{i+1, j}(t) = \sum_{k=i+1}^{(i+1)+j} b_{k-(i+1),j} \mathbf{P}_{k,0}$
$(1-t) \mathbf{P}_{i, j} (t)+ t \mathbf{P}_{i+1, j}(t)$
$\displaystyle =(1-t)\sum_{k=i}^{i+j} b_{k-i,j} \mathbf{P}_{k,0}$ $\displaystyle +t\sum_{k=i+1}^{(i+1)+j} b_{k-(i+1),j} \mathbf{P}_{k,0}$
この式は
$(1-t)b_{0,j} \mathbf{P}_{i,0}$ $\displaystyle +\sum_{k=i+1}^{i+j} ((1-t)b_{k-i,j}+tb_{k-(i+1),j}) \mathbf{P}_{k,0}$ $\displaystyle + tb_{j,j} \mathbf{P}_{i+j+1,0}$
のように変形できる.
$b_{k-i,j}$ $\displaystyle = {}_j \mathrm{C}_{k-i}(1-t)^{j+i-k}t^{k-i}$
$b_{k-(i+1),j}$ $\displaystyle = {}_j \mathrm{C}_{k-i-1}(1-t)^{j+i-k+1}t^{k-i-1}$
また, ${}_j \mathrm{C}_{k-i} + {}_j \mathrm{C}_{k-i-1}$ $= {}_{j+1} \mathrm{C}_{k-i}$ であることを使えば,
$(1-t)b_{k-i,j}+tb_{k-(i+1),j}$ $=b_{k-i, j+1}$
が得られる. よって,
$\mathbf{P}_{i, j+1}(t)$ $=(1-t)b_{0,j} \mathbf{P}_{i,0}$ $\displaystyle +\sum_{k=i+1}^{i+j}b_{k-i, j+1} \mathbf{P}_{k,0}$ $\displaystyle + tb_{j,j} \mathbf{P}_{i+j+1,0}$
となる.
$(1-t)b_{0,j}=b_{0,j+1}$
$tb_{j,j}=b_{j+1,j+1}$
であり,
$\mathbf{P}_{i, j+1}(t)$ $=b_{0,j+1}\mathbf{P}_{i, 0}$ $\displaystyle +\sum_{k=i+1}^{i+j}b_{k-i, j+1} \mathbf{P}_{k,0}$ $\displaystyle + b_{j+1,j+1} \mathbf{P}_{i+j+1,0}$ $\displaystyle =\sum_{k=i}^{i+j+1}b_{k-i, j+1} \mathbf{P}_{k,0}$
を得る. したがって,
$\mathbf{P}_{i, j+1}(t)$ $\displaystyle =\sum_{k=i}^{i+(j+1)}b_{k-i, j+1} \mathbf{P}_{k,0}$
となり, $j+1$ のときも仮定が正しいことが示された.
ゆえに, $j=n$, $i=0$ のときを考えれば,
$\mathbf{P}_{0, n}(t)$ $\displaystyle =\sum_{k=0}^{n}b_{k, n} \mathbf{P}_{k,0}$ $\displaystyle =\sum_{k=0}^{n}{}_n \mathrm{C}_k (1-t)^{n-k}t^k \mathbf{P}_{k,0}$
となり, 漸化式で得られる $\mathbf{P}_{0, n}(t)$ の軌跡は $n$ 次ベジェ曲線であることが分かった.
$\mathbf{P}_{0,0}$, $\mathbf{P}_{1,0}$, $\mathbf{P}_{2,0}$ の3点をとります。
$j=1$ のとき,
$\mathbf{P}_{0,1}$ $=(1-t)\mathbf{P}_{0,0}$ $+t\mathbf{P}_{1,0}$,
$\mathbf{P}_{1,1}$ $=(1-t)\mathbf{P}_{1,0}$ $+t\mathbf{P}_{2,0}$
です。
$j=2$ のとき,
$\mathbf{P}_{2,0}$ $=(1-t)\mathbf{P}_{0,1}$ $+t\mathbf{P}_{1,1}$ $=(1-t)^2\mathbf{P}_{0,0}$ $+2t(1-t)\mathbf{P}_{1,0}$ $+t^2\mathbf{P}_{0,2}$
で, $2$ 次のベジェ曲線になっています。
De Casteljauのアルゴリズムの直感的説明
ベジェ曲線が描かれる仕組み（アルゴリズム）を紹介します。
ベジェ曲線の数式の直感的に理解する
ベジェ曲線の定義
定義
平面内の点 $\mathbf{P}_0$, $\mathbf{P}_1$, $\ldots$ , $\mathbf{P}_n$ と $0 \leqq t \leqq 1$ について，次の式で表される曲線を $n$次ベジェ曲線という。
$$\displaystyle \mathbf{P}(t) = \sum_{k=0}^{n} {}_n \mathrm{C}_k (1-t)^{n-k}t^k \mathbf{P}_k$$
３次ベジェ曲線で説明をします。４点 $\mathbf{P}_0$, $\mathbf{P}_1$, $\mathbf{P}_2$, $\mathbf{P}_3$ が制御点に該当します。
ドカステリョのアルゴリズムを数式で表して、ベジェ曲線の方程式を求めます。
ド・カステリョのアルゴリズム
まず、ベジェ曲線が描かれるアルゴリズムの直感的な理解をします。
①制御点の順番を決める
次のベジェ曲線を考えます。アンカーポイントは $\mathbf{P}_0$ と $\mathbf{P}_3$ が該当します。
制御点の順番を $\mathbf{P}_0$→$\mathbf{P}_1$→$\mathbf{P}_{2}$→$\mathbf{P}_3$ とします。
②同じ比に内分する点の作図
隣り合う制御点を $m:n$ に内分する点を作図します。
今回は、３つの点ができます。
③同じ比に内分する点の作図
いまできた３点について，さらに隣り合う点同士を，また $m:n$ に内分する点を作図します。
今回は、２つの点ができます。
④同じ比に内分する点の作図
いまできた２点について，さらに隣り合う点同士を，また $m:n$ に内分する点を作図します。
この作業を繰り返した結果、１点だけになりました。
この最後の点がベジェ曲線上の点と一致します。
⑤他の点も作図
他の比でも同じ作業をしていって、たくさん点を作ったら、その集まりがベジェ曲線になります。
$m:n = 1:0$ のとき、はじめのアンカーポイントの $\mathrm{P}_0$ です。
$m:n = 0:1$ のとき、ゴールのアンカーポイントの $\mathrm{P}_1$ です。
ベジェ曲線の数学の理解
先の直感的な作図に照らし合わせて、ベジェ曲線の定義式を作っていきましょう。
①図と式を対応させる
$\mathbf{P}_0$ と $\mathbf{P}_3$ がベジェ曲線の端点（アンカーポイント）になるべき点です。
イラストレータでは、線分 $\mathbf{P}_0 \mathbf{P}_1$ と $\mathbf{P}_3 \mathbf{P}_2$ がハンドルと対応する。
②制御点を結ぶ線分の内分点をつくる
$\mathbf{P}_0$→$\mathbf{P}_1$ と $\mathbf{P}_1$→$\mathbf{P}_2$， $\mathbf{P}_2$→$\mathbf{P}_3$ の間をそれぞれ $m: n = t : 1-t$ に内分する点を $\mathbf{P}_{1,0}(t)$， $\mathbf{P}_{1,1}(t)$，$\mathbf{P}_{1,2}(t)$ とします：
- $\mathbf{P}_{1,0}(t) = (1-t) \mathbf{P}_0 + t\mathbf{P}_1$
- $\mathbf{P}_{1,1}(t) = (1-t) \mathbf{P}_1 + t\mathbf{P}_2$
- $\mathbf{P}_{1,2} (t)= (1-t) \mathbf{P}_{2} + t\mathbf{P}_3$
③更に内分点をつくる
いまできた点について，$\mathbf{P}_{1,0}$→$\mathbf{P}_{1,1}$ と $\mathbf{P}_{1,1}$→$\mathbf{P}_{1,2}$ の間をそれぞれ，また $m: n = t : 1-t$ に内分する点を $\mathbf{P}_{2,0}(t), \mathbf{P}_{2,1}(t)$ とします：
- $\mathbf{P}_{2,0}(t) = (1-t) \mathbf{P}_{1,0} + t\mathbf{P}_{1,1}$
- $\mathbf{P}_{2,1}(t) = (1-t) \mathbf{P}_{1,1} + t\mathbf{P}_{1,2}$
④もういちど繰り返す
さらに，点$\mathbf{P}_{2,0}(t)$ → $\mathbf{P}_{2,1}(t)$ の間を結んで，また，$m: n = t : 1-t$ に内分する点 $\mathbf{P}(t)$ を決める：
- $\mathbf{P}(t) = (1-t) \mathbf{P}_{2,0} + t\mathbf{P}_{2,1}$
⑤式を整理する
点 $\mathbf{P}_{2,0}(t)$ と $\mathbf{P}_{2,1}(t)$ は，今までの式を組み合わせると，初めの制御点 $\mathbf{P}_0$, $\mathbf{P}_1$, $\mathbf{P}_2$, $\mathbf{P}_3$ で表すことができる。$\mathbf{P}(t)$ をはじめの制御点で表すと，
$\mathbf{P}(t) = (1-t) \mathbf{P}_{2,0} + t\mathbf{P}_{2,1}$
$= (1-t)^3 \mathbf{P}_0$ $+3(1-t)^2 t \mathbf{P}_1$ $+3(1-t) t^2 \mathbf{P}_2$ $+ t^3 \mathbf{P}_3$
$\displaystyle = \sum_{k=0}^{3} {}_3 \mathrm{C}_k \ (1-t)^{3-k} \ t^k \ \mathbf{P}_k$
となる。
実数 $t(0 \leqq 0 \leqq 1)$ を１つ決めて，内分比 $m:n=t:(1-t)$となるように作った点が $\mathrm{P}(t)$ であった。
$t$ を0から1に動かしたときの軌跡である方程式 $\mathrm{P}(t)$ が３次ベジェ曲線である。
⑥一般化する
以上により, 一般の $n$ 次ベジェ曲線の数式は次のとおりである：
$$\displaystyle \mathbf{P}(t) = \sum_{k=0}^{n} {}_n \mathrm{C}_k (1-t)^{n-k}t^k \mathbf{P}_k$$
ベジェ曲線の性質について
ベジェ曲線で描いた図は拡大縮小しても明瞭である
ベジェ曲線は有限個の制御点によってのみ定義される。したがって、拡大縮小をしても制御点の相対的な位置さえ変わらなければ、実際の画像は計算（アルゴリズム）によって補完される。
ゆえに、ベジェ曲線で描いた図は拡大縮小しても明瞭なままである。
これはベクター形式の画像の特徴である。
$\mathbf{P}(t)$ $= (1-t)\mathbf{P}_{0}$ $+t\mathbf{P}_{1}$, $0 \leqq t \leqq 1$
（1次ベジェ曲線は線分である）
2点で定義される $1$ 次ベジェ曲線が線分であることを確かめてみよう。
例
2点 $\mathbf{P}_{0}$ と $\mathbf{P}_{1}$ を制御点とする $1$ 次ベジェ曲線は
$\mathbf{P}(t)$ $= (1-t)\mathbf{P}_{0}$ $+t\mathbf{P}_{1}$, $0 \leqq t \leqq 1$
であり, これは制御点を結ぶ線分である.
証明.
ベジェ曲線の定義式は次であった.
$0 \leqq t \leqq 1$ について,
$\mathbf{P}(t)$ $\displaystyle = \sum_{k=0}^{n} {}_n \mathrm{C}_k (1-t)^{n-k}t^k \mathbf{P}_k$.
なお, $\mathbf{P}(0) = \mathbf{P}_0$, $\mathbf{P}(1) = \mathbf{P}_n$ である.
$n=1$ のとき, $0 \leqq t \leqq 1$ について,
$\mathbf{P}(t)$ $= (1-t)\mathbf{P}_{0}$ $+t\mathbf{P}_{1}$
である.
ゆえに, $1$ 次ベジェ曲線は, 制御点を結ぶ線分である.
$\mathbf{P}_0 = (0,0)$
$\mathbf{P}_1 = (1,1)$
のとき,
$\mathbf{P}(t)$ $=(1-t)(0,0)$ $+ t(1,1)$ $= (t,t)$
である。
これは, $0 \leqq t \leqq 1$ のときに, $\mathbf{P}_0$ と $\mathbf{P}_1$ を結ぶ線分である。
ベジェ曲線の接線方向は $\mathbf{P}_0$ では $\overrightarrow{\mathbf{P}_0\mathbf{P}_1}$, $\mathbf{P}_n$ では $\overrightarrow{\mathbf{P}_{n-1}\mathbf{P}_n}$
（ハンドルはアンカーポイントでの接線）
ベジェ曲線の両端点のハンドルが, ベジェ曲線の接線になっていることを証明してみよう。
命題
制御点 $\mathbf{P}_{0}$, $\mathbf{P}_{1}$, $\cdots$ , $\mathbf{P}_{n}$ から定められる $n$ 次ベジェ曲線について, 線分 $\mathbf{P}_{0}\mathbf{P}_{1}$ と $\mathbf{P}_{n-1}\mathbf{P}_{n}$ は, ベジェ曲線の点 $\mathbf{P}_{0}$ と $\mathbf{P}_{n}$ のそれぞれの接線である.
証明.
ベジェ曲線の定義式は次であった.
$0 \leqq t \leqq 1$ について,
$\mathbf{P}(t)$ $\displaystyle = \sum_{k=0}^{n} {}_n \mathrm{C}_k (1-t)^{n-k}t^k \mathbf{P}_k$.
なお, $\mathbf{P}(0) = \mathbf{P}_0$, $\mathbf{P}(1) = \mathbf{P}_n$ である.
$t$ で微分すると,
$\displaystyle \frac{d\mathbf{P}}{dt}(t)$ $\displaystyle = \sum_{k=0}^{n}{}_n \mathrm{C}_k$ $\{ k(1-t)^{n-k}t^{k-1}$ $- (n-k)(1-t)^{n-k-1}t^k \}$ $\mathbf{P}_k$
となる. $t=0, 1$ のときを計算すると,
$\displaystyle \frac{d\mathbf{P}}{dt}(0)$ $\displaystyle = - n \mathbf{P}_0$ $+n\mathbf{P}_1$ $=n \overrightarrow{\mathbf{P}_0 \mathbf{P}_1}$
$\displaystyle \frac{d\mathbf{P}}{dt}(1)$ $\displaystyle = - n \mathbf{P}_{n-1}$ $+n\mathbf{P}_n$ $=n \overrightarrow{\mathbf{P}_{n-1} \mathbf{P}_n}$
となる. したがって, ベジェ曲線 $\mathbf{P}(t)$ の $\mathbf{P}_{0}$ での接線方向は $\overrightarrow{\mathbf{P}_{0} \mathbf{P}_1}$ であり, $\mathbf{P}_{n}$ での接線方向は $\overrightarrow{\mathbf{P}_{n-1} \mathbf{P}_n}$ であることが分かる.
ゆえに, 線分 $\mathbf{P}_{0}\mathbf{P}_{1}$ と $\mathbf{P}_{n-1}\mathbf{P}_{n}$ は, ベジェ曲線の点 $\mathbf{P}_{0}$ と $\mathbf{P}_{n}$ のそれぞれの接線である.
$n=2$ のときは,
$\mathbf{P}(t)$ $=(1-t)^2\mathbf{P}_0$ $+2t(1-t)\mathbf{P}_1$ $+ t^2\mathbf{P}_2$
である。
$t=0, 1$ での微分係数は,
$\mathbf{P}'(0)$ $=2(\mathbf{P}_1-\mathbf{P}_0)$ $= 2\overrightarrow{\mathbf{P}_0\mathbf{P}_1}$
$\mathbf{P}'(1)$ $=2(\mathbf{P}_2-\mathbf{P}_1)$ $= 2\overrightarrow{\mathbf{P}_1\mathbf{P}_2}$
となる。
これがそれぞれの点での接線方向です。
ベジェ曲線は、制御点が作る凸包内にある（準備中）
［系］アンカーポイント以外の制御点はベジェ曲線上の点ではない（準備中）
まとめノート
ベジェ曲線とは
直感的に描きやすく、コンピュータやイラストソフトで滑らかに描ける曲線のこと。
制御点
$n+1$ 個の点 $\mathbf{P}_0$, $\mathbf{P}_1$, $\ldots$ , $\mathbf{P}_n$ をとる.
A. $n$ 次ベジェ曲線
$t \in [0, \ 1]$ のときの $\mathbf{P}(t)$ が描く軌跡を $n$ 次ベジェ曲線という.
$\displaystyle \mathbf{P}(t) = \sum_{k=0}^{n} {}_n \mathrm{C}_k (1-t)^{n-k} \ t^k \ \mathbf{P}_k$
B. ド・カステリョのアルゴリズム
$t \in [0, \ 1]$ とする. 下記の漸化式で定まる $\mathbf{P}(t) = \mathbf{P}_0^n(t)$ は $n$ 次ベジェ曲線と一致する. ただし, $k \in \{ 0,\ \cdots , \ n -i \}$ とする.
$$\mathbf{P}_k^i(t) = \left\{ \begin{array}{cl} \mathbf{P}_k, & i =0 \\
(1-t)\mathbf{P}_k^{i-1}(t) + t\mathbf{P}_{k+1}^{i-1}(t), & i \in \{ 1,\ \cdots , \ n\}
\end{array}\right.$$
C. ベジェ曲線の性質
- ハンドルはアンカーポイントの接線である
- アンカーポイント以外の制御点はベジェ曲線上の点ではない
- $1$次ベジェ曲線は, アンカーポイントを結ぶ線分を描く
ポイント解説
制御点
$\mathbf{P}_0$ と $\mathbf{P}_1$ は曲線の端点を決める
アンカーポイント
という. $\mathbf{P}_0\mathbf{P}_1$と $\mathbf{P}_n\mathbf{P}_{n-1}$ は, 端点での曲線の接線方向と曲がり具合を決める
ハンドル
という.
B
制御点の間を $(1-t):t$ に内分する点を繰り返し取るアルゴリズム:
C
拡大縮小に最適（
ベクター形式
）
モチベーション
No content available
