読者です 読者をやめる 読者になる 読者になる

iPX社員によるブログ

iPX社員が"社の動向"から"自身の知見や趣味"、"セミナーなどのおすすめ情報"に至るまで幅広い話題を投下していくブログ。社の雰囲気を感じ取っていただけたら幸いです。

グニャグニャな曲線を描こう

数学のノート

砂子です。

個人的に数学のセミナーを受講することがあります。そのとき筆記したノートに下記のような図がある。 f:id:ipx-writer:20151009100909p:plain

この図は連続写像を論じるときに講師の方が黒板に描いたものである。復習の際にふと次のようなことを思い立った。

このような曲線はPCではどう描くのだろう?

PCでの作図

これまでPCで図を描こうとするときにはきっちりとした作図を求めていた。ここでいう「きっちりとした」とは例えばPowerPointのオブジェクト同士の中心線が揃っているような状態である。 残念ながら絵心は全くないためPCでイラスト等を描いたことはない。

グラフィックツールで描く。

さて、曲線を描く方法を考えよう。滑らかな閉曲線を描きたい。まず、Inkscapeで描いてみた。「ベジエ曲線」というもので描いているようだ。 f:id:ipx-writer:20151009104617p:plain

ベジエ曲線

詳細は下記Wikipediaで確認。 https://ja.wikipedia.org/wiki/%E3%83%99%E3%82%B8%E3%82%A7%E6%9B%B2%E7%B7%9A

私が確認したことは下記である。

  • 3次ベジェ曲線 (Cubic Bézier curve)は曲線の両端を表す2点(P1, P2)とそれらに各々対応する2つの制御点(C1, C2)が必要
  • 一つの端点を共有する2つの3次ベジェ曲線が滑らかに接合するにはその端点(P)と制御点(C,C')の角CPC'が180度であること

また、Wikipediaの外部リンクからベジエ曲線で円を描く方法を確認。

javascriptでグニャグニャな曲線

jsfiddleとpaper.jsで描いてみた。 http://jsfiddle.net/SnowFox/z3t99dvL/1/

基本戦略は4つの3次ベジェ曲線で円を描き、その点に対応する2つの制御点をベクトルと考えてその角度に乱数を入れ込むというもの。 半径や点の個数にも乱数を入れることができればより、グニャグニャな曲線になる?

まとめ

なんとか曲線を描いてみたが、ベジエ曲線の説明等を文章で説明したことが心残りある。 ベジエ曲線の調査中に見つけたページのようにアニメーションでも使えればもっと説明ができたと思う。 https://www.jasondavies.com/animated-bezier/

表現力をあげるためにも、javascript+d3.jsとかやるべきかな。。。