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

第32回 弾力のある多角形を放物線状に落とす

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

前回の第31回位置座標の相互作用で弾力を表すでは,ふたつの点を棒でつなぎ,つぎのjsdo.itのコードのように放物線状に落としてみた。複数のオブジェクトをつなげた弾力のある動きが,座標の移動と位置関係や動く範囲を定めるだけの四則演算で表せた。今回は,点と棒の数を増やして多角形の動きをつくりたい。

点と棒で組上げた三角形を落とす

前回,点と棒のオブジェクトは,それぞれのクラス(VerletPointとVerletStick)からつくった。これらふたつのクラスは,今回そのまま用いる。多角形になっても,クラスの仕組みは変わらないということだ。参照しやすいように,それぞれのクラスを定めた第31回のコード3コード6を以下に改めて掲げておく。

第31回コード3 点を定めるクラスVerletPointにメソッドを追加(再掲)

function VerletPoint(x, y) {
  this.x = this._oldX = x;
  this.y = this._oldY = y;
}
VerletPoint.prototype.update = function() {
  var tempX = this.x;
  var tempY = this.y;
  var velocity = this.getVelocity();
  this.addCoordinates(velocity.x, velocity.y);
  this._oldX = tempX;
  this._oldY = tempY;
};
VerletPoint.prototype.constrain = function(rect) {
  var left = rect.x;
  var right = left + rect.width;
  var top = rect.y;
  var bottom = top + rect.height;
  if (this.x < left) {
    this.x = left;
  } else if (this.x > right) {
    this.x = right;
  }
  if (this.y < top) {
    this.y = top;
  } else if (this.y > bottom) {
    this.y = bottom;
  }
};
VerletPoint.prototype.getVelocity = function() {
  var velocity = new createjs.Point(this.x - this._oldX, this.y - this._oldY);
  return velocity;
};
VerletPoint.prototype.render = function(graphics) {
  graphics.beginFill("black")
  .drawCircle(this.x, this.y, 2.5)
  .endFill();
};
VerletPoint.prototype.addCoordinates = function(x, y) {
  this.x += x;
  this.y += y;
};
VerletPoint.prototype.subtract = function(_point) {
  var subtractedPoint = new VerletPoint(this.x - _point.x, this.y - _point.y);
  return subtractedPoint;
};
VerletPoint.prototype.getLength = function() {
  var dx = this.x;
  var dy = this.y;
  var length = Math.sqrt(dx * dx + dy * dy);
  return length;
};
VerletPoint.prototype.getDistance = function(_point) {
  var distancePoint = this.subtract(_point);
  return distancePoint.getLength();
};

第31回コード6 棒を定めるクラスVerletStickのコンストラクタに引数追加(再掲)

function VerletStick(point0, point1, length, elasticity) {
  if (!elasticity || elasticity > 0.5 || 0 > elasticity) {
    this.elasticity = 0.2;
  } else {
    this.elasticity = elasticity;
  }
  this._point0 = point0;
  this._point1 = point1;
  if (!length || length < 0) {
    this._length = point0.getDistance(point1);
  } else {
    this._length = length;
  }
}
VerletStick.prototype.update = function() {
  var delta = this._point1.subtract(this._point0);
  var distance = delta.getLength();
  var difference = this._length - distance;
  var offsetX = (difference * delta.x / distance)  * this.elasticity;
  var offsetY = (difference * delta.y / distance)  * this.elasticity;
  this._point0.addCoordinates(-offsetX, -offsetY);
  this._point1.addCoordinates(offsetX, offsetY);
};
VerletStick.prototype.render = function(graphics) {
  graphics.beginStroke("black")
  .setStrokeStyle(0.5)
  .moveTo(this._point0.x, this._point0.y)
  .lineTo(this._point1.x, this._point1.y);
};

そして,前回のコード5ふたつの点を棒でつないで放物線状に落とすを,以下の抜書きのように書き替える。まず,(VerletStickオブジェクト)も複数になるので,変数(_sticks)の配列に納めることにした。新たに加えた関数(makeSticks())で点(VerletPointオブジェクト)の数に応じてインスタンスをつくり,この配列に加える。なお,forループを抜けてから,終わりの点と初めの点を棒で結ばないと多角形が閉じないことに注意したい。

そして,多角形の頂点数が自由に決められるように,点をつぎの関数により生成して,やはり変数(_points)の配列に納めることにした。始めは,三角形をつくる。

makePoints(中心x座標, 中心y座標, 半径, 頂点数)

多角形の頂点をつくるこの関数は,-π/2ラジアンつまり時計の12時の角度(angle)から,引数の頂点数に応じた中心角(theta)と引数の半径(radius)で点のインスタンスをつくって,配列(_points)に加えている。この計算の考え方については,第15回「Matrix2Dクラスで座標を回す」星形を頂点座標と直線で描くが参考になるだろう。

