function sinIntDeg (n) {
return bufSin [n % 360 |0];
}
function cosIntDeg (n) {
return bufCos [n % 360 |0];
}
function aryToFixedString (ary) {
return ary.map (function (a) { return a.toFixed (10); } ).join (',');
}
function Tile (image, distance, angle, scale, offsetHeight) {
this.image = image;
this.distance = distance;
this.angle = angle;
this.scale = scale;
this.offsetHeight = offsetHeight;
this.position = {};
this.rotate ();
}
function TileRotateY (stepAngle) {
var a = this.angle += stepAngle || 0;
var r = this.distance;
this.position = {
x: sinIntDeg (a) * r,
y: this.offsetHeight,
z: cosIntDeg (a) * r
};
return this;
}
function TileCreate (image, distance, angle, scale, offsetHeight) {
if (arguments.length < 2)
throw new Error;
return new Tile (
image,
distance || 100,
angle || 0,
scale || 1,
offsetHeight || 0
);
}
Tile.prototype.rotate = TileRotateY;
Tile.create = TileCreate;
//________________________
function FloorMember (member, angle, step) {
this.member = member;
this.angle = angle;
this.step = step;
this.timerId = null;
}
function FloorMemberRotate () {
this.angle += this.step;
this.member.forEach (function (tile) {
var p = tile.rotate (this.step).position;
var sin = sinIntDeg (tile.angle);
var cos = cosIntDeg (tile.angle);
var ary = [
tile.scale * cos, 0, -sin, 0,
0, tile.scale, 0, 0,
sin, 0, tile.scale * cos, 0,
p.x, p.y, p.z, 1
];
tile.image.style['-webkit-transform'] = 'matrix3d('+ aryToFixedString (ary)+')';
}, this);
}
function FloorMemberStart () {
var that = this;
var func = function () { that.rotate (); };
if (! this.timerId) {
this.timerId = setInterval (func, 30);
}
}
function FloorMemberCreate (images, radius, offsetFloor, step) {
if (arguments.length < 2)
throw new Error;
var member = [];
var imgs = Array.prototype.slice.call (images, 0);
var len = imgs.length;
var side = int (radius * 2 * Math.tan (Math.PI / len) + 0.5);
var img;
var aspectRatio = parseInt (imgs[0].height, 10) / parseInt (imgs[0].width, 10);
var height = int (side * aspectRatio + 0.5);
var offsetHeight = (offsetFloor || 0) * height;
var n = 360 / len;
for (var i = 0; i < len; i++) {
img = imgs[i];
img.width = String (side);
img.height = String (height);
member.push (new Tile (img, radius, n * i, 1, offsetHeight));
}
return new FloorMember (member, 0, step || 1);
}
FloorMember.prototype.start = FloorMemberStart;
FloorMember.prototype.rotate = FloorMemberRotate;
FloorMember.create = FloorMemberCreate;
this.FloorMember = FloorMember;
}) ();
FloorMember.create (document.querySelectorAll ('#screen img[alt="f0"]'), 1000, 0, 1).start ();
FloorMember.create (document.querySelectorAll ('#screen img[alt="f1"]'), 1000, 1, 2).start ();
FloorMember.create (document.querySelectorAll ('#screen img[alt="f2"]'), 1000, 2, 3).start ();
</script>
ipad2 で、うごかしてみました。 そこそこ速くうごきますよ！
