吸込まれて弾けるパーティクルのアニメーション
前掲jsdo.
前掲コード4のクラス
Particle.prototype.accelerateTo = function (targetX, targetY) {
var square = differenceX * differenceX + differenceY * differenceY;
var ratio;
if (square > 0) {
ratio = 50 / square;
} else {
ratio = 0;
}
/*
var accelerationX = differenceX * 0.1;
var accelerationY = differenceY * 0.1;
*/
var accelerationX = differenceX * ratio;
var accelerationY = differenceY * ratio;
_velocityX += accelerationX;
_velocityY += accelerationY;
_velocityX *= this.friction;
_velocityY *= this.friction;
_x += _velocityX;
_y += _velocityY;
};
もちろん，
そこで，
// function Particle(x, y) {
function Particle(x, y, right, bottom) {
this.right = right;
this.bottom = bottom;
}
Particle.prototype.accelerateTo = function (targetX, targetY) {
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;
}
};
function createParticle() {
// particle = new Particle(stageWidth / 2, stageHeight / 2);
particle = new Particle(stageWidth / 2, stageHeight / 2, stageWidth, stageHeight);
}
前掲コード3とコード4にこれらの手を加えると，
コード5 吸込まれるように動いて弾けるメソッドに書替えたパーティクルのクラス
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 = 4;
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;
};
コード6 パーティクルがマウスポインタの後を吸込まれるように追いかけて弾けるアニメーション
var stage;
var stageWidth;
var stageHeight;
var mousePoint = new createjs.Point();
var particle;
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;
createParticle();
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;
particle.accelerateTo(mouseX, mouseY);
stage.update();
}
function createParticle() {
particle = new Particle(stageWidth / 2, stageHeight / 2, stageWidth, stageHeight);
stage.addChild(particle);
}