// var _stick;
var _sticks = [];

var _radius = 50;
function initialize() {

  // _points.push(new VerletPoint(70, 100));
  // _points.push(new VerletPoint(50, 25));
  makePoints(100, 70, 50, 3);
  // _stick = new VerletStick(_points[0], _points[1]);
  makeSticks();

}

function makePoints(centerX, centerY, radius, vertices) {
  var angle = -Math.PI / 2;
  var theta = 2 * Math.PI / vertices;
  for (var i = 0; i < vertices; i++) {
    var x = centerX + radius * Math.cos(angle);
    var y = centerY + radius * Math.sin(angle);
    _points.push(new VerletPoint(x, y));
    angle += theta;
  }
}
function makeSticks() {
  var count = _points.length;
  for (var i = 0; i < count - 1; i++) {
    _sticks.push(new VerletStick(_points[i], _points[i + 1]));
  }
  _sticks.push(new VerletStick(_points[i], _points[0]));
}

Ticker.tickイベントのリスナー関数(draw())は,扱う棒のオブジェクトが複数になったので,更新と描画はそれぞれ新たに設けた関数(updateSticks()とrenderSticks())の呼出しにより行う。どちらの関数も,棒が納められた配列(_sticks)からオブジェクト(stick)を取り出して,それぞれに応じたメソッド(update()とrender())を呼び出している。

function draw(eventObject) {

  // _stick.update();
  updateSticks();

  // _stick.render(drawingGraphics);
  renderSticks();

}

function updateSticks() {
  var count = _sticks.length;
  for (var i = 0; i < count; i++) {
    var stick = _sticks[i];
    stick.update();
  }
}

function renderSticks() {
  var count = _sticks.length;
  for (var i = 0; i < count; i++) {
    var stick = _sticks[i];
    stick.render(drawingGraphics);
  }
}

これらの書き替えを終えたJavaScriptが以下のコード1だ。3つの点と棒で三角形をつくって,放物線状に落としている。アニメーションはつぎのjsdo.itのコードで確かめてほしい。三角形になると,Canvasの下端でも弾むような動きが見られる。

コード1 点と棒で三角形をつくって放物線状に落とす

var stage;
var drawingGraphics;
var _points = [];
var _sticks = [];
var _stageRect;
var velocityX = 5;
var velocityY = 0.25;
var _radius = 50;
function initialize() {
  var canvasElement = document.getElementById("myCanvas");
  var shape = new createjs.Shape();
  stage = new createjs.Stage(canvasElement);
  stage.addChild(shape);
  drawingGraphics = shape.graphics;
  _stageRect = new createjs.Rectangle(
    _radius / 8,
    _radius / 8,
    canvasElement.width - _radius / 4,
    canvasElement.height - _radius / 4
  );
  makePoints(100, 70, 50, 3);
  makeSticks();
  _points[0].x += velocityX;
  createjs.Ticker.timingMode = createjs.Ticker.RAF;
  createjs.Ticker.addEventListener("tick", draw);
}
function draw(eventObject) {
  updatePoints();
  updateSticks();
  drawingGraphics.clear();
  renderPoints();
  renderSticks();
  stage.update();
}
function makePoints(centerX, centerY, radius, vertices) {
  var angle = -Math.PI / 2;
  var theta = 2 * Math.PI / vertices;
  for (var i = 0; i < vertices; i++) {
    var x = centerX + radius * Math.cos(angle);
    var y = centerY + radius * Math.sin(angle);
    _points.push(new VerletPoint(x, y));
    angle += theta;
  }
}
function makeSticks() {
  var count = _points.length;
  for (var i = 0; i < count - 1; i++) {
    _sticks.push(new VerletStick(_points[i], _points[i + 1]));
  }
  _sticks.push(new VerletStick(_points[i], _points[0]));
}
function updatePoints() {
  var count = _points.length;
  for (var i = 0; i < count; i++) {
    var point = _points[i];
    point.y += velocityY;
    point.update();
    point.constrain(_stageRect);
  }
}
function updateSticks() {
  var count = _sticks.length;
  for (var i = 0; i < count; i++) {
    var stick = _sticks[i];
    stick.update();
  }
}
function renderPoints() {
  var count = _points.length;
  for (var i = 0; i < count; i++) {
    var point = _points[i];
    point.render(drawingGraphics);
  }
}
function renderSticks() {
  var count = _sticks.length;
  for (var i = 0; i < count; i++) {
    var stick = _sticks[i];
    stick.render(drawingGraphics);
  }
}

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入