HTML5 Canvas [67]
The good news is that moving on a vector is very similar to moving between two points. In canvasApp(), we first set our speed (magnitude). This is the number of pixels the object will move on every call to drawScreen(). We will set this to 5. We will also set the starting point (p1) for the object to 20,20:
var speed = 5;
var p1 = {x:20,y:20};
Now, we will set the angle (direction) of movement for our object to 45 degrees. In mathematics, a flat, straight line usually represents the 0 angle, which means a vector with an angle of 45 degrees would be down and to the right on the canvas.
With our angle set, we now need to convert it to radians. Radians are a standard unit of angle measurement, and most mathematical calculations require you to convert an angle into radians before you can use it.
So why not just use radians and forget degrees altogether? Because it is much easier to understand movement in degrees when working with vectors and moving objects on a 2D surface. While a circle has 360 degrees, it has just about 6 radians, which are calculated counterclockwise. This might make perfect sense to mathematicians, but to move objects on a computer screen, angles are much easier. So, we will work with 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 (magnitude), along with the Math.cos() (cosine) and Math.sin() (sine) functions of the JavaScript 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. We don’t check to see whether moves has been exhausted because we are not moving to a particular point—we are simply moving along the vector, seemingly forever. In the next section, we will explore what we can do if we want the moving object to change direction when it hits something such as a wall:
ball.x += xunits;
ball.y += yunits;
Figure 5-3 shows what Example 5-3 looks like when it is executed in a web browser. Recall that the points are drawn for illustration only.
Figure 5-3. Moving an object on a vector
Example 5-3 gives the full code listing.
Example 5-3. Moving on a vector