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

第36回 たくさんのオブジェクトを連結リストで扱う

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

連結リストを使ったエレメントの扱い方

第35回コード1クラスからつくったたくさんのパーティクルを弾けるようにアニメーションさせるに前掲コード1の連結リストのクラス(Particle)を採り入れて書き替えよう。まず,変数(particles)には,配列に替えて連結リストのインスタンスを与える。そして,パーティクルをつくる関数(createParticles())は,でき上がったインスタンスを連結リストに納める。

// var particles = [];
var particles = new LinkedList();

function createParticles(amount) {
  for (var i = 0; i < amount; i++) {

    var particle = new Particle(_x, _y, stageWidth, stageHeight);
    // particles[i] = particle;
    particles.push(particle);

  }
}

つぎに,パーティクルをアニメーションさせる関数(updateAnimation())は,前述のとおりの処理になる。つまり,連結リストからプロパティ(first)で初めのパーティクルを得る。それを動かしたら,プロパティ(next)からつぎのオブジェクトを取り出す。whileループでオブジェクトがなくなるまでこれを繰り返せばよい。

function updateAnimation(eventObject) {
  // var count = particles.length;

  var particle = particles.first;
  // for (var i = 0; i < count; i++) {
  while (particle) {
    // var particle = particles[i];

    particle = particle.next;
  }
  stage.update();
}

これらを書き直したのが,以下のコード1だ。前回つくったサンプルと同じように,たくさんのパーティクルがマウスポインタの後を追いかけて弾けるように舞い散る図2⁠。前掲コード1と重複するが,確認のためクラスの定めをコード3にまとめた。また,jsdo.itのサンプルも併せて掲げる。

図2 たくさんのパーティクルがマウスポインタを追って弾けるように舞い散る

図2 たくさんのパーティクルがマウスポインタを追って弾けるように舞い散る

コード2 連結リストに入れたパーティクルをマウスポインタに追随させて弾けるように動かす

var stage;
var stageWidth;
var stageHeight;
var mousePoint = new createjs.Point();
var particles = new LinkedList();
var numParticles = 3000;
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;
  createParticles(numParticles);
  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;
  var particle = particles.first;
  while (particle) {
    particle.accelerateTo(mouseX, mouseY);
    particle = particle.next;
  }
  stage.update();
}
function createParticles(amount) {
  for (var i = 0; i < amount; i++) {
    var _x = Math.random() * stageWidth;
    var _y = Math.random() * stageHeight;
    var particle = new Particle(_x, _y, stageWidth, stageHeight);
    particles.push(particle);
    stage.addChild(particle);
  }
}

コード3 パーティクルと連結リストのクラス

// パーティクルのクラス
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 = 0.5;
  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;
};
// 連結リストのクラス
function LinkedList() {}
LinkedList.prototype.push = function (element) {
  var _last = this.last;
  if (_last) {
    _last.next = element;
    element.prev = _last;
    this.last = element;
  } else {
    this.first = this.last = element;
  }
};

連結リストを使う意味

今回のお題では,初めにパーティクルをまとめて,後はそれをひたすら順に取り出すだけなので,連結リストをあえて使う利点はなく,配列で構わない。連結リストで手間が省けるのは,インデックスをふらないことだ。

だからたとえば,リストの先頭にオブジェクトを加えるという処理がたくさんある場合,配列はそのたびにインデックスをふり直さなければならない。連結リストなら,先頭だったオブジェクトと新たに加えるオブジェクトふたつのプロパティを書き替えるだけで済む。また,今参照しているオブジェクトをリストから除くときも,連結リストならその前後のオブジェクトのプロパティを改めるだけだ※1⁠。配列だとこの場合も,インデックスのふり直しが起こる。

とはいえ,そうした処理を大量あるいは頻繁に行うことはおそらく少ない。また,ブラウザによるArrayクラスの扱いは最適化が進んでいるため,速さにおいて優れる場合はかぎられたり,環境によりばらついたりもする。使うとすれば,クラスにそうした処理を自らの手で備えるときだろう。また,Box2Dのようにライブラリの実装を理解するときにも役立つ。デザインパターン「Iterator」繰返しの意)でも,一部この考えが用いられている。

この第36回をもって,本連載を閉じる。1年半以上にわたっておつき合いくださった読者のみなさんに感謝したい。JavaScriptのライブラリCreateJSとCanvasを使った「Flashみたいな」表現とその考え方が少しでもお伝えできたならば幸いだ。なお,この連載と入れ替るかたちで新たな連載Away3D TypeScriptではじめる3次元表現が始まった。CreateJSでは難しかった3次元の表現について,やはりサンプルコードをお題として解説している。興味がある方は,ぜひお読みいただきたい。

※1
今回のお題では,連結リストにおける前のオブジェクトを参照するプロパティ(prev)は使わなかった。リストの先頭にオブジェクトを加えたり,途中のオブジェクトを除いたりするとき,このプロパティを書き替えることになる。

本連載が終了した後の2014年12月12日付でCreateJSがアップデートされました。連載で書いたコードは,新バージョンでは正しく動かないことがあります。新しいCreateJSで書くコードはどう変わるのかが著者のサイトで解説されていますのでご参照ください(04「古いコードを新たに書替えてみる」には新バージョンに書替えたjsdo.itのサンプルが掲載されています⁠⁠。

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書