jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2015.5. 9

CodeGrid三周年記念パーティでCanvasアニメについてのLTをやりました。

Category:
Canvas

5月8日(金)に原宿で開催された、CodeGrid三周年記念パーティに参加してきました。
CodeGridは、株式会社ピクセルグリッドさんが発行されている、フロントエンド関連の技術を解説した連載コンテンツです。

参加者には知人も少なかったので、自己紹介も兼ねてLTに参加しました。LTの参加資格は挙手制で立候補順だったため、発表内容の縛りなどもなく自由に行うことができました。
今回テーマに選んだのは、個人的に今もっとも注力しているcanvasアニメーションについてです。
今回はそこで話した内容に一部補足して書き起こすことにします。

canvas上に動くスライムを描くことで、演算などの要点を学ぶ

LTでは以下のデモを利用しました。

See the Pen Slime by yoichi kobayashi (@ykob) on CodePen.

左上のselect要素を操作することで、スライムの描画パターンを変更することができます。

Only Controle Point スライムの骨子となるメインの制御点のみが表示されます。
All Point メインの制御点に加え、スライムの肉付を行うのに必要な制御点も表示されます。
Full スライムの肉付まで描画されます。

スライムの動きはメインの制御点2点のみでまかなっている

スライムは勝手にプルプルふるえ、またひっぱると伸び、離すとまた震えながら縮みます。
これだけで4種の動きを同時に行い、制御は複雑に思えるかもしれませんが、実際はシンプルです。4種の動きの演算はメインの制御点2点のうち、頭にあたる1点のx, y座標の操作にまとめてしまっています。つまり、1点の動きだけを考れていれば済むということになります。

スライムが勝手に震える動きは、Math.sin()Math.cos()を使っています。
三角関数を使ったオブジェクトの移動については、以前このブログでも記事にしました。

引っ張られている状態ではこの動きを止め、代わりにmousemoveのイベントオブジェクト内の座標に頭の制御点を連動させます。

また引っ張った状態からスライムを離すとスライムは元の状態に戻ろうとしますが、これにはバネの動きを利用しています。バネの理屈については僕もはっきりと理解できていませんが、以下のような演算を行うことで簡単に実現することができます。

スライムに肉付けを行う

スライムの肉付けはstroke()やfill()などを使った、canvasで絵を描くためのいたって基本的な処理しか行っていません。
スライムは軟体生物のようなものなので肉体は曲線で描く必要がありますが、これにはquadraticCurveTo()メソッドを使っています。描画処理で少し考える必要があるとすれば、このベジェ曲線を引くためのメソッドに使う制御点を配置する点でしょうか。

デモのセレクトボックスをOnly Controle Pointにあわせると、ベジェ曲線を引くための制御点が表示されます。実際はもうすこし丁寧に配置しないとキレイに曲線を繋げられませんが、ぱっと見でそれらしく見えるので妥協した配置になっています。

これらの制御点を配置するのにまた三角関数を利用しており、メインの制御点からどの角度にどの距離で配置するのかを計算しています。もう1点、頭の制御点は動くので、地面の制御点から見た頭の制御点の角度は常に変化することになり、つまりベジェ曲線のための制御点もそれに準じて角度を変える必要が出てきます。これをしないとスライムの頭が固定されてしまい、不自然な動きになってしまいます。

地面の制御点から見た頭の制御点の角度を求めるのには、Math.atan2()を使用しています。これは逆三角関数の計算を行ってくれる関数で、2点の座標を引数に指定することで角度を返してくれます。この角度をベジェ曲線の制御点にも反映することで、スライムの動きが自然に見えるようになります。

Canvasアニメの実践には、核となる動きが何なのかを見極めるとよい

繰り返しになりますが、このスライムの動きは頭の制御点の動きがすべての基点になっています。頭の制御点にパターンをもたせていくことで、全身が複雑な動きをしているように見せているだけです。

自分で作ったデモ以外でも、派手な動きや難しそうな計算をしているように見えて、実はシンプルな制御しかしていないものを見かけることがあります。インタラクティブ表現においては、いきなりコードを解析するよりもまず「基点になっている要素はどこにあって、どのような演算方法を組み合わせているのか」を想像してみると理解が早く済むはずです。もしこのような表現の実装に興味がある方はそのような視点を意識して閲覧するようにしてみると新たな発見があるかもしれません。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.