HTML and CSS Reference

In-Depth Information

angles, but we still need to convert our 45-degree angle into radians. We do that with

a standard formula:
radians = angle * Math.PI/ 180
. And in the code:

var angle = 45;

var radians = angle * Math.PI/ 180;

Before we can discuss how we calculate the movement of our object along our vector,

we need to review a couple trigonometric concepts. These are
cosine
and
sine
, and

both relate to the arc created by our
angle
(now converted to
radians
), if it was drawn

outward from the center of the circle.

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-2
.

Figure 5-2. 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
(magni-

tude), along with the
Math.cos()
(cosine) and
Math.sin()
(sine) functions of the Java-

Script
Math
object:

var xunits = Math.cos(radians) * speed;

var yunits = Math.sin(radians) * speed;