How to draw equal length line stripes on a parabola?

Question

Simply put I'm making a basketball game. I'm using these equations to predict the ball position and it works fine:

x = vx * t
y = vy * t + 0.5 * gravity * t * t

But I can't find a way to draw equal length line stripes on the parabola. At this moment I'm using:

t = t + dt

in which dt is the time elapsed in last frame. It works but the line segments would be longer if velocity is larger. Anybody know a way to draw equal length line stripes like the flying trails in Angry Bird? Thanks very much.

I suppose I should calculate the integral on the curve but I can't get it through...

Answer 1

The derivative of the ball position is:

dx/dt = vx
dy/dt = vy + gravity * t

So the derivative of the parabola arc length s is, using Pythagora’s theorem:

ds/dt = sqrt(vx² + (vy + gravity * t)²)

It is possible to write down the integral of s. However, the resulting formula is so complex that it cannot be inverted (ie. you cannot get back t from a given value of s) without resorting to quite complex numerical programming.

However, as a reasonable approximation you could decide that s is only slightly varying. For an arc length l and a time t the next point should be plotted at time t' such that:

t' = t + l / sqrt(vx² + (vy + gravity * t)²)

I am confident this works pretty well in practice. If this does not give acceptable results, you could choose a smaller value for l (eg. l/8) and only plot one point out of 8.

Here is some code showing how it could be implemented:

void drawPointsAlongParabola(Point origin, float vx, float vy, float gravity,
                             float spacing, float duration)
{
    Point v(vx, vy);
    Point g(0, -gravity);

    for (float t = 0; t < duration; t += spacing / length(v + g * t))
        drawPoint(origin + v * t + 0.5 * g * t * t);
}

Answer 2

I understand the above answer works fine, but I highly doubt that Angry Birds does anything that clever :P

You should be able to just traverse the line and draw points as you reach each interval.

Something like this (not tested, just off the top of my head):

void drawPointsAtInterval(List<Point> points, float pointSpacing) {
    float distanceAlong = 0;

    for(int pt = 0; pt < points.count() - 1; pt ++) {
        Point a = points[pt];
        Point b = points[pt + 1];
        float lineLength = length(b - a);
        Point direction = (b - a) / lineLength;

        while(distanceAlong < lineLength) {
            Point p = a + (distanceAlong * direction);
            drawPoint(p);
            distanceAlong += pointSpacing;
        }

        distanceAlong -= lineLength;
    }
}