How do you VISUALIZE this?


#1

I’m having a hard time trying to visualize the function… hypo(x-p.x,y-p.y) ?? what??

BNRDrawView.m

[code]-(BNRLine *)lineAtPoint:(CGPoint)p{

for(BNRLine *l in self.finishedLines){
    
    CGPoint start = l.begin;
    CGPoint end = l.end;
    
    
    
    //Check a few points on the line
    for(float t = 0.0; t <= 1.0; t += 0.5){
        
        float x = start.x + t *(end.x - start.x);
        float y = start.y + t *(end.y - start.y);
      
        //if the tapped point is within 20 points,let's return this line
        if(hypot(x - p.x, y - p.y) < 20.0){
            
            return l;
            
        }
        
    }
    
    
}
//If nothing is close enough to the tapped point, then we did not select a line
return nil;

}[/code]

:open_mouth:


#2
First, while it may just be a typo in the code listing presented here, I should note that the 'for' expression above needs to increment by 0.05 to be useful, not 0.5.

We're trying to check about 20 different points along a given line to see if our tap is close to that point, and therefore close to the line. Incrementing by 0.5 checks only about three points: each end, plus the midpoint.

[quote]I'm having a hard time trying to visualize the function... hypo(x-p.x,y-p.y) ??[/quote]
Remember our good friend the [url=http://en.wikipedia.org/wiki/Pythagorean_theorem]Pythagorean theorem[/url], from looong ago? Where essentially it says that if you know the lengths of the two legs of a right triangle, you can find the length of the hypotenuse? Hold that thought.

What we're really trying to do is to find the distance between two points: one is on a line that we've drawn (x, y), and one is the place where we tapped (p.x, p.y). By subtracting one point from the other (it doesn't matter which is first, just so it's consistent), we're translating from a line at an arbitrary location in the x-y plane to a location where one end is at (0, 0) and the other is at (x', y').

We're probably overdue for a picture at this point, so here's one:

[img]http://pl328.pairlitesite.com/images/hypot.png[/img]

The red line represents a line drawn on the iPhone screen. By subtracting the two points as described above, we've shifted the origin so that now the point on the line being examined on the iPhone screen is shown here as (0, 0), and the point we tapped is at (x', y').

Given a right triangle formed by three points (0,0), (x',0), and (x',y'), the distance from (x', y') to (0,0) -- the distance from our tap to the point on the line being checked -- is the hypotenuse of the triangle. And that, at long last, is where hypot() comes in.

Maybe it would help to rewrite the 'if' as:
[code]float x = start.x + t *(end.x - start.x);  // go (t*100)% in the x direction along our line
float y = start.y + t *(end.y - start.y);  // ...and (t*100)% in the y direction along our line

float x_distance_to_tap = x - p.x;
float y_distance_to_tap = y - p.y;
float distance_to_tap = hypot( x_distance_to_tap, y_distance_to_tap );

if( distance_to_tap < 20.0 ) {
[/code]

First, while it may just be a typo in the code listing presented here, I should note that the ‘for’ expression above needs to increment by 0.05 to be useful, not 0.5.

We’re trying to check about 20 different points along a given line to see if our tap is close to that point, and therefore close to the line. Incrementing by 0.5 checks only about three points: each end, plus the midpoint.

Remember our good friend the Pythagorean theorem, from looong ago? Where essentially it says that if you know the lengths of the two legs of a right triangle, you can find the length of the hypotenuse? Hold that thought.

What we’re really trying to do is to find the distance between two points: one is on a line that we’ve drawn (x, y), and one is the place where we tapped (p.x, p.y). By subtracting one point from the other (it doesn’t matter which is first, just so it’s consistent), we’re translating from a line at an arbitrary location in the x-y plane to a location where one end is at (0, 0) and the other is at (x’, y’).

We’re probably overdue for a picture at this point, so here’s one:

The red line represents a line drawn on the iPhone screen. By subtracting the two points as described above, we’ve shifted the origin so that now the point on the line being examined on the iPhone screen is shown here as (0, 0), and the point we tapped is at (x’, y’).

Given a right triangle formed by three points (0,0), (x’,0), and (x’,y’), the distance from (x’, y’) to (0,0) – the distance from our tap to the point on the line being checked – is the hypotenuse of the triangle. And that, at long last, is where hypot() comes in.

Maybe it would help to rewrite the ‘if’ as:

[code]float x = start.x + t (end.x - start.x); // go (t100)% in the x direction along our line
float y = start.y + t (end.y - start.y); // …and (t100)% in the y direction along our line

float x_distance_to_tap = x - p.x;
float y_distance_to_tap = y - p.y;
float distance_to_tap = hypot( x_distance_to_tap, y_distance_to_tap );

if( distance_to_tap < 20.0 ) {
[/code]


#3

Great explanation by GC3182. I also found this link very helpful http://www.mathsisfun.com/algebra/distance-2-points.html.