2011/10/08

中学生でもわかるベジェ曲線

ベジェ曲線をレンダリングしていたら面白くて丁寧に描いてしまった。せっかくなのでこれを使って誰にでもわかるように(たぶん中学生でも分かるように)ベジェ曲線というものが何かを説明してみたいと思う。

ベジェ曲線というのはなめらかな曲線を描くためのものなのだけど、説明はまず単なる直線から始めることになる。この下の図の点の動きがすべての基本になるからだ。

一本の直線があって、その上を点Mが一定の速度で移動している。この点Mの軌跡は、もちろんだけど、単なる直線になる。いいよね。tというのは線分上をどれだけの割合進んだのかを表す数値だ。

もうひとつ線を増やして、その上に、Mと同じように移動する点をもうひとつ増やすことができる。もともとの点MをM0、新しい点をM1と呼ぶことにしよう。M0とM1が動くルールは同じままだ。M1が増えても特にややこしくなっていることはないね。


さて、ここでM0とM1をつなぐ線を描くことができる。その線は、M0とM1が移動するにつれて滑らかに移動することになる。その線だけに着目してほしい。そうするとその線の上を、点M0やM1と同じように一定ペースで移動する点というのをまた考えることができる。それを点Bとしよう。その移動する点Bが描く軌跡が、2次ベジェ曲線だ。

もうひとつ制御点を増やしたベジェ曲線というのを考えることもできる。

下の図では新しい点P3というのが増えていて、P2からP3への線も増えている。その上を動く点というのをM0やM1と同じように考えることもできる。それを描いたのがM2だ。


さて、2次ベジェ曲線ではP0、P1、P2の組み合わせから点Bの位置を決めることができたわけだけど、それならP1、P2、P3の組み合わせから同じように別の点を決めることもできるはずだ。もともとの点BをB0と呼ぶことにして、P1、P2、P3から決まる新しい点をB1としよう。そうすると、さっきと同じように、点B0と点B1をつなぐ線を描いて、その上を一定のペースで動く点というのをまた考えることができるわけだ。その点が描く軌跡を3次ベジェ曲線という。

これにはきりがない。もうひとつ制御点を増やして、P0、P1、P2、P3の組み合わせと、P1, P2, P3, P4の組み合わせから決まる点をつないだ線を描いて、一定ペースでその上を点を動かして、それが描く軌跡が…… というようにして、この曲線はいくらでも複雑にしていける。P0~P4で決まる曲線は4次ベジェ曲線と呼ばれるわけだね。5つ以上に制御点を増やしても特に実用上の利点はないので、3次ベジェ曲線までが一般には利用される。

というわけで、滑らかなベジェ曲線というのは、線分上を一定ペースで動く点を考えて、そういう点同士をつないだ線分を考えてその上を一定ペースで動く点を考えて…… という組み合わせで描かれているだけなのだ。わかったかな?