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

第27回 ランダムな楕円軌道を描くパーティクルの仕上げ

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

前回の第26回パーティクルを使い回しながらさまざまな楕円軌道で回すでは,速度からランダムに導いた楕円軌道でパーティクルを回してみた。今回は,そのランダムをさらにばらつかせる。そして,楕円運動の速度から位置を求める方程式についても,数学的な説明を補おう。

パーティクルの動き始めもランダムにする

前回できあがりの第26回コード4パーティクル100個を使い回しながらさまざまな楕円軌道で回すでは,すべてのパーティクルが一斉に動き出す。そのため,パーティクルの動きが揃って同じ位置に集まってしまう図1)。つぎのようにパーティクルの数(total)を増やしてみるとわかりやすい。ただし,オブジェクトを使い回して設定し直す関数(resetParticle())により,つぎの再設定時(lifetime)がランダムに定められるため,動きのばらつきはやがて広がる第26回100個のパーティクルを使い回して再設定する参照)。

var total = 200;   // 100;

function resetParticle(particle) {

  var lifetime = Math.random()* total | 0;
  particle.reset(center.x, center.y, radius, angle, lifetime);
}

図1 初めパーティクルの動き始めが揃って同じ位置に集まる

図1 初めパーティクルの動き始めが揃って同じ位置に集まる

ここはやはり,動き始めについても,ランダムな時間差を与えることにする。クラス(Particle)のパーティクル設定のメソッド(reset())に加える引数(delay)で,動き出すまでにタメを与える。引数に与えられるランダムな正数値は,プロパティ(delay)にもつ。そして,カウンタのプロパティ(index)をアニメーションのたびに加算して,タメの値を超えたら動かす。カウントアップしながらふたつのプロパティ値を比べるメソッド(isMovable())は,クラスに新たに備えた。

// Particle.prototype.reset = function(x, y, radius, angle, lifetime) {
Particle.prototype.reset = function(x, y, radius, angle, lifetime, delay) {

  this.delay = delay;
  this.index = 0;
};

Particle.prototype.isMovable = function() {
  var movable = (++this.index > this.delay);
  return movable;
};

アニメーションの関数(tick())は以下のように,パーティクルを動かしてよいかどうか,上記で加えたメソッド(isMovable())により確かめたうえで動かすようにした。

タメの値(delay)は,パーティクルを設定する関数(resetParticle())から,ランダムに定めてオブジェクト(particle)のメソッド(reset())に渡す。ただし,もとになる値を関数が引数として受け取っている。これは初期設定の関数(initialize())がパーティクルを予め定めた数(total)つくるとき,forループのカウンタ変数(i)がもつ値だ。すると,ループの初めにつくられたオブジェクトは早めに動き出す。これで,パーティクルが揃ってタメすぎることを防げる。

function initialize() {

  for(var i = 0; i < total; i++) {

    // resetParticle(particle);
    resetParticle(particle, i);

  }

}
// function resetParticle(particle) {
function resetParticle(particle, delay) {

  delay *= Math.random();
  // particle.reset(center.x, center.y, radius, angle, lifetime);
  particle.reset(center.x, center.y, radius, angle, lifetime, delay);
}
function tick() {

  for(var i = 0; i < count; i++) {
    var particle = particles[i];
    // moveParticle(particle);
    if (particle.isMovable()) {
      moveParticle(particle, i);
    }
  }

}
// function moveParticle(particle) {
function moveParticle(particle, index) {
  if (particle.lifetime > 0) {

  } else {
    // resetParticle(particle);
    resetParticle(particle, index);
  }
}

これらの書替えをおこなったパーティクルのクラス(Particle)と楕円軌道でアニメーションさせるJavaScriptコードは,それぞれコード1およびコード2としてまとめた。これで,パーティクルの動き始めにそれぞれランダムなタメが加わる図2)。オブジェクトが使い回されて再設定されるときにも,このタメは利いているはずだ。わかりづらいだろうが,画面の真ん中に一瞬留まるパーティクルができている。

図2 パーティクルの動き始めにランダムなタメが加わってから楕円軌道を回り出す

図2 パーティクルの動き始めにランダムなタメが加わってから楕円軌道を回り出す

コード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, lifetime, delay) {
  this.x = x;
  this.y = y;
  this.speedX = radius * Math.cos(angle);
  this.speedY = radius * Math.sin(angle);
  this.lifetime = lifetime;
  this.angle = 0;
  this.delay = delay;
  this.index = 0;
};
Particle.prototype.move = function(advance) {
  var angle = this.angle + advance;
  var velocityX = this.speedX * Math.sin(angle);
  var velocityY = this.speedY * Math.cos(angle);
  this.x += velocityX;
  this.y += velocityY;
  this.angle = angle;
  this.lifetime--;
};
Particle.prototype.isMovable = function() {
  var movable = (++this.index > this.delay);
  return movable;
};

コード2 パーティクルの動き始めにランダムなタメを加えてから楕円軌道で回す

var stage;
var total = 200;
var center = new createjs.Point();
var particles = [];
var fading = 0.04;
function initialize() {
  var canvasElement = document.getElementById("myCanvas");
  var stageWidth = canvasElement.width;
  var stageHeight = canvasElement.height;
  stage = new createjs.Stage(canvasElement);
  stage.autoClear = false;
  center.x = stageWidth / 2;
  center.y = stageHeight / 2;
  for(var i = 0; i < total; i++) {
    var radius = 1 + Math.random() * 4;
    var particle = new Particle(radius, "#0016E9");
    resetParticle(particle, i);
    particles.push(particle);
    stage.addChild(particle);
  }
  addBackground(stageWidth, stageHeight, fading);
  createjs.Ticker.timingMode = createjs.Ticker.RAF;
  createjs.Ticker.addEventListener("tick", tick);
}
function resetParticle(particle, delay) {
  var radius = 1 + Math.random();
  var angle = Math.random() * Math.PI * 2;
  var lifetime = Math.random()* total | 0;
  delay *= Math.random();
  particle.reset(center.x, center.y, radius, angle, lifetime, delay);
}
function tick() {
  var count = particles.length;
  for(var i = 0; i < count; i++) {
    var particle = particles[i];
    if (particle.isMovable()) {
      moveParticle(particle, i);
    }
  }
  stage.update();
}
function moveParticle(particle, index) {
  if (particle.lifetime > 0) {
    particle.move(Math.PI / 90);
  } else {
    resetParticle(particle, index);
  }
}
function addBackground(width, height, alpha) {
  var background = new createjs.Shape();
  background.graphics.beginFill("black")
  .drawRect(0, 0, width, height)
  .endFill();
  stage.addChild(background);
  background.alpha = alpha;
}

著者プロフィール

野中文雄(のなかふみお)

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入