よくペイントツールに出てくる「ベジェ曲線」。かなり難解ですよね。なぜならWikiに書いてある「ベジェ曲線」とペイントツールの「ベジェ曲線」が厳密には異なっているからです!今回はどちらも完全に理解したので解説記事を書こうと思います。
wikiのベジェ曲線について
ペイントツールのベジェ曲線はこちらがベースとなっているので、まずWikiのベジェ曲線について解説します。
- 制御点を順に結ぶ。
- 得られた線分をそれぞれ t : 1 - t で内分する。
- 内分して得た点を順に結ぶ。
- 内分して得られる点が1つになるまで2.3.を繰り返す
こうして点が1つ得られます。ただし、これでは「曲線」とは言えません。ではどうするかというと、tの値を0から1まで連続的に変えていきます。
つまり、上の操作をして得られ得る点の集合が「ベジェ曲線」です(コンピューター上で実際に連続して変化させることはできないので、離散的に変化させることにはなりますが)。
英語版wikiのアニメーションがわかりやすかったです。
ちなみに制御点から得られるベジェ曲線は、制御点のはじめの点と最後の点以外は基本的に通りません。
ペイントツールのベジェ曲線
wikiのベジェ曲線は制御点だけで描画できます。しかし、ペイントツールのベジェ曲線には謎の補助線が出てきます。下の画像のようなやつですね。
これの正体などについても書いていきますね。
ペイントツールのベジェ曲線はベジェ曲線じゃない!
そもそも上の画像のとおり、ベジェ曲線ツールで打つ点をバッチリ曲線が通っています。これはwikiのベジェ曲線とことなっています。ということはこの点は制御点ではないということでしょうか?
焦らしても仕方ないので答えを書くと「ペイントツールの点は制御点」です。より正確に言えば「ペイントツールの丸点は4次ベジェ曲線の制御点」です。
「隣り合う2つの点 + 各点から伸びる直線の端点2つ(上の図の四角で表示されている点)」が制御点となるベジェ曲線が描かれます。
つまり上の画像の曲線は「2つの4次ベジェ曲線が連続している曲線」ということになります。点がN個になれば「N-1個の4次ベジェ曲線が連続している曲線」です。
各点から伸びる直線が2本なのは、1つの点につき隣の点が2つあるからです。
- 四角の点を動かしたときに変形する辺が1つだけ
- 1つの点についている四角A、四角Bを動かした時に変形する辺が違う
これらからも「丸の点2つ + 四角の点2つ を制御点としたベジェ曲線」ということが分かります。
結論
「ペイントツールは4次ベジェ曲線を連続して描画しているだけ」でした。「ベジェ曲線って制御点だけでいいんじゃないの?」という疑問を抱いていた人もこれで解決かと思います。