Distance Formula in Actionscript Tutorial | Pythagorean theorem

Overview

To find the distance of any two points on an axis is easy, just subtract them. But what about when you have to find the distance of something not on the axis (a diagonal)? Find the distance between any two points with the Pythagorean theorem. This is an old problem we can look to history and find the Pythagorean theorem and Pythagoras, the Greek we’ve named this after. His theorem states that ‘In any right triangle, the area of the square whose side is the hypotenuse (the side opposite the right angle) is equal to the sum of the areas of the squares whose sides are the two legs (the two sides that meet at a right angle).’
pythagorean img

You may remember it as the formula you memorized in geometry or algebra class ‘a squared plus b squared equals c squared’

 a^2 + b^2 = c^2

pythag equ

Okay, but how does that help in flash? You want to find the distance between point

a

and point

b

. Well

c

would be the distance between the two points. We know the formula, solving for c.

c = square root of (a^2 + b^2)

.
pythag equ 2

c = Math.sqrt(Math.pow(a, 2)+Math.pow(b, 2));
Math.sqrt()

is the square root function, so

Math.sqrt(4)=2

.

Math.sqrt(x)

computes and returns the square root of

x

.

Math.pow()

is the power function, so

Math.pow(4, 2)=16

(4 squared).

Math.pow(x, y)

computes and returns

x

to the power of

y

.

You say I remember using this for triangles and stuff, I just want to know the distance between two points, there’s no triangles.
Well, there actually is a triangle we can draw. Go from your first, along an axis (this makes one side), and the other point, along the other axis (this is another side), and you’ll see that the distance you’re looking for is the third side of the triangle (the hypotenuse).

Example

Here’s a quick interactive flash file to show the idea.

Get Adobe Flash player

Actionscript

xmid = Stage.width/2;
ymid = Stage.height/2;
a = _root._ymouse-ymid;
b = _root._xmouse-xmid;
c = Math.sqrt(Math.pow(a, 2)+Math.pow(b, 2));
feedbacka.text = Math.round(a);
feedbackb.text = Math.round(b);
feedbackc.text = Math.round(c);

Download

As usual, here’s the source flash file (flash 8 compatible) to take a look: distance.fla

This entry was posted in tutorial and tagged , , , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

5 Comments

  1. Posted February 21, 2008 at 8:41 pm | Permalink

    Thanks for the tutorial.

    Just one comment. In your Flash file, the distances “a” and “b” are shown as negatives for half of the plane (when the cursor is above the top vertex of the triangle and to the left of the line marked with “a”.)

    Distance is always a positive number (it is a scalar quantity).

    This is not the same as the negative x- and y- values shown in my trigonometry ratios interactive.

  2. Posted March 3, 2008 at 12:28 pm | Permalink

    Yea, I realize that you can’t have a negative distance. The distance I display is just the x and y coordinate from the origin… real distance wouldn’t be negative, should have applied an absolute value to the number before I displayed it. Thanks for pointing that out!
    I’ll leave that in the display just to help show which line is which. Maybe it should read x and y coordinates rather than distance a and b..

  3. unknown
    Posted October 8, 2010 at 7:25 pm | Permalink

    I need help with some homework here is the question. If a=6 and b=8 is it a right triangle? Why or why not? Could you explain it to me?

  4. Bob
    Posted October 11, 2010 at 2:11 pm | Permalink

    If a=6 and b=8 is it a right triangle

    • Posted October 12, 2010 at 4:36 pm | Permalink

      good luck with your homework. maybe the interactive flash file will help you create a triangle like the one you’re asking about.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Recent Posts

    WordCamp Presentation Slides: From Photoshop PSD to WordPress Theme

    Here are my slides for my WordCamp Atlanta presentation, From PSD to WordPress Theme: Under the skin: PSD to WP on Prezi Tweet

    wordpress_wordcamp_atlanta_2012_feb_2_3

    Speaker at WordCamp Atlanta 2012

    I’m proud to announce that I’ve been asked to speak at WordCamp Atlanta this year! WordCamp will be held this weekend and hosted at SCAD Atlanta! My session is titled: From PSD to WordPress Theme: Under the skin. Obviously, I’ll be focusing on themes. We’ll look at what they are, what they can do, how [...]

    Adobe-like Arrow Headers | CSS-Tricks

    Zero images is something that always gets me excited, I really like these arrow button styles! I like the css used more and the hover/active states too, nice css3 transitions. via Adobe-like Arrow Headers | CSS-Tricks. Tweet

    snow

    Snow via Javascript & Canvas – Tis the Season

    After playing with the settings in my experiments I found a few settings I liked and wanted to develop further. The first was snow! An added bonus I was able to work on a project just for the holidays and used much of this code in it! I looked around the web and saw a [...]

  • Recent Shares

    bio

    An Event Apart Notes: Ethan Marcotte, Responsive Web Design

    Ethan Marcotte has become the father of Responsive Web Design and spent this whole day focused on principles, techniques, gotchas, examples, … all about building and how to build responsive sites. With a sprinkle of mobile first. For Ethan, it all started with this article: http://www.alistapart.com/articles/dao/ Think of architecture, the whole design phase is established [...]

    sammyj

    An Event Apart Notes: Ethan Marcotte, Rolling Up Our Responsive Sleeves

    Henry Adams (Descendant of 2 presidents: great-grandson to John Adams and grandson to John Quincy Adams). He lived between the civil war and world war 1. He witnessed the industrial revolution. Chaos was the law of nature, Order was the dream of man Samuel Johnson – funniest man in the 17th Century… Responsive Design: 1. [...]

    Webcomm_Montreal

    An Event Apart Notes: Jared Spool, The Curious Properties of Intuitive Web Pages

    Senseless waste of asterisks… Avis used an asterisk to denote optional fields. This means that there is a lot of baggage that comes with an asterixk. Somewhere this symbol got meaning, it’s not in the bible! We can control when something goes from unintuitive to intuitive. A design is intuitive (although technically and grammatically speaking [...]

    untitled-158-2

    An Event Apart Notes: Marco Arment, Bridging the App Gap

    The iPhone changed our industry in 2007: first mobile to have a desktop class web browser and it made people start using their mobile phones as computers! All apps other than apple provided ones were web browser apps. Most of the first apps were branded web browsers. No real difference between using mobile site or [...]

  • Recent Comments

    Lori Newman

    Lori Newman

    Just wanted to thank you for your presentation. It was extremely informative and just what I...
    Karl

    Karl

    I have been using for some time this nice Banner, from developer FX. They have a really nice Live...
    Karl

    Karl

    Thank you for this wonderful link… recommend it! Fast, simple, easy… :-)
    Gabriel

    Gabriel

    Hi Valerie, I don’t know if you are still following this post, but I tried seeing if it is...
    avinash

    avinash

    Hi Evan, I am using the same code and trying it on chrome/firefox it is not working on neither...
    Matt

    Matt

    I needed to store url variables from advertising tracking servers – this method works like a...