3D Basics - HTML5 Animation with JavaScript - page 350

function move (ball) {
ball.vy += gravity;
ball.xpos += ball.vx;
ball.ypos += ball.vy;
ball.zpos += ball.vz;
if (ball.ypos > floor) {
ball.ypos = floor;
ball.vy *= bounce;
}
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;
}
}
function zSort (a, b) {
return (b.zpos - a.zpos);
}
function draw (ball) {
if (ball.visible) {
ball.draw(context);
}
}
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
balls.forEach(move);
balls.sort(zSort);
balls.forEach(draw);
}());
};
</script>
</body>
</html>
Here, we add a few properties: gravity , bounce , and floor . The first two you should know by now, and
the floor property is just that—the bottom-most y value that the balls can hit before they bounce.
Other than the one line that adds gravity to each ball's vy property, and the bouncing when each one hits
the floor, there's not a lot going on here that we haven't covered, but things are starting to look pretty nice.
The result looks something like Figure 15-6.