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

第30回 Box2Dでたくさんのボールを床に落とし続ける

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

前回の第29回Box2Dで落としたボールを床に弾ませるは,剛体のボールひとつを床に自由落下させた。今回は,ボールの数を増やしてランダムな大きさと位置で落とすとともに,スクリプトの組立ても整えたい。前回書き上げた第29回コード2自由落下させたボールを静的な床の上で弾ませるに手を加えてゆこう。

ボールをつくり続ける

第29回コード2には,ボールをつくる関数(addBall())が定められている。そして,素材画像を読込み終えたリスナー関数(loadFinished())から呼び出した。だが,ボールをいくつもつくるため,このリスナーに替えて,Ticker.tickイベントのリスナー関数(tick())から呼び出すことにする。

もっとも,Ticker.tickイベントのたびにボールを増やしたのでは,間隔が短すぎる。そこで,イベント間の経過時間をイベントオブジェクトのdeltaプロパティで調べて変数(duration)に加算し,合計値が予め決めた変数(interval)の時間より大きくなったら剛体のボールをつくることにした。そのため,経過時間はボールを増やす関数(addBall())の引数(delta)に加えて渡している。なお,ボールの剛体のxy座標値(nXとnY)および半径(radius)はランダムに定めた。

var duration = 0;
var interval = 50;

function tick(eventObject) {
  var delta = eventObject.delta;
  addBall(delta);

}

// function addBall() {
function addBall(delta) {
  duration += delta;
  if (duration > interval) {
    var nX = floor.width * Math.random() + floor.x;
    var nY = -stageHeight * Math.random();
    var radius = 15 * (Math.random() - 0.5) + standardRadius;
    // var ball = createDynamicBall(stageWidth / 2, -imageRadius, imageRadius);
    var ball = createDynamicBall(nX, nY, radius);

    duration = 0;
  }
}

function loadFinished(eventObject) {

  // addBall();
}

これで,大小さまざまなボールが,ランダムな位置からつぎつぎに床に向けて自由落下し,互いにぶつかり合っては床下に落ちる図1)。これこそ,まさに物理シミュレーションの醍醐味だ。さて,これだけのコードで不安を覚えた読者はおられるだろうか。その危機感は正しい。

ボールのオブジェクトと剛体は,ステージと物理空間にひたすら加えられるばかりで,除かれることがない。ボールが床下に見えなくなったといっても,それはあくまで人形のボールから見た話だ。黒子のBox2Dは構うことなく,物理空間に加えられたすべての剛体のシミュレーションを続ける。演算の負荷は瞬く間に上がってしまう。

図1 さまざまな大きさのボールがランダムな位置からつぎつぎに床に向けて自由落下する

図1 さまざまな大きさのボールがランダムな位置からつぎつぎに床に向けて自由落下する

では,どうすればいいかというと,本連載でもすでに紹介してきたようにオブジェクトを使い回すことだ。ステージから見えなくなった人形のオブジェクトは表示リストから外すとともに,剛体も物理演算のシミュレーションから除く。けれど,その剛体とオブジェクトはとっておき,新たなボールを求められたときに初期化して使い回せばよい。そうしたところがまだ不完全とはいえ,参照の便を考えてここまでをコード1としてつぎにまとめた。

コード1 ランダムな位置と大きさのボールをひたすらつくって床に自由落下させる

