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,