HTML and CSS Reference
In-Depth Information
cosine
The angle measured counterclockwise from the x-axis (
x
)
sine
The vertical coordinate of the arc endpoint (
y
)
You can see how these values relate to a 45-degree angle in
Figure 5-3
.
Figure 5-3. Angles on the canvas
This might seem complicated, but there is a very simple way to think about it: cosine usually
deals with the
x
value, and sine usually deals with the
y
value. We can use sine and cosine to
help us calculate movement along our vector.
To calculate the number of pixels to move our object on each call to
drawScreen()
(
xunits
and
yunits
), we use the
radians
(direction) we calculated and
speed
(magnitude), along
withthe
Math.cos()
(cosine)and
Math.sin()
(sine)functionsoftheJavaScript
Math
object:
var
var
xunits
=
Math
.
cos
(
radians
)
*
speed
;
var
var
yunits
=
Math
.
sin
(
radians
)
*
speed
;
In
drawScreen()
, we simply add
xunits
and
yunits
to
ball.x
and
ball.y
:
ball
.
x
+=
xunits
;
ball
.
y
+=
yunits
;
Wedon'tchecktoseewhether
moves
hasbeenexhaustedbecausewearenotmovingtoapar-
ticular point—we are simply moving along the vector, seemingly forever. In the next section,
