• Choose a category
• All
• Classic-Fiction

Moving Between Two Points: The Distance of a Line

Movement based on constant changes to the x or y position of an object works well for some applications, but other times you will need to be more precise. One such instance is when you need to move an object from point A to point B at a constant rate of speed.

In mathematics, a common way to find the length of an unknown line is to use the Pythagorean theorem:

A2 + B2 = C2

In this equation, C is the unknown side of a triangle when A and B are already known. However, we need to translate this equation into something we can use with the points and pixels we have available on the canvas.

This is a good example of using a mathematical equation in your application. In this case, we want to find the distance of a line, given two points. In English, this equation reads like this:

The distance equals the square root of the square of the difference between the x value of the second point minus the x value of the first point, plus the square of the difference between the y value of the second point minus the y value of the first point.

You can see this in Equation 5-1. It’s much easier to understand in this format.

Equation 5-1. Distance equation

In the second example, we need to create some new variables in the canvasApp() function. We will still use a speed variable, just like in the first example, but this time we set it to 5, which means it will move 5 pixels on every call to drawScreen():

var speed = 5;

We then create a couple dynamic objects—each with an x and a y property—that will represent the two points we want to move between. For this example, we will move our circle from 20,250 to 480,250:

var p1 = {x:20,y:250};

var p2 = {x:480,y:250};

Now it is time to re-create the distance equation in Equation 5-1. The first step is to calculate the differences between the second and first x and y points:

var dx = p2.x - p1.x;

var dy = p2.y - p1.y;

To determine the distance, we square both the values we just created, add them, and then use the Math.sqrt() function to get the square root of the number:

var distance = Math.sqrt(dx*dx + dy*dy);

Next, we need to use that calculated distance in a way that will allow us to move an object a uniform number of pixels from p1 to p2. The first thing we do is calculate how many moves (calls to drawScreen()) it will take the object to move at the given value of speed. We get this by dividing the distance by the speed:

var moves = distance/speed;

Then we find the distance to move both x and y on each call to drawScreen(). We name these variables xunits and yunits:

var xunits = (p2.x - p1.x)/moves;

var yunits = (p2.y - p1.y)/moves;

Finally, we create a dynamic object named ball that holds the x and y value of p1…

var ball = {x:p1.x, y:p1.y};

…and create the interval to call drawScreen() every 33 milliseconds:

setInterval(drawScreen, 33);

Drawing the ball

Let’s draw the ball on the screen. In the drawScreen() function, we first check to see whether the moves variable is greater than zero. If so, we are still supposed to move the ball across the screen because we have not yet reached p2. We decrement moves (moves--) and then update the x and y properties of the ball object by adding the xunits to x and yunits to y:

if (moves > 0 ) {

moves--;

ball.x += xunits;

ball.y += yunits;

}

Now that our values have been updated, we simply draw the ball at the x and y coordinates specified by the x and y properties, and we are done…that is, until drawScreen() is called 33 milliseconds later:

context.fillStyle = "#000000";

context.beginPath();

context.arc(ball.x,ball.y,15,0,Math.PI*2,true);

context.closePath();

context.fill();

Let’s try the example by executing it in a web browser. You can find it in the code distribution as CH5EX2.html, or you can type in Example 5-2. Watch the ball move from one point to another. If you update the x and y values of each point, or change the speed, watch the results. You can