Bacon and Games

Tag: math

Calculating the Distance from a Point to a Line in AS3

I recently made a game for a client that involved a giant sweeping laser of doom (the game had the laser, not the client). Sounds cool, right? Not if the laser happened to touch you while you were busy blowing up robots. Sound even cooler now that you know there were robots? It was. But that’s not what I want to talk about today. What I’d like to cover is the slightly more exciting topic of how to calculate the distance between a point and a line.

I won’t go into the math behind it, not because it’s complicated but because it’s just not that interesting or important to understand. I’ll just give you the code and then talk a little bit about why it might be useful in a game. If you really want to know how the math works, leave a comment or email me and I’ll do a follow up. For now, here’s a simple visualization (download source here):

This movie requires Flash Player 9

Once again I’ve built on a handy function written by Keith Hair that finds the point of intersection between two lines. Using his lineIntersectLine() function and my getDistanceFromLine() function you can calculate the distance between a point and a line very easily.

Why is this useful? I wrote it so that I could determine if the doom laser had overtaken my hero. Since the laser was represented in my code by two points (a line) and I knew the location of the hero (a point) all I had to do was calculate the hero’s proximity to that line. When the hero’s proximity was less than a certain distance >> kill hero. And because this calculation was done mathematically rather than being tied to a hitTestObject() based on the laser’s movieClip1, adjusting the laser’s killzone was as simple as changing one variable.

Here’s another example of how this information might be useful in a game. Suppose your game has a laser cannon which fires in a straight line, as opposed to the sweeping radar motion in my prior example. If you know each enemy’s proximity to the laser you can apply varying damage and effects to each enemy based on that information.

There are plenty of ways you could use this in a game, but I’ll leave that up to your creativity. You can download the source files for the above demo here. Oh and as is often the case with art in or around my site, the bad-ass laser and art in the screen grab above was done by my partner in crime, Ajay Karat of The Devil’s Garage. He and I are working on some games (not for clients) so expect to see some stuff from us in 2010.

  1. When designing your games you’ll want to keep your visual assets separate from your calculations. Let your calculations dictate what needs to be displayed, not the other way around. Tying calculations to visual assets is usually, if not always, inefficient and inflexible.

Intersection of an Ellipse and a Line in AS3

A few months back I was working on a game for which I needed to be able to calculate the points of intersection between a line and an ellipse. I wanted enemies and the hero to be able to collide with and avoid an elliptical obstruction in the middle of the game. I also wanted to be able to calculate whether enemies had a line-of-sight to their targets, given this elliptical obstruction. I did some searching to see if anyone had written a class to handle this. Keith Hair wrote a very nice class that does this with a circle. Aaron Clinger and Mike Creighton wrote a a very nice Ellipse class, but it didn’t deal with ellipse-line intersections, only ellipse-point intersection and general ellipse calculations such as area and circumference. Both of these are great finds, but neither of them did what I was looking for.

Since I couldn’t find what I was looking for I decided I would write it myself and since Aaron and Mike’s Ellipse class had so many useful features I though I’d have my class extend theirs. Here is a demo of my EllipseExt class which has all the bells and whistles of Aaron and Mikes Ellipse class plus some intersection calculation methods added:

This movie requires Flash Player 9

You will notice that by dragging one of the nodes inside the ellipse you lose a point of intersection. However if you switch on the “extend line indefinitely” option the nodes will no longer act as start->end points but rather 2 points that define an infinite line. This is a feature I found helpful for game programming, so I decided to build it in as an optional argument of the getIntersections() method. There is another optional argument that came out thinking about game logic; the sort option. With sort set to true, the getIntersections() method will sort the points by proximity to the first node used to define the line (i.e. the first required argument). This can be very helpful if one of the line’s nodes is a hero or enemy approaching the ellipse and you need to know which of the returned points represents the potential point of impact.


// generic form
public function getIntersections(p1:Point,p2:Point,extend:Boolean=false,sort:Boolean=false):Array
// define points that make up our line
var A = new Point(mouseX,mouseY);
var B = new Point(0,0);
// create an ellipse 200x100 at (50,50)
var ellipse:EllipseExt(50,50,200,100);
// Example 1:
// find intersections of line AB and ellipse BETWEEN points A and B
var ar:Array = ellipse.getIntersections(A,B);
// Example 2:
// find intersections of line AB and ellipse DEFINED BY points A and B
var ar:Array = ellipse.getIntersections(A,B,true);
// Example 3:
// find intersections of line AB and ellipse BETWEEN points A and B
// ar[0] will contain the point of intersection that is closest to point A
var ar:Array = ellipse.getIntersections(A,B,false,true);

There are a few other available methods, which I’ll refer to as shortcut methods because each of these can be achieved through the getIntersections method. However, these 4 methods either handle some of the logic you’d otherwise need to build around the getIntersections() method OR they’re acceptably lighter options depending on what you need to know about the line and the ellipse interaction. These are commented further in the EllipseExt class itself, but here’s a preview:

// simply determines if there is an intersection point at all (line-of-sight)
// returns the point of intersection between the center of the ellipse and pt
// returns points of intersection on the ellipse at the given y coordinate
// returns points of intersection on the ellipse at the given x coordinate

The classes and source code for the above demo can be downloaded here.

I’d like to add some additional methods to this class, specifically for calculating tangent lines/points, which would be useful for pathfinding routes around an ellipse. But I figured that this was far along enough that it was worth sharing. If you have questions or find a bug, please feel free to contact me and I’ll be happy to do what I can to help. I hope you’ll find this useful. Enjoy!

Additional stuff on ellipses for those who need to brush up:
Ellipse Equation Visualizer
Ellipse-Line Intersection
Quadratic Equation

Copyright © 2014 Bacon and Games

Theme by Anders NorenUp ↑