17/07/12

canvasでマウスストーカを表現してみる


 

今回はcanvasを用いて、マウスをゆっくりと追従するマウスストーカーと
マウスの周りをぐるぐると回るマウスストーカーを解説していきます。

マウスストーカー

See the Pen ZyVGXb by youya66 (@youya66) on CodePen.0

 

ざっと流れを説明すると
1.黒い画面を描画
2.半透明の黒い画面をcanvasいっぱいに描画
3.円をマウスに近づくように描画
4.2に戻る
このような処理で、残像が残ったような表現が実現できます。

 

requestAnimationFrameとは

window.requestAnimationFrame() メソッドは、ブラウザに描画させたいアニメーションを指定し、次の再描画の前に、アニメーションを更新する指定した関数を呼び出すように要求します。このメソッドは再描画する前に呼び出されるコールバックメソッドを引数にひとつとります。


window.requestAnimationFrame – Web API インターフェイス | MDN

 

簡単に説明すると、
再描画を行う前に、アニメーションを更新する(座標を移動したり、大きさを変えたりする)関数を
予約することができるsetTimeoutをアニメーションに特化させたメソッド
だと思っていただければいいと思います。

 

アニメーションの描画はsetTimeoutでも実現できますが、
requestAnimationFrameはブラウザの描画準備が整ったタイミングで、適宜実行されるので
setTimeoutに比べてメモリ節約になります。
また、描画速度はおおよそ60fpsです。
さらにタブが非表示の時はfpsを落すので、メモリ節約に繋がります。

円運動を追加する

See the Pen vZvOeR by youya66 (@youya66) on CodePen.0


 

Math.cosメソッドとMath.sinメソッドの使い方ですが、
それぞれ、rad(ラジアン)を引数にとります。
radとはradianの略で、
radianとは角度の単位で弧度法によって求められます。
半径と弧の長さが一致するときの角度を1rad(≈57.3°)と呼びます。

 

radは

rad = deg * (Math.PI / 180) * r;

で算出されますがr(半径)よく省略されます。
degはdegreeの略で度数法(30°のような表記)を示します。

 

また、

1rad ≈ 57.3°
πrad = Math.PI / 180 = 180°
2πrad = 360 * (Math.PI / 180) = 360°

これらを覚えておくとイメージしやすいです。

 

実際の動きの仕組みを説明します。
円運動とマウスの座標に向けて移動する処理を分けて考えます。

 

例えば最初の座標を(0, 0)だとし、マウスの移動先が(100, 100)だとします
Math.cosメソッドとMath.sinメソッドを用いて(0, 0)の衛生上の座標を指定します。
例えば、衛生上の半径を10、angleを0だとすると

x = Math.cos(0) * 10
y = Math.sin(0) * 10

となり(0, 0)を中心に衛生上の点は(10, 0)にあることになります。

 

また、アニメーションを行うので、speedをangleに追加し、角度をずらしていきます。
そうすることで(0, 0)の円運動のアニメーションができます。

 

次に、マウスとの距離を計算し、speed分だけ移動します。
例えばspeedを10だとすると、次の描画位置は
(10, 10)になります。
この(10, 10)を中心に先ほど計算した衛生上の点を追加すると
(20, 10)となります。

 

これらを繰り返し、円運動と、マウスストーカーを組み合わせた表現が可能になります。

 

参考記事
Trail Fader – jsdo.it – Share JavaScript, HTML5 and CSS

 
以上です。
 

スポンサーリンク

メールアドレスが公開されることはありません。

youya66

だらけとびびり、それとちょっぴりのてきとーさ。

コアラになってだらだらしながら愛されたい。