HTML and CSS Reference
In-Depth Information
y
y
x
x
x
x
y
x
y
Figure 3-20.
Positions of an object as it moves around a circle
If you take the circle in Figure 3-20 and turn it on its edge from the right, you see the object going up and
down. Its center is the center of the circle, and its range is the radius of the circle. You calculate its position
as you did in the first sine experiment, take the sine of the angle times the range. In this case, sine is the
appropriate function to use. If you look at the triangle formed, you calculate the length of y—the leg
opposite the angle.
Now, imagine that you are looking at the circle from its bottom edge instead. In this view, you see the
object moving back and forth, left to right. This time, you calculate the length of x—the leg adjacent to the
angle—so you should use cosine.
These calculations operate off the same angle, unlike the
06-random.html
example you saw previously,
which used two different angles to compute the x and y positions. You use sine to calculate y and cosine
to calculate x. Here's what this example looks like:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Circle</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="utils.js"></script>
<script src="ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
ball = new Ball(),
angle = 0,
centerX = canvas.width / 2,
