きままにものづくりスマートフォン用の表示で見るきままにものづくり日々の気付いたことなんかを書いてます。この広告は、90日以上更新していないブログに表示しています。アプリ開発こんにちは、even_ekoです。現在取り組んでいるお絵描きアプリで、ようやくなめらかな曲線が描けるようになりました。見た目の変化は小さいのですが、丸みを帯びたものを描く際には必須な処理になると思います。詳しい説明をする前になめらかな曲線とはどんなものなのかを明確にします。下に、なめらかでない粗い曲線の例を示します。曲線のところどころに角ばった箇所があります。このように角ができる原因は後で説明します。次に、なめらかな曲線の例を示します。さきほどの曲線と比べると、角ばった部分がなくなり、連続してつながってることが分かると思います。線を描画するための基本的な処理は、2つの点を与えそれを直線で結ぶという処理です。このように、与えられた点を直線で結ぶことを線形補間といいます。コンピュータが取得できるイベントには限りがあるので、点と点の間を補間してあげないと線にはなりません。直線で補間すると上の画像のように角ができてしまい、カクカクな曲線になってしまいます。曲線にならないようにするために、パラメトリック曲線を使用します。パラメトリック曲線とは、パラメータ(媒介変数)で制御される曲線のことです。この説明だけでは、よく分からないと思うので数式を混ぜて説明してみます。パラメータを用いない通常の方程式は、下のようになります。ここでは、2次元を仮定しています。xとyは位置を表す変数とします。パラメータを用いた場合は、以下のようになります。パラメータはtとしています。パラメータを用いて方程式を表現することを媒介変数表示といいます。普通の方程式をどうして、わざわざパラメータを用いて表現するのでしょうか。その理由は、時間です。上の式の表現ですと、xの変化量からyの変化量が求めるということになります。実際の物理現象ではxの変化量を求めたと同時にyの変化量が求まることがほとんどです。そのため、時間の変化量からxの変化量、yの変化量を算出することになります。ボールを投げた時を考えてみて下さい。ボールの軌跡を方程式(物理法則は使用しない)で近似してみたいとします。この時、どのようにして位置の変化を観測しますか。ひとつの方法として、一定時間にシャッターをきるカメラでボールの軌跡を撮り、その後xとyの変化量を算出していくという方法があります。この方法では、xの変化量が求まるのと同時にyの変化量も求まります。これから直接得られる方程式は、時間を媒介変数とした方程式になります。媒介変数表示は、数式の上では一見冗長に見えますが、物理現象と密接に関連しているので必要な表現方法となります。今回、なめらかな曲線を実現するために実装したアルゴリズムは以下の4つです。ベジェ曲線Ferguson-Coon曲線Catmull-Rom曲線Bスプライン曲線この中で、滑らかに描けた曲線はBスプライン曲線だけです。他の曲線では、制御点の位置次第では角ができてしまいます。制御点とは曲線の形を決定する点のことです。実装したアルゴリズムの制御点は、全てイベントから取得できる座標にしています。次回は、それぞれの曲線について説明します。無限に広い平面を考える。~その2~こんにちは、even_ekoです。~その3~こんにちは、even_ekoです。~用語集~こんばんは、even_ekoです。(1)月別アーカイブはてなブログをはじめよう!even_ekoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。