HTML and CSS Reference
In-Depth Information
if (ball.visible) {
ball.draw(context);
}
}());
};
</script>
</body>
</html>
The most interesting part of this code is calculating the 3D distance:
var dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
If you remember, in 2D, you measure the distance between two points by the following equation:
var dist = Math.sqrt(dx * dx + dy * dy);
To move into 3D distances, just add the square of the distance on the third axis. It's pretty simple.
Springing
Springing, a close cousin to easing, requires a similar adjustment for 3D. You use the distance to the
target to change the velocity, rather than the position. In this example,
11-spring-3d.html
, clicking the
mouse creates a new random target for the ball to spring to:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Spring 3d</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'),
ball = new Ball3d(),
tx = Math.random() * 500 - 250,
ty = Math.random() * 500 - 250,
tz = Math.random() * 500,
spring = 0.1,
friction = 0.94,
fl = 250,
vpX = canvas.width / 2,
vpY = canvas.height / 2;
window.addEventListener('mousedown', function () {
tx = Math.random() * 500 - 250;
ty = Math.random() * 500 - 250;
