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

数学のノート

砂子です。

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

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

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

PCでの作図

• 学生時代の実験結果のグラフ表示
• 業務でのプログラムのフローチャート

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

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

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

ベジエ曲線

詳細は下記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とかやるべきかな。。。