Drawing a path between two points

Question

I'm working on a touch based game, and I'm having issues drawing a path the user has touched through. I'm trying to mimic something like these apps http://www.youtube.com/watch?v=G3CECr6mT1Q or http://www.youtube.com/watch?v=r34-_0wrVC4

I'm doing this in XNA/C#.

My issue is: I have the set of waypoints that define that users touch path. I wasnt sure how I could get a stylized line between all these points, so I thought "hey, I will just have a really small image that is 'the line', and draw it at every spot between the waypoints, and rotate it accordingly. I'm not sure this if this is the best solution or not.

But I was stuck because I did not know how to get all the coordinates between these two points. I have the two points, I can get a vector from the first to second, etc, but I cant seem to get the math correct.

Any suggestions or help? Thanks!

Answer 1

To compute an intermediate point between two points find the direction vector from one point to the other and the distance between the points. Scale the distance by a factor t between 0 and 1 where t = 0 corresponds to the first point t = 0.5 is half way between them and t = 1 corresponds to the second point. Then scale the direction vector by this value and add it to the original point.

Vector2 IntermediatePoint(Vector2 p0, Vector2 p1, float t)
{
    Vector2 delta = p1 - p0;

    float distance = delta.Length();

    if (distance == 0.0f)
    {
        return p0;
    }
    else
    {
        Vector2 direction = delta / distance;

        return p0 + direction * (distance * t);
    }
}

If you compute multiple points between p0 and p1 you should only calculate the distance and direction once.

You could also look into using XNA RoundLine to connect your points.

Another suggestion is to set up a textured rotated quad.

Answer 2

pointA = waypointsToDraw.ElementAt(i);
pointB = waypointsToDraw.ElementAt(i + 1);
deltaVector = pointB - pointA;
distance = deltaVector.Length();
direction = deltaVector / distance;
for (int z = 1; z < distance; z++)
{
    newPoint = pointA + direction * (distance * (z/distance));
    //this is the newPoint - it will be every point/pixel between pointA and pointB. Put drawing code here

}

Code samples above. PointA and pointB is the two end points, newPoint will be every point between them