Finding the Distance Between Two Points

by kirupa  |  13 January 2011 (revised on 17 January 2011)

  Have questions? Discuss this Flash / ActionScript tutorial with others on the forums.

There will be times when you need to know how far apart two items are. While it is common in games or situations involving collision detection, you will run into needing to know the distance more often than you think. For example, the Random Movement animation is a case where the distance between two points is used to gauge when to change direction:

In this short tutorial, you will learn how to use the Pythagorean Theorem to calculate the distance when you know the x and y coordinates of two points.

A full explanation and more about the Pythagorean Theorem can be found on Wikipedia, but in a nutshell, the equation looks as follows:

Your distance is the square root of the net horizontal distance squared and your net vertical distance squared. Continuing the example we started off with, the xa, xb, ya, and yb values can be visualized as follows:

The code for converting our equation into the ActionScript that Flash understands is as follows:

private function GetDistanceSquare(xA:Number, yA:Number, xB:Number, yB:Number):Number
{
var xDiff:Number = xA - xB;
var yDiff:Number = yA - yB;
 
return Math.sqrt(xDiff * xDiff + yDiff * yDiff);
}

Two simplify our expression, I create two variables called xDiff and yDiff that store the difference in the x and y positions between the two points:

var xDiff:Number = xA - xB;
var yDiff:Number = yA - yB;

Once I have the difference, the rest of the math is very straightforward:

Math.sqrt(xDiff * xDiff + yDiff * yDiff);

Below, you will find a larger example that demonstrates finding the distance between two points at (0, 100) and (0, 100):

public class MainDocument extends MovieClip
{
public function MainDocument()
{
// constructor code
var distance:Number = GetDistance(0,0,100,100);
trace(distance);
}
 
private function GetDistance(xA:Number, yA:Number, xB:Number, yB:Number):Number
{
var xDiff:Number = xA - xB;
var yDiff:Number = yA - yB;
 
return Math.sqrt(xDiff * xDiff + yDiff * yDiff);
}
}

That's all there is to finding the distance between two points. If there is anything you take away from this tutorial, just ask yourself, wasn't Pythagoras one smart dude?

Note
For calculating squares, there is the Math.pow function that could be used instead of multiplying the same values twice. The original version of this tutorial used that approach actually:

private function GetDistance(xA:Number, yA:Number, xB:Number, yB:Number):Number
{
return Math.sqrt(Math.pow(xA - xB,2) + Math.pow(yA - yB,2));
}

The reason this approach was not the one presented above is due to performance. Using the simpler multiplying approach, my informal tests showed a gain of around 30 - 40%. While it may not be accurate using the approach I used to measure this, at least it gives you a ballpark. Thanks to @_robfox who pointed this out to me via Twitter.

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Brought to you by...

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.