var SCALE = 1 / 30;
var stage;
var world;
var gravityVertical = 15;
var velocityIterations = 8;
var positionIterations = 3;
var stageWidth;
var stageHeight;
var ballImage;
var imageRadius;
var standardRadius = 20;
var floor = new createjs.Rectangle();
var duration = 0;
var interval = 50;
function initialize() {
  var canvasElement = document.getElementById("myCanvas");
  var gravity = new Box2D.Common.Math.b2Vec2(0, gravityVertical);
  stage = new createjs.Stage(canvasElement);
  stageWidth = canvasElement.width;
  stageHeight = canvasElement.height;
  floor.width = stageWidth * 0.8;
  floor.x = (stageWidth - floor.width) / 2;
  initializeBox2D(gravity, stageWidth, stageHeight);
  createjs.Ticker.timingMode = createjs.Ticker.RAF;
  preloadImage("images/Pen.png");
}
function initializeBox2D(gravity, stageWidth, stageHeight) {
  world = new Box2D.Dynamics.b2World(gravity, true);
  var floorShape = createStaticFloor(stageWidth / 2, stageHeight - standardRadius, floor.width, standardRadius, "#CCCCCC");
  stage.addChild(floorShape);
}
function tick(eventObject) {
  var delta = eventObject.delta;
  addBall(delta);
  update(delta);
  stage.update();
}
function addBall(delta) {
  duration += delta;
  if (duration > interval) {
    var nX = floor.width * Math.random() + floor.x;
    var nY = -stageHeight * Math.random();
    var radius = 15 * (Math.random() - 0.5) + standardRadius;
    var ball = createDynamicBall(nX, nY, radius);
    stage.addChild(ball);
    duration = 0;
  }
}
function createDynamicBall(nX, nY, radius) {
  var dynamicBody = Box2D.Dynamics.b2Body.b2_dynamicBody;
  var bodyDef = defineBody(nX, nY, dynamicBody);
  var ball = createVisualBall(radius, bodyDef);
  var circleShape = new Box2D.Collision.Shapes.b2CircleShape(radius * SCALE);
  var fixtureDef = defineFixture(circleShape);
  setFixture(fixtureDef, 1, 0.1, 0.8);
  createBody(world, bodyDef, fixtureDef);
  return ball;
}
function createStaticFloor(nX, nY, nWidth, nHeight, color) {
  var staticBody = Box2D.Dynamics.b2Body.b2_staticBody
  var bodyDef = defineBody(nX, nY, staticBody);
  var floorShape = createVisualFloor(nWidth, nHeight, color, bodyDef);
  var boxShape = new Box2D.Collision.Shapes.b2PolygonShape();
  var fixtureDef = defineFixture(boxShape);
  boxShape.SetAsBox(nWidth / 2 * SCALE, nHeight / 2 * SCALE);
  createBody(world, bodyDef, fixtureDef);
  return floorShape;
}
function defineBody(nX , nY, bodyType) {
  var bodyDef = new Box2D.Dynamics.b2BodyDef();
  bodyDef.position.Set(nX * SCALE, nY * SCALE);
  bodyDef.type = bodyType;
  return bodyDef;
}
function defineFixture(myShape) {
  var fixtureDef = new Box2D.Dynamics.b2FixtureDef();
  fixtureDef.shape = myShape;
  return fixtureDef;
}
function setFixture(fixtureDef, density, friction, restitution) {
  fixtureDef.density = density;
  fixtureDef.friction = friction;
  fixtureDef.restitution = restitution;
}
function createBody(world, bodyDef, fixtureDef) {
  var body = world.CreateBody(bodyDef);
  body.CreateFixture(fixtureDef);
}
function update(delta) {
  world.Step(delta / 1000, velocityIterations, positionIterations);
  var body = world.GetBodyList();
  while (body) {
    var myObject = body.GetUserData();
    if (myObject) {
      var position = body.GetPosition();
      myObject.x = position.x / SCALE;
      myObject.y = position.y / SCALE;
      myObject.rotation = body.GetAngle()/createjs.Matrix2D.DEG_TO_RAD;
    }
    body = body.GetNext();
  }
}
function createVisualBall(radius, bodyDef) {
  var ball = new createjs.Bitmap(ballImage);
  ball.regX = ballImage.width / 2;
  ball.regY = ballImage.height / 2;
  ball.scaleX = ball.scaleY = radius / imageRadius;
  bodyDef.userData = ball;
  return ball;
}
function createVisualFloor(nWidth, nHeight, color, bodyDef) {
  var floorShape = new createjs.Shape();
  floorShape.regX = nWidth / 2;
  floorShape.regY = nHeight / 2;
  floorShape.graphics
  .beginFill(color)
  .drawRect(0, 0, nWidth, nHeight);
  bodyDef.userData = floorShape;
  return floorShape;
}
function preloadImage(file) {
  var loader = new createjs.LoadQueue(false);
  loader.addEventListener("fileload", loadFinished);
  loader.loadFile(file);
}
function loadFinished(eventObject) {
  ballImage = eventObject.result;
  imageRadius = ballImage.width / 2;
  createjs.Ticker.addEventListener("tick", tick);
}

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入