日曜プログラミング:JSでSVGをゴリゴリする習作

産休をいただいてしばらくたちますが、まとまった時間がある時にやろうと温めていたネタをコツコツと消化しています。今回は前々からやろうと思ってたJSでゴリゴリ動く系の日曜プログラミングです。僕はもともとFlashなんかのWebコンテンツを作っていたのですが、FlashもすっかりJavaScriptにポジションを奪われてしまったので、その練習もかねて最近のモダンなネタを使った習作を作りました。

【正二十一面体の三次元回転】

今回はどのコンテンツもSVGをJSで動的に操作する形の実装を取っています。これは回転行列を作って平面しか表現できないSVGの座標をリアルタイムに変換して三次元っぽく見えるように動かしてみました。

【ひょこひょこ三角形】

こちらでは三角形の頂点を軸に、回転しながら横に転がっていく動きを実装しました。SVGの操作やアニメーションはSnap.svgを使っています。Snapは今回初めて使って見たのですが、jQuery風にサクサクとSVGを操作できるのは便利ですが、いろいろとクセもあって以外と手間取ってしまいました。

【おっかける三角】

3作目はインタラクションを追加し、マウスで押下したポイントに向かって三角形が転がりながら追いかけます。こちらも前回同様Snap.svgを使いつつ、ES6で書いてみたのですが、これまで慣れてたプロトタイプベースの書き方とはいろいろと違うところがあり、だいぶ時間を使ってしまいました。ちなみに、今回はマウス操作だけでなくタブレットでのタッチ操作にも対応させて見ました。タブレットだとPCと違い実際の物を触ってる感が強く、ガジェットっぽさがより増しますね。

と、こんな感じでJavaScriptでガジェットコードを1日1本ぐらいのペースで書いていたのですが、一番の驚きは3歳のムスコがえらくこのコンテンツを面白がってくれたことです。なんと三角形が転がるだけで大声あげて大爆笑するのです。これまでこういったプログラムコンテンツは大人が見る物だと思っていろいろと作っていましたが、作りによっては子供でも楽しめるものになるんだなと、新しい発見をすることができました。

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

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

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

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

竹内 裕和

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