分123吸込まれて弾けるパーティクルのアニメーション前掲jsdo.itのアニメーションは,マウスポインタの座標に向かって弾むように動く。これに手を加えて,お題のマウスポインタの座標に吸い込まれるような動きにしたい。いうと,お題のパーティクルは,マウスポインタに追いつくと,弾けるように反発している。どのような式にすれば,この動きになるのか。前掲コード4のクラス(Particle)では,アニメーションのメソッド(accelerateTo())で用いた加速度の係数が固定(0.1)だった。この係数(ratio)をつぎのように距離の2乗(square)に反比例させる。マウスポインタに近づくほど,加速度の係数が高まり,ブラックホールに吸込まれるような動きになるのだ。_velocityY;};もちろん,距離の2乗(square)が0になってしまうと,正しい係数値が求まらない。その場合は,条件判定により係数(ratio)を0と定めた。これだけでは,0に近い小さな値のとき,加速度が大きくなりすぎて,パーティクルがとんでもない遠くに飛んでしまう。そこで,ステージの外に飛び去ったパーティクルは,反対の橋にスクロールしてステージ内に戻すことにした。そのためには,ステージの幅と高さをクラス(Particle)のオブジェクトが知っていなければならない。これらの値は,つぎのようにコンストラクタの引数(rightとbottom)に加えた。したがって,パーティクルをつくる関数(createParticle())にも,以下のようにコンストラクタの呼出しにこれらの引数を与える。stageHeight);}前掲コード3とコード4にこれらの手を加えると,パーティクルはマウスポインタの後を吸込まれるように追いかけ,ポインタに追いつくと弾けるように反発する。パーティクルがまだひとつとはいえ,動きは一応でき上がりだ。以下にコード5およびコード6としてまとめ,jsdo.itにサンプルも掲げた。今回はここまでとする。残すところあと2回の本連載,最後までおつき合いいただきたい。