今回から取り組む新たなお題をjsdo.
![図1 マウスポインタの動きに合わせてつくられたインスタンスがランダムに落ちる 図1 マウスポインタの動きに合わせてつくられたインスタンスがランダムに落ちる](/assets/images/design/serial/01/createjs/0011/001.png)
マウスポインタの動く位置にランダムなカラーと大きさのインスタンスを置く
落下のアニメーションに入る前に、
<script src="http://code.createjs.com/easeljs-0.6.1.min.js"></script>
![図2 マウスポインタの動く位置にランダムなカラーと大きさのインスタンスが描かれる 図2 マウスポインタの動く位置にランダムなカラーと大きさのインスタンスが描かれる](/assets/images/design/serial/01/createjs/0011/002.png)
初期設定の関数は、
var stage;
function initialize() {
var canvasElement = document.getElementById("myCanvas");
stage = new createjs.Stage(canvasElement);
stage.addEventListener("stagemousemove", addInstance);
}
function addInstance(eventObject) {
createInstance(stage.mouseX, stage.mouseY);
stage.update();
}
Shapeインスタンスをつくる関数
円のShapeインスタンスをつくって返す関数
function createInstance(x, y) {
var instance = createShape(2, 10);
instance.x = x;
instance.y = y;
stage.addChild(instance);
}
function createShape(min, max) {
var instance = new createjs.Shape();
var radius = getRandom(min, max);
var color = Math.floor(Math.random() * 0xFFFFFF);
instance.graphics.beginFill(createjs.Graphics.getRGB(color))
.drawCircle(0, 0, radius);
return instance;
}
function getRandom(min, max) {
var randomNumber = Math.random() * (max - min) + min;
return randomNumber;
}
インスタンスを垂直に落とすアニメーション
ステージにつぎつぎに置いたインスタンスに、
落ちる速さはインスタンスごとにランダムにしたい。そのため、
Ticker.
function initialize() {
createjs.Ticker.addEventListener("tick", animate);
}
function addInstance(eventObject) {
// createInstance(stage.mouseX, stage.mouseY);
createInstance(stage.mouseX, stage.mouseY, 15);
}
// function createInstance(x, y) {
function createInstance(x, y, halfSpeed) {
var speed = getRandom(-halfSpeed, halfSpeed);
var instance = createShape(2, 10);
instance.velocityY = speed;
instance.velocityAlpha = getRandom(-0.07, -0.01);
}
function animate(eventObject) {
var count = stage.getNumChildren() - 1;
for (var i = count; i > -1; i--) {
var child = stage.getChildAt(i);
var newY = child.y + child.velocityY;
var newAlpha = child.alpha + child.velocityAlpha;
child.y = newY;
child.alpha = newAlpha;
child.velocityY += 2;
}
stage.update();
}
これで、
![図3 マウスポインタの動きに合わせてステージに置かれたインスタンスがランダムな速さで落ちていく 図3 マウスポインタの動きに合わせてステージに置かれたインスタンスがランダムな速さで落ちていく](/assets/images/design/serial/01/createjs/0011/003.png)
インスタンスのアルファが0以下になるか、
var stageHeight;
function initialize() {
var canvasElement = document.getElementById("myCanvas");
stageHeight = canvasElement.height;
}
function animate(eventObject) {
var count = stage.getNumChildren() - 1;
for (var i = count; i > -1; i--) {
var child = stage.getChildAt(i);
var newY = child.y + child.velocityY;
var newAlpha = child.alpha + child.velocityAlpha;
if (newAlpha <= 0 || newY > stageHeight) {
stage.removeChildAt(i);
} else {
child.y = newY;
child.alpha = newAlpha;
child.velocityY += 2;
}
}
stage.update();
}
ひとつ説明を補っておく。アニメーションの関数
これでアルファや垂直位置がステージで見えなくなれば、
var stage;
var stageHeight;
function initialize() {
var canvasElement = document.getElementById("myCanvas");
stageHeight = canvasElement.height;
stage = new createjs.Stage(canvasElement);
stage.addEventListener("stagemousemove", addInstance);
createjs.Ticker.addEventListener("tick", animate);
}
function addInstance(eventObject) {
createInstance(stage.mouseX, stage.mouseY, 15);
stage.update();
}
function createInstance(x, y, halfSpeed) {
var speed = getRandom(-halfSpeed, halfSpeed);
var instance = createShape(2, 10);
instance.x = x;
instance.y = y;
instance.velocityY = speed;
instance.velocityAlpha = getRandom(-0.07, -0.01);
stage.addChild(instance);
}
function animate(eventObject) {
var count = stage.getNumChildren() - 1;
for (var i = count; i > -1; i--) {
var child = stage.getChildAt(i);
var newY = child.y + child.velocityY;
var newAlpha = child.alpha + child.velocityAlpha;
if (newAlpha <= 0 || newY > stageHeight) {
stage.removeChildAt(i);
} else {
child.y = newY;
child.alpha = newAlpha;
child.velocityY += 2;
}
}
stage.update();
}
function createShape(min, max) {
var instance = new createjs.Shape();
var radius = getRandom(min, max);
var color = Math.floor(Math.random() * 0xFFFFFF);
instance.graphics.beginFill(createjs.Graphics.getRGB(color))
.drawCircle(0, 0, radius);
return instance;
}
function getRandom(min, max) {
var randomNumber = Math.random() * (max - min) + min;
return randomNumber;
}
インスタンスの動きに水平方向の初速を加える
落ちるインスタンスの動きに、
原点O(0, 0)を中心に描いた半径1の円
![図4 原点から距離が1で角度θのxy座標は(cosθ, sinθ) 図4 原点から距離が1で角度θのxy座標は(cosθ, sinθ)](/assets/images/design/serial/01/createjs/0011/004.gif)
この距離rを速さと見立てれば、
また、
function createInstance(x, y, halfSpeed) {
var speed = getRandom(-halfSpeed, halfSpeed);
var angle = getRandom(0, Math.PI * 2);
var instance = createShape(2, 10);
instance.velocityX = Math.cos(angle) * speed;
// instance.velocityY = speed;
instance.velocityY = Math.sin(angle) * speed;
}
function animate(eventObject) {
var count = stage.getNumChildren() - 1;
for (var i = count; i > -1; i--) {
var child = stage.getChildAt(i);
var newY = child.y + child.velocityY;
child.x += child.velocityX;
child.y = newY;
child.velocityX *= 0.98;
child.velocityY += 2;
}
}
これでマウスポインタの動く位置に表れるインスタンスに、
![図5 マウスポインタの動く位置に表れたインスタンスにランダムな方向の初速が与えられる 図5 マウスポインタの動く位置に表れたインスタンスにランダムな方向の初速が与えられる](/assets/images/design/serial/01/createjs/0011/005.png)
var stage;
var stageHeight;
function initialize() {
var canvasElement = document.getElementById("myCanvas");
stageHeight = canvasElement.height;
stage = new createjs.Stage(canvasElement);
stage.addEventListener("stagemousemove", addInstance);
createjs.Ticker.addEventListener("tick", animate);
}
function addInstance(eventObject) {
createInstance(stage.mouseX, stage.mouseY, 15);
stage.update();
}
function createInstance(x, y, halfSpeed) {
var speed = getRandom(-halfSpeed, halfSpeed);
var angle = getRandom(0, Math.PI * 2);
var instance = createShape(2, 10);
instance.x = x;
instance.y = y;
instance.velocityX = Math.cos(angle) * speed;
instance.velocityY = Math.sin(angle) * speed;
instance.velocityAlpha = getRandom(-0.07, -0.01);
stage.addChild(instance);
}
function animate(eventObject) {
var count = stage.getNumChildren() - 1;
for (var i = count; i > -1; i--) {
var child = stage.getChildAt(i);
var newY = child.y + child.velocityY;
var newAlpha = child.alpha + child.velocityAlpha;
if (newAlpha <= 0 || newY > stageHeight) {
stage.removeChildAt(i);
} else {
child.x += child.velocityX;
child.y = newY;
child.alpha = newAlpha;
child.velocityX *= 0.98;
child.velocityY += 2;
}
}
stage.update();
}
function createShape(min, max) {
var instance = new createjs.Shape();
var radius = getRandom(min, max);
var color = Math.floor(Math.random() * 0xFFFFFF);
instance.graphics.beginFill(createjs.Graphics.getRGB(color))
.drawCircle(0, 0, radius);
return instance;
}
function getRandom(min, max) {
var randomNumber = Math.random() * (max - min) + min;
return randomNumber;
}
前掲コード2をjsdo.