HTML and CSS Reference
In-Depth Information
tz = Math.random() * 500;
}, false);
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
var dx = tx - ball.xpos,
dy = ty - ball.ypos,
dz = tz - ball.zpos;
ball.vx += dx * spring;
ball.vy += dy * spring;
ball.vz += dz * spring;
ball.xpos += ball.vx;
ball.ypos += ball.vy;
ball.zpos += ball.vz;
ball.vx *= friction;
ball.vy *= friction;
ball.vz *= friction;
if (ball.zpos > -fl) {
var scale = fl / (fl + ball.zpos);
ball.scaleX = ball.scaleY = scale;
ball.x = vpX + ball.xpos * scale;
ball.y = vpY + ball.ypos * scale;
ball.visible = true;
} else {
ball.visible = false;
}
if (ball.visible) {
ball.draw(context);
}
}());
};
</script>
</body>
</html>
This code uses the basic spring formula from Chapter 8, but with a third axis.
Coordinate rotation
Next up is coordinate rotation in 3D. This gets a bit more complex than 2D, which you saw in Chapters 10
and 11. Not only can you choose between three different axes to rotate on, you can even rotate on more
than one of them at once.
In 2D coordinate rotation, the points rotate around the z-axis, as shown in Figure 15-9. Think of a
spinning
windmill with an axle through the center. The axle is the z-axis. Only the x and y coordinates change.
