HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う

第34回　パーティクルの弾けるような動きをつくる

HTML5, Canvas, CreateJS, アニメーション, jsdo.it

この記事を読むのに必要な時間：およそ 8 分

吸込まれて弾けるパーティクルのアニメーション

前掲jsdo.itのアニメーションは，マウスポインタの座標に向かって弾むように動く。これに手を加えて，お題のマウスポインタの座標に吸い込まれるような動きにしたい。さらにいうと，お題のパーティクルは，マウスポインタに追いつくと，弾けるように反発している。どのような式にすれば，この動きになるのか。

前掲コード4のクラス（Particle)では，アニメーションのメソッド（accelerateTo()）で用いた加速度の係数が固定（0.1）だった。この係数（ratio）をつぎのように距離の2乗（square）に反比例させる。つまり，マウスポインタに近づくほど，加速度の係数が高まり，ブラックホールに吸込まれるような動きになるのだ。


Particle.prototype.accelerateTo = function (targetX, targetY) {

  var square = differenceX * differenceX + differenceY * differenceY;
  var ratio;
  if (square > 0) {
    ratio = 50 / square;
  } else {
    ratio = 0;
  }
  /*
  var accelerationX = differenceX * 0.1;
  var accelerationY = differenceY * 0.1;
  */
  var accelerationX = differenceX * ratio;
  var accelerationY = differenceY * ratio;
  _velocityX += accelerationX;
  _velocityY += accelerationY;
  _velocityX *= this.friction;
  _velocityY *= this.friction;
  _x += _velocityX;
  _y += _velocityY;

};

もちろん，距離の2乗（square）が0になってしまうと，正しい係数値が求まらない。その場合は，条件判定により係数（ratio）を0と定めた。しかしこれだけでは，0に近い小さな値のとき，加速度が大きくなりすぎて，パーティクルがとんでもない遠くに飛んでしまう。

そこで，ステージの外に飛び去ったパーティクルは，反対の橋にスクロールしてステージ内に戻すことにした。そのためには，ステージの幅と高さをクラス（Particle）のオブジェクトが知っていなければならない。これらの値は，つぎのようにコンストラクタの引数（rightとbottom）に加えた。したがって，パーティクルをつくる関数（createParticle()）にも，以下のようにコンストラクタの呼出しにこれらの引数を与える。

// function Particle(x, y) {
function Particle(x, y, right, bottom) {

  this.right = right;
  this.bottom = bottom;

}

Particle.prototype.accelerateTo = function (targetX, targetY) {

  if (_x < 0) {
    _x += this.right;
  } else if (_x > this.right) {
    _x -= this.right;
  }
  if (_y < 0) {
    _y += this.bottom;
  } else if (_y > this.bottom) {
    _y -= this.bottom;
  }

};

function createParticle() {
  // particle = new Particle(stageWidth / 2, stageHeight / 2);
  particle = new Particle(stageWidth / 2, stageHeight / 2, stageWidth, stageHeight);

}

前掲コード3とコード4にこれらの手を加えると，パーティクルはマウスポインタの後を吸込まれるように追いかけ，ポインタに追いつくと弾けるように反発する。パーティクルがまだひとつとはいえ，動きは一応でき上がりだ。以下にコード5およびコード6としてまとめ，jsdo.itにサンプルも掲げた。今回はここまでとする。残すところあと2回の本連載，最後までおつき合いいただきたい。

コード5　吸込まれるように動いて弾けるメソッドに書替えたパーティクルのクラス

function Particle(x, y, right, bottom) {
  this.initialize();
  this.x = x;
  this.y = y;
  this.right = right;
  this.bottom = bottom;
  this.velocityX = 0;
  this.velocityY = 0;
  this.friction = 0.95;
  this.radius = 4;
  this.drawParticle();
}
Particle.prototype = new createjs.Shape();
Particle.prototype.drawParticle = function () {
  var size = this.radius * 2;
  this.graphics.beginFill("white")
  .drawRect(-this.radius, -this.radius, size, size);
};
Particle.prototype.accelerateTo = function (targetX, targetY) {
  var _x = this.x;
  var _y = this.y;
  var _velocityX = this.velocityX;
  var _velocityY = this.velocityY;
  var differenceX = targetX - _x;
  var differenceY = targetY - _y;
  var square = differenceX * differenceX + differenceY * differenceY;
  var ratio;
  if (square > 0) {
    ratio = 50 / square;
  } else {
    ratio = 0;
  }
  var accelerationX = differenceX * ratio;
  var accelerationY = differenceY * ratio;
  _velocityX += accelerationX;
  _velocityY += accelerationY;
  _velocityX *= this.friction;
  _velocityY *= this.friction;
  _x += _velocityX;
  _y += _velocityY;
  if (_x < 0) {
    _x += this.right;
  } else if (_x > this.right) {
    _x -= this.right;
  }
  if (_y < 0) {
    _y += this.bottom;
  } else if (_y > this.bottom) {
    _y -= this.bottom;
  }
  this.x = _x;
  this.y = _y;
  this.velocityX = _velocityX;
  this.velocityY = _velocityY;
};

コード6　パーティクルがマウスポインタの後を吸込まれるように追いかけて弾けるアニメーション

var stage;
var stageWidth;
var stageHeight;
var mousePoint = new createjs.Point();
var particle;
function initialize() {
  var canvasElement = document.getElementById("myCanvas");
  stageWidth = canvasElement.width;
  stageHeight = canvasElement.height;
  stage = new createjs.Stage(canvasElement);
  mousePoint.x = stageWidth / 2;
  mousePoint.y = stageHeight / 2;
  createParticle();
  stage.update();
  stage.addEventListener("stagemousemove", recordMousePoint);
  createjs.Ticker.timingMode = createjs.Ticker.RAF;
  createjs.Ticker.addEventListener("tick", updateAnimation);
}
function recordMousePoint(eventObject) {
  mousePoint.x = eventObject.stageX;
  mousePoint.y = eventObject.stageY;
}
function updateAnimation(eventObject) {
  var mouseX = mousePoint.x;
  var mouseY = mousePoint.y;
  particle.accelerateTo(mouseX, mouseY);
  stage.update();
}
function createParticle() {
  particle = new Particle(stageWidth / 2, stageHeight / 2, stageWidth, stageHeight);
  stage.addChild(particle);
}

HTML5, Canvas, CreateJS, アニメーション, jsdo.it

著者プロフィール

野中文雄（のなかふみお）

ソフトウェアトレーナー，テクニカルライター，オーサリングエンジニア。上智大学法学部卒，慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で，総務・人事，企画，外資系企業担当営業などに携わる。その後，マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング，コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URL：http://www.FumioNonaka.com/

著書