前回の第15回
z座標を加えてy軸で回す
前回述べた通り，
{x:x座標値, y:y座標値, z:z座標値}
第15回コード3に新たな関数
function createStarPoints(numVertices, longRadius, shortRadius) {
var starPoints = [];
var angle = Math.PI;
var theta = angle / numVertices;
angle /= -2;
for (var i = 0; i < numVertices; i++) {
// starPoints.push(new createjs.Point(longRadius * Math.cos(angle), longRadius * Math.sin(angle)));
starPoints.push(newPoint3D(longRadius * Math.cos(angle), longRadius * Math.sin(angle), 0));
angle += theta;
// starPoints.push(new createjs.Point(shortRadius * Math.cos(angle), shortRadius * Math.sin(angle)));
starPoints.push(newPoint3D(shortRadius * Math.cos(angle), shortRadius * Math.sin(angle), 0));
angle += theta;
}
return starPoints;
}
function newPoint3D(x, y, z) {
var point3D = {x:x, y:y, z:z};
return point3D;
}
この書替えをしても，
図1 星形が2次元平面で回る
では，
図1 xz平面で座標を回す
だったら，
var _point = new createjs.Point();
function rotate(eventObject) {
var count = points.length;
matrix.identity().rotate(angle);
for (var i = 0; i < count; i++) {
var point = points[i];
// matrix.transformPoint(point.x, point.y, point);
matrix.transformPoint(point.x, point.z, _point);
point.x = _point.x;
point.z = _point.y;
}
draw(points);
}
これで，
図3 遠近法が加わらない回る星のアニメーション
コード1 星形の3次元座標をy軸で回すアニメーション
var stage;
var drawGraphics;
var points;
var angle = Math.PI / 36;
var matrix = new createjs.Matrix2D();
var stageCenterX;
var _point = new createjs.Point();
function initialize() {
var canvasElement = document.getElementById("myCanvas");
stage = new createjs.Stage(canvasElement);
stageCenterX = canvasElement.width / 2;
drawGraphics = createGraphics(stageCenterX, canvasElement.height / 2);
points = createStarPoints(5, 65, 25);
draw(points);
createjs.Ticker.addEventListener("tick", rotate);
stage.addEventListener("stagemousemove", setAngle);
}
function setAngle(eventObject) {
var mouseX = eventObject.stageX;
angle = (mouseX - stageCenterX) * 1 / 300;
}
function rotate(eventObject) {
var count = points.length;
matrix.identity().rotate(angle);
for (var i = 0; i < count; i++) {
var point = points[i];
matrix.transformPoint(point.x, point.z, _point);
point.x = _point.x;
point.z = _point.y;
}
draw(points);
}
function createGraphics(x, y) {
var drawShape = new createjs.Shape();
drawShape.x = x;
drawShape.y = y;
stage.addChild(drawShape);
return drawShape.graphics;
}
function draw(points) {
var count = points.length;
var point = points[count - 1];
drawGraphics.clear()
.beginStroke("mediumblue")
.setStrokeStyle(3)
.moveTo(point.x, point.y);
for (var i = 0; i < count; i++) {
point = points[i];
drawGraphics.lineTo(point.x, point.y);
}
stage.update();
}
function createStarPoints(numVertices, longRadius, shortRadius) {
var starPoints = [];
var angle = Math.PI;
var theta = angle / numVertices;
angle /= -2;
for (var i = 0; i < numVertices; i++) {
starPoints.push(newPoint3D(longRadius * Math.cos(angle), longRadius * Math.sin(angle), 0));
angle += theta;
starPoints.push(newPoint3D(shortRadius * Math.cos(angle), shortRadius * Math.sin(angle), 0));
angle += theta;
}
return starPoints;
}
function newPoint3D(x, y, z) {
var point3D = {x:x, y:y, z:z};
return point3D;
}
- ※1
- さらにzy平面の座標変換も加えれば，
x軸で垂直に回すこともできる。ただ， 今回のお題のようなひとつの平面図形では， xyの2軸で回すとむしろどう動いているのか捉えにくくなってしまう。拙著 『WebクリエイターのためのCreateJSスタイルブック』 のサンプルとしてjsdo. itに掲げたコードは， 矩形のビットマップ6枚で立方体をつくり， 水平および垂直に回している。ただし， Bitmapインスタンスには次項で説明する遠近法は加えられない。
