HTML and CSS Reference
In-Depth Information
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
ball = new Ball(),
angle = 0,
centerX = canvas.width / 2,
centerY = canvas.height / 2,
radiusX = 150,
radiusY = 100,
speed = 0.05;
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
ball.x = centerX + Math.sin(angle) * radiusX;
ball.y = centerY + Math.cos(angle) * radiusY;
angle += speed;
ball.draw(context);
}());
};
</script>
</body>
</html>
Here,
radiusX
is 150, which means that the ball is going to go back and forth 150 pixels from
centerX
as
it circles around.
radiusY
is 100, which means it goes up and down only 100 pixels each way. So, now
you have an uneven circle, which is not a circle anymore, but an ellipse.
Pythagorean Theorem
Now we've come to the
Pythagorean Theorem
, another formula that you will use a lot. Pythagoras was a
Greek mathematician, philosopher, and mystic who is credited with a convenient way of measuring a
triangle. To put simply, the theorem says: A squared + B squared = C squared. We will explore this
theorem in more depth.
A more descriptive statement of the theorem is: The sum of the squares of the two legs of a right-angle
triangle is equal to the square of the hypotenuse. Let's say you have the triangle shown in Figure 3-21.
The two legs, A and B, have measurements of 3 and 4. The hypotenuse, C, measures 5. The Pythagorean
Theorem tells us that A
2
+ B
2
= C
2
. Let's test it. Plug in the numbers, and you have 3
2
+ 4
2
= 5
2
, which is 9
+ 16 = 25. That works out pretty well.
