HTML and CSS Reference
In-Depth Information
The angle measured counterclockwise from the x-axis ( x )
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 xunits = Math . cos ( radians ) * speed ;
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,
Search WWH ::

Custom Search