Panda Noir

JavaScript の限界を究めるブログでした。最近は幅広めに書いてます。

ベジェ曲線を完全に理解したので解説する

よくペイントツールに出てくる「ベジェ曲線」。かなり難解ですよね。なぜならWikiに書いてある「ベジェ曲線」とペイントツールの「ベジェ曲線」が厳密には異なっているからです!今回はどちらも完全に理解したので解説記事を書こうと思います。

wikiのベジェ曲線について

ペイントツールのベジェ曲線はこちらがベースとなっているので、まずWikiのベジェ曲線について解説します。

  1. 制御点を順に結ぶ。
  2. 得られた線分をそれぞれ t : 1 - t で内分する。
  3. 内分して得た点を順に結ぶ。
  4. 内分して得られる点が1つになるまで2.3.を繰り返す

こうして点が1つ得られます。ただし、これでは「曲線」とは言えません。ではどうするかというと、tの値を0から1まで連続的に変えていきます。

つまり、上の操作をして得られ得る点の集合が「ベジェ曲線」です(コンピューター上で実際に連続して変化させることはできないので、離散的に変化させることにはなりますが)。

英語版wikiのアニメーションがわかりやすかったです。

https://upload.wikimedia.org/wikipedia/commons/3/3d/B%C3%A9zier_2_big.gif

参照: Bézier curve - Wikipedia

ちなみに制御点から得られるベジェ曲線は、制御点のはじめの点と最後の点以外は基本的に通りません。

ペイントツールのベジェ曲線

wikiのベジェ曲線は制御点だけで描画できます。しかし、ペイントツールのベジェ曲線には謎の補助線が出てきます。下の画像のようなやつですね。

f:id:panda_noir:20180116225403p:plain

これの正体などについても書いていきますね。

ペイントツールのベジェ曲線はベジェ曲線じゃない!

そもそも上の画像のとおり、ベジェ曲線ツールで打つ点をバッチリ曲線が通っています。これはwikiのベジェ曲線とことなっています。ということはこの点は制御点ではないということでしょうか?

焦らしても仕方ないので答えを書くと「ペイントツールの点は制御点」です。より正確に言えば「ペイントツールの丸点は4次ベジェ曲線の制御点」です。

「隣り合う2つの点 + 各点から伸びる直線の端点2つ(上の図の四角で表示されている点)」が制御点となるベジェ曲線が描かれます。

つまり上の画像の曲線は「2つの4次ベジェ曲線が連続している曲線」ということになります。点がN個になれば「N-1個の4次ベジェ曲線が連続している曲線」です。

各点から伸びる直線が2本なのは、1つの点につき隣の点が2つあるからです。

f:id:panda_noir:20180116232024g:plain

  • 四角の点を動かしたときに変形する辺が1つだけ
  • 1つの点についている四角A、四角Bを動かした時に変形する辺が違う

これらからも「丸の点2つ + 四角の点2つ を制御点としたベジェ曲線」ということが分かります。

結論

「ペイントツールは4次ベジェ曲線を連続して描画しているだけ」でした。「ベジェ曲線って制御点だけでいいんじゃないの?」という疑問を抱いていた人もこれで解決かと思います。