Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

ベジェ曲線、がどういう曲線なのか、分かった気がします

概念が分かり辛いベジェ曲線

どうやら、どういうものか理屈が分かってきた気がします。

 

どうも!LSSです!!

 

SVGを触りだしてから出てきたベジェ曲線

SVGに限らず、お絵描きソフトでもその名前を見かける事はあり、
「なんかよく分からないけど綺麗な曲線を描いてくれる」
程度の認識でしたが、その理屈がちょっと分かった気がするので、改めて記事ネタにしてみます!

 

 

まず参考にさせていただいたページ

postd.cc

ベジェ曲線について、アニメーションまで用いて分かりやすく解説されているサイト。

昨日の記事、
【SVG】イマイチよく分からないベジェ曲線とお近づきになりたいツール
の、はてなブックマークの「関連記事」に出ていました。

 

はてブってそういうメリットもありますね^^

 

 

まず、直線の話

点A 点B

このような位置関係で、「点A」と「点B」があったとします。

 

そして、「ある人」が「点A」の位置から「点B」に向かって、まっすぐ歩いて行ったとしたら、

 

点A 点B

 

その人が歩いた軌跡は、上記のような線になりますね。

 

  

恋のぼんちシート 2006 club バージョン

恋のぼんちシート 2006 club バージョン

  • 発売日: 2017/07/04
  • メディア: MP3 ダウンロード
 

  

 

曲線の話。点Cを追加。

点A 点B点C

さて、話を戻しまして。

点Aと点Bの位置関係をそのままに、新たに「点C」が上記のような位置にあったとします。

 

そして、さっきの「ある人」とはまた「別の人」が、「点C」を出発して「点B」にまっすぐ向かった場合、

 

点A 点B点C

 

「別の人」が歩いた軌跡は、上記のようになります。

 

さて、「別の人」が、点Cを出発すると同時に、さっきの「ある人」も点Aを出発していました。

ですが、今回「ある人」はまっすぐ「点B」を目指さずに、「別の人」が「今いるところ」に向かって、歩く事にしました。

 

「別の人」も「点B」を目指しているので、最終的には
「ある人」と「別の人」は「点Bで合流」する事になりますね。
※なお、「ある人」と「別の人」は同時に出発し、最終的には同時に点Bに到着するような速度で移動しているものとします。

 

その場合の「ある人」の歩いた軌跡というのが…

点A 点B点C

結果的にこうなります。

 

「ある人」は常に「別の人」に近づくように移動していますが、「別の人」もまた点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>

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^