概念が分かり辛いベジェ曲線。
どうやら、どういうものか理屈が分かってきた気がします。
どうも!LSSです!!
SVGに限らず、お絵描きソフトでもその名前を見かける事はあり、
「なんかよく分からないけど綺麗な曲線を描いてくれる」
程度の認識でしたが、その理屈がちょっと分かった気がするので、改めて記事ネタにしてみます!
まず参考にさせていただいたページ
↑ベジェ曲線について、アニメーションまで用いて分かりやすく解説されているサイト。
昨日の記事、
【SVG】イマイチよく分からないベジェ曲線とお近づきになりたいツール
の、はてなブックマークの「関連記事」に出ていました。
はてブってそういうメリットもありますね^^
まず、直線の話
このような位置関係で、「点A」と「点B」があったとします。
そして、「ある人」が「点A」の位置から「点B」に向かって、まっすぐ歩いて行ったとしたら、
その人が歩いた軌跡は、上記のような線になりますね。
曲線の話。点Cを追加。
さて、話を戻しまして。
点Aと点Bの位置関係をそのままに、新たに「点C」が上記のような位置にあったとします。
そして、さっきの「ある人」とはまた「別の人」が、「点C」を出発して「点B」にまっすぐ向かった場合、
「別の人」が歩いた軌跡は、上記のようになります。
さて、「別の人」が、点Cを出発すると同時に、さっきの「ある人」も点Aを出発していました。
ですが、今回「ある人」はまっすぐ「点B」を目指さずに、「別の人」が「今いるところ」に向かって、歩く事にしました。
「別の人」も「点B」を目指しているので、最終的には
「ある人」と「別の人」は「点Bで合流」する事になりますね。
※なお、「ある人」と「別の人」は同時に出発し、最終的には同時に点Bに到着するような速度で移動しているものとします。
その場合の「ある人」の歩いた軌跡というのが…
結果的にこうなります。
「ある人」は常に「別の人」に近づくように移動していますが、「別の人」もまた点Cから点Bに向けて移動しているので、「ある人」は常に向かう方向を修正しながら歩く事になります。
…という、「ある人の歩いた軌跡」が、
「点Aを始点、点Bを終点とし、点Cを制御点とした二次ベジェ曲線」
という事になります。
全く同じ話を、物語仕立てで書いてみます
「ある人」「別の人」「点A」「点B」「点C」という表現で分かりにくいかも?
なので、同じ話を物語として書き直してみます。
「自作小説」カテゴリから、話を持ってきます。
むかしむかし、あるところに仲のいい幼い双子の姉妹が住んでいました。 ところがある日、両親が不慮の事故で亡くなったために、姉は父方の親戚である魔法使いの家に、妹は母方の親戚であるブードゥー教徒の家に、それぞれ貰われていきました。 十年後にここで再会する事を誓って。
自作小説:「双子の姉妹のおはなし」 - Little Strange Software
お話
さて、時は流れ、十年後の約束の日になりました。
双子の姉「ターナク」は、時間ぴったりに約束の場所「二人の生家跡地」に着くように、10年間お世話になった「魔法使いの家」から旅立ちます。
同じ頃、双子の妹「ルーディクー」もまた、「ブードゥー教徒の家」から旅立ちます。
…ターナクは魔法使いの家で育てられているうちに、いくつかの魔術を身につけていました。
その魔術のひとつに「特定の人物の今いる方角に向かって勝手に足が向く」という術があります。
10年前に生き別れたルーディクーに確実に会いたい一心で、ターナクはその術を行使しました。
一方、ルーディクーのほうは、ブードゥー教徒の家からまっすぐに「二人の生家跡地」を目指します。
青い線が、ルーディクーの歩いた道のり。
しかし、術を行使したターナクのほうはというと…
この赤い線のように、少し余計に距離を歩く結果となりましたが、それでも二人は約束の時間ぴったりに、「二人の生家跡地」に辿り着き、十年ぶりの再会を果たしたのでした^^
この時、ターナクが歩いた曲線を描く道のりが「ベジェ曲線」です。
お話の続きはこちらから。
あとがき
今回の記事中で用いた図は、全てSVGタグで描きました。
こういう座標系の図を描くのにかなり便利ですねw
例として、最後の図のコードだけ載せておきます。
コード
<p>[]
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewbox="0 0 300 200" style="border: 1px solid black;">
<text x="15" y="40">魔法使いの家</text>
<circle cx="50" cy="50" r="5"></circle>
<text x="180" y="90">二人の生家跡地</text>
<circle cx="250" cy="100" r="5"></circle>
<text x="90" y="180">ブードゥー教徒の家</text>
<circle cx="150" cy="150" r="5"></circle>
<path d="M 150 150 L 250 100" stroke="blue" stroke-width="2" fill="none"></path>
<path d="M 50 50 Q 150 150 250 100" stroke="red" stroke-width="2" fill="none"></path>
</svg>
[]</p>
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^