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

第25回　楕円軌道に残像を描きながら回るパーティクル

HTML5, Canvas, CreateJS, アニメーション, jsdo.it, 楕円軌道

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

今回から取り組むお題は，さまざまな楕円軌道を描いて回るパーティクルだ。CreateJSコミュニティエバンジェリストSebastian DeRossi氏による「Fun with Particles」を参考に，仕組みがわかりやすいスクリプトに書き直した。つぎのjsdo.itのサンプルが目指す表現だ。楕円軌道を動かす式の立て方が課題となる。

楕円軌道を描いて動かす

今回のスクリプトは以下のような組立てにしよう。楕円軌道で動くパーティクルは，Shapeクラスのサブクラス（Particle）として定める。Shapeクラスの継承については，第18回「クラスの継承と透視投影」の「Shapeクラスを継承する3次元座標のクラス定義」で解説した。初期化の関数（initialize()）をbody要素のonload属性で呼び出すのはいつもどおりだ。パーティクルのオブジェクトは，その関数の中からコンストラクタ関数を呼び出してつくる。

<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script>
function Particle(設定の引数) {
  // パーティクルの生成
}
Particle.prototype = new createjs.Shape();
</script>
<script>
var stage;
var particle;
function initialize() {
  var canvasElement = document.getElementById("myCanvas");
  stage = new createjs.Stage(canvasElement);
  particle = new Particle(設定の引数);
  // 初期化の処理
}
</script>

<body onLoad="initialize()">
  <canvas id="myCanvas" width="240" height="180"></canvas>
</body>

さて，楕円軌道の動きは，円軌道の方程式に手を加えて導く。半径1の円周上で，x軸の正方向となす角がθの点は（cosθ, sinθ）で定められた（再掲第11回図4⁠）⁠。このxy座標に原点からの距離を掛合わせれば，任意の距離と角度の座標が求められる（第11回「マウスポインタの動きに合わせてインスタンスをランダムに落とす」の「インスタンスの動きに水平方向の初速を加える」参照⁠）⁠。そして，その角度を変えれば，座標が円軌道の上を動く。

  • 水平座標(x) = 水平中心座標 + 半径×cos角度
  • 垂直座標(y) = 垂直中心座標 + 半径×sin角度

第11回 図4　原点から距離が1で角度θのxy座標は（cosθ, sinθ）（⁠再掲）

第11回 図4　原点から距離が1で角度θのxy座標は（cosθ, sinθ）（再掲）

円軌道を楕円にするには，三角関数cosとsinに掛合わせる半径の長さを変えればよい。パーティクルを楕円軌道で回すメソッド（move()）は，つぎのようにパーティクルのクラス（Particle）に定めた。引数に渡されたラジアン角（advance）だけ，楕円軌道に沿って動く。なお，中心のxy座標（centerXとcenterY）および半径（radius⁠）⁠，ならびに現在の回転角（angle）は，別にプロパティとして与える。また，垂直方向の半径は係数（0.8）を乗じて変えている。

Particle.prototype.move = function(advance) {
  var angle = this.angle + advance;
  this.x = this.centerX + this.radius * Math.cos(angle);
  this.y = this.centerY + this.radius * 0.8 * Math.sin(angle);
  this.angle = angle;
};

パーティクルを定めるクラス（Particle）には，楕円軌道で回すメソッド（move()）のほかに，基本的なプロパティを与えるメソッド（reset()）も加えた（コード1⁠）⁠。後者のメソッドにより，楕円軌道の中心座標（centerXとcenterY）や楕円の横半径（radius⁠）⁠，および軌道上の位置を決めるラジアン角（angle）がいつでも変えられる。

コード1　パーティクルを定めるクラス

function Particle(radius, color) {
  this.initialize();
  this.graphics.beginFill(color)
  .drawCircle(0, 0, radius)
  .endFill();
  this.compositeOperation = "lighter";
}
Particle.prototype = new createjs.Shape();
Particle.prototype.reset = function(x, y, radius, angle) {
  this.centerX = x;
  this.centerY = y;
  this.radius = radius;
  this.angle = angle;
};
Particle.prototype.move = function(advance) {
  var angle = this.angle + advance;
  this.x = this.centerX + this.radius * Math.cos(angle);
  this.y = this.centerY + this.radius * 0.8 * Math.sin(angle);
  this.angle = angle;
};

パーティクルのインスタンス（particle）をひとつつくって，楕円軌道で動かすのが以下のコード2だ（図1⁠）⁠。インスタンスは設定の関数（resetParticle()）に渡して，クラスのメソッド（reset()）によりランダムな楕円軌道の半径（radius）とラジアン角の位置（angle）とともに，中心（center）の座標を与える。

また，Ticker.tickイベントのリスナー関数（tick()）からは，パーティクル移動の関数（moveParticle()）を呼出す。後者の関数は今のところ，クラスに定めたメソッド（move()）の呼出しにより，オブジェクトを楕円軌道で回しているだけだ。

図1　丸いパーティクルが楕円軌道を描いて回る

図1　丸いパーティクルが楕円軌道を描いて回る

コード2　クラスでつくったオブジェクトひとつを楕円軌道で回す

var stage;
var center = new createjs.Point();
var particle;
function initialize() {
  var canvasElement = document.getElementById("myCanvas");
  var stageWidth = canvasElement.width;
  var stageHeight = canvasElement.height;
  stage = new createjs.Stage(canvasElement);
  center.x = stageWidth / 2;
  center.y = stageHeight / 2;
  particle = new Particle(4, "#0016E9");
  resetParticle(particle);
  stage.addChild(particle);
  createjs.Ticker.timingMode = createjs.Ticker.RAF;
  createjs.Ticker.addEventListener("tick", tick);
}
function resetParticle(particle) {
  var radius = 40 + Math.random() * 50;
  var angle = Math.random() * Math.PI * 2;
  particle.reset(center.x, center.y, radius, angle);
}
function tick() {
  moveParticle(particle);
  stage.update();
}
function moveParticle(particle) {
  particle.move(Math.PI / 90);
}

HTML5, Canvas, CreateJS, アニメーション, jsdo.it, 楕円軌道

著者プロフィール

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

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

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

著書