両者の特長

野球ピッチャーの球跡を表現するようにスローモーションで、関数が入り混じった高等数式をビジュアルに描画できないものかと探求していました。

かつて、条件に応じて動的に図を変化させたり、アニメーションを実現するために、FlashやJavaアプレットが使われてきました。最近は、HTML5の仕様が落ち着き、それをサポートするブラウザが充実し、ブラウザ上に楕円、直線、四角形などを描画するために策定された仕様であるCANVASやSVGの利用が盛んになっています。

ブログの記事を表現豊かにするために、CANVASを使っていましたが、動的コンテンツの表現でCANVASでは複雑化したので、このたび、SVG(Scalable Vector Graphics)を使いました。CANVASとSVGの特徴について、記録にとどめます。

縦軸を正弦値、横軸を位相としたとき、位相を時間に同期して正弦値を表現する場合にはCANVASは非常に使い勝手のよいツールでした。このように過ぎ去った軌跡を残しておく場合は問題ありませんが、ホームランボールが野球場の上空を移動するように瞬間、瞬間を表示する場合にはCANVASは似合いません。

CANVASでは表現したオブジェクトを動かす場合は、直前の画像を消して新しい位置に画像を表現する方法が取られます。SVGでは描画位置を指定すれば、前の画像を消すことなく新しい位置に画像が描画される機能が用意されています。

半径aの円が直線上を転がり、その円の中心からb地点の軌跡を描くトロコイド曲線を表現するときには、Svg要素がピッタリでした。それを含む魅惑的な曲線をYoutubeに収録しました。数学の授業などに使ってもらえればありがたいです。

数式などがたくさん出ると肩が懲ります。今度は魅惑的な脚線美について語りたいです。

魅惑的な曲線美

8件の魅惑的な曲線をYoutubeに投稿しました。直前のブログに載せたものと重なるものがありますがYoutubeの動画は一気にまとめ表示されています。