日曜プログラミング:JSでSVGで描いた展開図をゴリゴリ動かす

このまえの「日曜プログラミング:JSでSVGをゴリゴリする習作」の記事に続き、プログラミングネタの記事です。いろいろと習作を作っていたのは、実はこういった物を作りたかったからなのです。

と言ってもまだこれは完成品ではなくて、コア部分のアルゴリズムを組み立てただけなのですが、正二十面体の展開図がちゃんと正二十面体の立体として成立するようにしながら自分自身を変形させていくといった物です。

もともと10年前の学生時分にFlashで作った物の焼き直しなのですが、JSとSnapの練習としてはなかなか良いネタです。当時は基礎となるアルゴリズムや細かな実装方法まで、全てがトライアンドエラーの毎日だったのでこの状態に持って行くまで1〜2ヶ月ぐらいかかってしまいましたが、今回は一部Matrixの処理でつまづいた物の数日でこの状態にまで持ってくることができました。

Flashで開発していた時のActionScript と違って、Class内でのthisの参照がメソッドの呼び出し元によって変わってしまうというJavaScript の仕様にはずいぶんと苦しめられました。それでも10年間でめちゃくちゃ成長していたのか、それとも10年前の自分がダメすぎだったのかは定かではありませんが、苦労しながら組んだプログラムが小気味よく画面上で動くのを見るのはいつやっても楽しいものですね。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

共感いただけたら、ポチッとお願いします!もっと面白い記事を書くために大切に使わせていただきます。

ありがとうございます!よければSNSでもシェアをどうぞ。
2

竹内 裕和

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。