HTML and CSS Reference
In-Depth Information
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
angleX = (mouse.y - vpY) * 0.001;
balls.forEach(move);
balls.sort(zSort);
balls.forEach(draw);
}());
Then, you just need to create the rotateX function to perform the rotation:
function rotateX (ball, angle) {
var cos = Math.cos(angle),
sin = Math.sin(angle),
y1 = ball.ypos * cos - ball.zpos * sin,
z1 = ball.zpos * cos + ball.ypos * sin;
ball.ypos = y1;
ball.zpos = z1;
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;
}
}
The angle is based on the mouse's y position. You take the cosine and sine of the angle, and use them to
get y1 and z1 , which are passed to the ball's ypos and zpos properties.
For the next example, let's combine the two rotations. Here's the code for 13-rotate-xy.html :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rotate XY</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="utils.js"></script>
<script src="ball3d.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
mouse = utils.captureMouse(canvas),
balls = [],
Search WWH ::




Custom Search