Distance Between Two Points

Say you have two movie clip instances on stage and you want to find out how far apart they are. This is the most common use of the Pythagorean Theorem in Flash.

What do you have to work with? You have the x and y positions of each of movie clip. Lets call the position of one x1, y1, and the other x2, y2. So, you have a situation like the one illustrated in Figure 3-22.

Figure 3-22: What is the distance between the two objects?

If you have been particularly brainwashed during the reading of this chapter, you will already see a right triangle forming in the diagram in Figure 3-22, with the distance line as the hypotenuse . In Figure 3-23, I finish it off for you and add some actual numbers .

Figure 3-23: Turn it into a right triangle.

Here, dx is the distance between the two movie clips on the x axis, and dy is the distance on the y axis. You can now easily find dx by subtracting x1 from x2: 58 ˆ 50 = 8. Similarly, you subtract y1 from y2 to get dy, which is 6. Now, per Pythagorus, if you square both of these and add them together, youll get the square of the distance. In other words ˆ 6 ² + 8 ² = dist ² . Breaking that down, you get 36 + 64, or 100 = dist ² . Basic algebra says that you can reduce that to ˆ 100 = dist. And from that, you can easily figure out that the distance between the two clips is 10.

Now, lets abstract that a bit so you can have a formula that you can use in any situation. Given two points, x1, y1 and x2, y2, you figure the x distance and y distance, square them, sum them, and take the square root. Here it is in ActionScript:

 dx = x2  x1; dy = y2  y1; dist = Math.sqrt(dx*dx + dy*dy); 

Pay particular attention to these lines. They make up the next big tool in your toolbox. The first two lines just get the distances on each axis. Note that if you are just interested in the distance, and wont be using dx and dy to calculate any angles, it doesnt really matter whether you subtract x1 from x2 or vice versa. The final result for dist will always be positive. The last line performs three steps in one shot: It squares each of the values, adds them, and finds the square root. For clarity, you could break down those steps into separate statements. But once you are familiar with that single line, it will be crystal clear to you. Youll see it and think Pythagorean Theorem. And then, youll really know you are brainwashed.

Now, lets try it in the real world. Create two movie clips, put them anywhere on stage, and name them mca and mcb . (Or you can just open the mc_dist.fla file.) Heres the code:

 dx = mca._x - mcb._x; dy = mca._y - mcb._y; dist = Math.sqrt(dx*dx + dy*dy); trace(dist); 

Test the movie, and youll get the distance between the two clips. Try moving them around and testing a few times. It shouldnt matter if one is to the right, left, top, or bottom of the other. Youll always get a positive value for the distance.

OK, thats interesting, but not very dynamic. Just to show you that you can do this in real time, and that it isnt limited to movie clips, delete mcb , add in a text field with the instance name dist_txt , and change the code to the following (or open mouse_dist.fla ):

 onMouseMove = function(){       dx = mca._x - _xmouse;       dy = mca._y - _ymouse;       dist = Math.sqrt(dx*dx + dy*dy);       dist_txt.text = dist;       clear();       lineStyle(1,0,100);       moveTo(mca._x, mca._y);       lineTo(_xmouse, _ymouse); } 

Here, dx and dy are calculated by subtracting the current mouse position from mca s position. The dist value is thrown into the text field, and a line is drawn from the movie clip to the mouse location (youll find more on the drawing API in the next chapter). Finally, the whole thing is put in an onMouseMove handler, to update it each time the mouse moves.

Test the file and move your mouse around. A line will connect it to the movie clip, and youll get a constant readout of the length of that line.

In later chapters, when I talk about collision detection, youll find out about some weaknesses with the built-in hitTest method, and see how you can use the Pythagorean Theorem formula to create a distance-based method of collision detection. It is also very useful in calculating forces like gravity or springs, where the force between two objects is proportional to the distance between them.