Thursday, 6 January 2011

AS3 distance between two points

I recently had to calculate the distance between two points using some simple maths. To work out the distance I used the Pythagorean Theorem (a2 + b2 = c2). I multiple the differences of the two x values and the two y values and then square root the sum of the values. Here is an example below in one line of code.

var distance = Math.sqrt( ( point1.x – point2.x ) * (point1.x - point2.x ) + (point1.y - point2.y ) * (point1.y - point2.y ));

If you want to calculate the distance between two points multiple times you can put the code into a function like below.

function DistanceTwoPoints(x1:Number, x2:Number,  y1:Number, y2:Number):
    Number {
    var dx:Number = x1-x2;
    var dy:Number = y1-y2;
    return Math.sqrt(dx * dx + dy * dy);
}

Here is an example of the distance between two points. The circle shape will be transparent when the mouse x and y positions are greater than 76 pixels and will be opaque than the mouse x and y are less than 76 pixels.

stage.addEventListener(Event.ENTER_FRAME, showDistance);

var circle:Shape = new Shape();
circle.graphics.beginFill(0x3399FF);
circle.graphics.drawEllipse(0, 0, 76, 76);
circle.graphics.endFill();
addChild(circle);

function showDistance(e:Event):void{
   var distance:Number = DistanceTwoPoints(circle.x, mouseX, circle.y, mouseY);
   trace('The distance is: ', distance);
   
   if(distance > 76){
       circle.alpha = 0
   }else{
       circle.alpha = 1;
   }
}

function DistanceTwoPoints(x1:Number, x2:Number,  y1:Number, y2:Number): Number {
    var dx:Number = x1-x2;
    var dy:Number = y1-y2;
    return Math.sqrt(dx * dx + dy * dy);
}

4 comments:

Dave Wolfe 7 January 2011 at 10:03  

Or you could just use Point.distance(p1, p2) :)

iliketo 7 January 2011 at 15:01  

@Dave

Your right, you can use the point.distance, but its about 5 times slower that the mutiplication method.

Bernardo Rivera 5 September 2011 at 12:35  

Hi, im trying to use this code to change the alpha channel of any object. In my case i have an hexagon on the scene so when the mouse is far away from it, it will become transparent, and when the mouse is at certain distance it will become visible, here is the code ive tried:


stage.addEventListener(Event.ENTER_FRAME, showDistance);

function showDistance(e:Event):void{
var distance:Number = circle.DisplayObject.x (circle.DisplayObject.width / 2), mouseX, circle.DisplayObject.y (circle.DisplayObject.height / 2), mouseY);
trace('The distance is: ', distance);

if(distance > 50){
circle.alpha = 0
}else{
circle.alpha = 1;
}
}

it is not working tho, i belive im just missing something but idk what it is, any help would be apreciated, thank u, bye

iliketo 6 September 2011 at 01:47  

@Bernardo

You have copied my conditional If -else statement without changing it. This is why its not working!!

Obviously, if you want the object to be transparent when the mouse is far away from it, you can’t have:

if(distance > 50){
circle.alpha = 0
}

The DistanceTwoPoint function calculates the distance between two points. Currently, when your mouse is 50 pixels away from the circle it will be transparent.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP