HTML and CSS Reference
In-Depth Information
angleY = (mouse.x - vpX) * 0.001;
balls.forEach(move);
balls.sort(zSort);
balls.forEach(draw);
}());
};
</script>
</body>
</html>
The important parts are in bold. You get an angle, and pass it and each ball to the
rotateY
function.
Inside this function, you get the sine and cosine of the angle, calculate the rotation, and assign
x1
and
z1
back to the ball's
xpos
and
zpos
properties. After that, it's just standard perspective and z-sorting. Figure
15-12 shows the result.
Figure 15-12.
Rotation on the y-axis
After you try that, you can switch the example over to an x-axis rotation. Add a new
angleX
variable to the
top of the script, and update the
drawFrame
and
move
functions:
function move (ball) {
rotateX(ball, angleX);
}
(function drawFrame () {
