この連載を始めてから、はや1年半が過ぎた。実は、今回のお題が連載の締めとなる。そこで最近の解説のおさらいも兼ねて、つぎのjsdo.itのようなパーティクルを選んだ。先頃大ヒットしたディズニーアニメの雪(サウンドあり)を想い起こさせる表現だ。池田泰延(clockmaker)氏による「Particle 3000」を下敷きにした。このコードがCanvas APIを使っているのに対し、本解説ではもちろんCreateJSを用いる。今回を含めた都合3回で仕上げるつもりだ。
クラスでつくったパーティクルをステージに置く
まず、アニメーションは後に回して、パーティクルをひとつステージの真ん中に置こう(図1)。CreateJSのライブラリは、EaselJSを使う。そして、body要素からonload属性で、script要素に定めた初期設定の関数(initialize())を呼び出すのは毎度おなじみのとおりだ。なお、パーティクルを白くするので、Canvasの背景色は黒に定めておく。
パーティクルはクラス(Particle)で定める。コンストラクタには、つぎのように位置のxy座標を渡すものとする。先に、このクラスからつくったパーティクル(Particle)のオブジェクトを、ステージに置くJavaScriptコードから書いてしまおう(コード1)。パーティクルをつくる関数(createParticle())が、オブジェクト(particle)をつくってステージ(stage)に加えている。
パーティクルのクラス(Particle)は、Shapeクラスをつぎのように継承する。これは、第18回「クラスの継承と透視投影」「Shapeクラスを継承する3次元座標のクラス定義」のおさらいだ。CreateJSのクラスを継承するときは、コンストラクタからinitialize()メソッドを忘れずに呼び出そう。
まだアニメーションはさせないので、パーティクルのクラス(Particle)のコンストラクタはプロパティを定めて、自身のGraphicsオブジェクトに描画するメソッド(drawParticle())を呼び出すだけだ。これらコード1とコード2で、ステージの真ん中に矩形のパーティクルがひとつ描かれる(前掲図1)。
パーティクルにバネのような弾む動きを与える
つぎは、ステージの真ん中に置いたパーティクルにアニメーションを加える。そこで、クラス(Particle)にアニメーションさせるためのメソッド(accelerateTo())を定めよう。つぎのように、マウスポインタのxy座標を引数に与えて、弾みのついた動きにする。
といって、いきなりお題の動きを式に書いてもわかりづらいだろう。第24回「マウスポインタの動きに弾みがついた曲線を滑らかに描く」で似たようなアニメーションをつくった。このときと同じ、バネのような弾む動きから始めてみる。
とりあえず、クラス(Particle)のアニメーションのメソッド(accelerateTo())はできてしまったことにして、オブジェクトをアニメーションさせるJavaScriptコードから書き加える。Ticker.tickイベントのリスナー関数(updateAnimation())で、マウスポインタの座標に向けて、アニメーションのメソッドが呼出される。そして、マウスポインタの座標は、Stage.stagemousemoveイベントのリスナー関数(recordMousePoint())で変数(mousePoint)にPointオブジェクトとして与えることとした。なお、Pointオブジェクトの初期xy座標値は、ステージ中央だ。
クラス(Particle)のメソッド(accelerateTo())は、つぎのように定めた。移動先のxy座標は、第24回「マウスポインタの動きに弾みがついた曲線を滑らかに描く」「弾みのついた軌跡を描く」と基本的に同じ式で求めている。マウスポインタとパーティクルのxy座標のそれぞれの差(differenceXとdifferenceY)に減速率(0.1)を乗じて、xyの加速度(accelerationXとaccelerationY)とする。それらをxyの速度(_velocityXと_velocityY)に足し込んで減衰率(friction)で割り引く。その速度を、それぞれxy座標(_xと_y)に加えればよい。
前掲コード1とコード2にこれらの手直しを加えたのが、以下のコード3およびコード4だ。マウスポインタの座標をパーティクルが、弾みのついたバネのような動きで追いかける。jsdo.itのコードも併せて掲げたので、アニメーションを確かめてほしい。例によって、クラス(Particle)は[HTML]の欄に定めている。
吸込まれて弾けるパーティクルのアニメーション
前掲jsdo.itのアニメーションは、マウスポインタの座標に向かって弾むように動く。これに手を加えて、お題のマウスポインタの座標に吸い込まれるような動きにしたい。さらにいうと、お題のパーティクルは、マウスポインタに追いつくと、弾けるように反発している。どのような式にすれば、この動きになるのか。
前掲コード4のクラス(Particle)では、アニメーションのメソッド(accelerateTo())で用いた加速度の係数が固定(0.1)だった。この係数(ratio)をつぎのように距離の2乗(square)に反比例させる。つまり、マウスポインタに近づくほど、加速度の係数が高まり、ブラックホールに吸込まれるような動きになるのだ。
もちろん、距離の2乗(square)が0になってしまうと、正しい係数値が求まらない。その場合は、条件判定により係数(ratio)を0と定めた。しかしこれだけでは、0に近い小さな値のとき、加速度が大きくなりすぎて、パーティクルがとんでもない遠くに飛んでしまう。
そこで、ステージの外に飛び去ったパーティクルは、反対の橋にスクロールしてステージ内に戻すことにした。そのためには、ステージの幅と高さをクラス(Particle)のオブジェクトが知っていなければならない。これらの値は、つぎのようにコンストラクタの引数(rightとbottom)に加えた。したがって、パーティクルをつくる関数(createParticle())にも、以下のようにコンストラクタの呼出しにこれらの引数を与える。
前掲コード3とコード4にこれらの手を加えると、パーティクルはマウスポインタの後を吸込まれるように追いかけ、ポインタに追いつくと弾けるように反発する。パーティクルがまだひとつとはいえ、動きは一応でき上がりだ。以下にコード5およびコード6としてまとめ、jsdo.itにサンプルも掲げた。今回はここまでとする。残すところあと2回の本連載、最後までおつき合いいただきたい。