きままにものづくり

日々の気付いたことなんかを書いてます。

なめらかな曲線を描く ~その1~

こんにちは、even_ekoです。

現在取り組んでいるお絵描きアプリで、ようやくなめらかな曲線が描けるようになりました。

見た目の変化は小さいのですが、丸みを帯びたものを描く際には必須な処理になると思います。

なめらかな曲線

詳しい説明をする前になめらかな曲線とはどんなものなのかを明確にします。

下に、なめらかでない粗い曲線の例を示します。

f:id:even_eko:20120912102815p:plain

曲線のところどころに角ばった箇所があります。このように角ができる原因は後で説明します。

次に、なめらかな曲線の例を示します。

f:id:even_eko:20120912102851p:plain

さきほどの曲線と比べると、角ばった部分がなくなり、連続してつながってることが分かると思います。

パラメトリック曲線

線を描画するための基本的な処理は、2つの点を与えそれを直線で結ぶという処理です。このように、与えられた点を直線で結ぶことを線形補間といいます。
コンピュータが取得できるイベントには限りがあるので、点と点の間を補間してあげないと線にはなりません。ただし、直線で補間すると上の画像のように角ができてしまい、カクカクな曲線になってしまいます。
カクカクな曲線にならないようにするために、パラメトリック曲線を使用します。パラメトリック曲線とは、パラメータ(媒介変数)で制御される曲線のことです。
この説明だけでは、よく分からないと思うので数式を混ぜて説明してみます。
パラメータを用いない通常の方程式は、下のようになります。ここでは、2次元を仮定しています。また、xとyは位置を表す変数とします。

f:id:even_eko:20120912100354p:plain

一方、パラメータを用いた場合は、以下のようになります。パラメータはtとしています。

f:id:even_eko:20120912100443p:plain

パラメータを用いて方程式を表現することを媒介変数表示といいます。普通の方程式をどうして、わざわざパラメータを用いて表現するのでしょうか。
その理由は、時間です。上の式の表現ですと、xの変化量からyの変化量が求めるということになります。しかし、実際の物理現象ではxの変化量を求めたと同時にyの変化量が求まることがほとんどです。そのため、時間の変化量からxの変化量、yの変化量を算出することになります。
ボールを投げた時を考えてみて下さい。ボールの軌跡を方程式(物理法則は使用しない)で近似してみたいとします。この時、どのようにして位置の変化を観測しますか。
ひとつの方法として、一定時間にシャッターをきるカメラでボールの軌跡を撮り、その後xとyの変化量を算出していくという方法があります。この方法では、xの変化量が求まるのと同時にyの変化量も求まります。そして、これから直接得られる方程式は、時間を媒介変数とした方程式になります。
媒介変数表示は、数式の上では一見冗長に見えますが、物理現象と密接に関連しているので必要な表現方法となります。


実装したパラメトリック曲線


今回、なめらかな曲線を実現するために実装したアルゴリズムは以下の4つです。

  • ベジェ曲線
  • Ferguson-Coon曲線
  • Catmull-Rom曲線
  • Bスプライン曲線

この中で、滑らかに描けた曲線はBスプライン曲線だけです。 他の曲線では、制御点の位置次第では角ができてしまいます。制御点とは曲線の形を決定する点のことです。実装したアルゴリズムの制御点は、全てイベントから取得できる座標にしています。


次回は、それぞれの曲線について説明します。