How can I draw a constant length of a Bezier curve?

Question

I am creating a program that draws a quadratic Bezier curve where the points of the curve move as the program runs. I draw the curve by drawing 40 dots along it to make it look somewhat solid. However, I want the section of the curve that is drawn to always be the same length, 200 units. What I do is draw only up to 200 units out the curve that is X units long. The problem with this is that visually the drawn section shrinks as the curve gets larger. I want it always to be the same no matter how long the curve gets, but I have no idea how to go about doing this.

Here's what it looks like. I will also post the code which you would have to run in CodeSkulptor 3 to get these results (it's a web IDE, I can't post links here put it would show up if you search it).

The blue section is what gets drawn of the curve, it appears longer here when the total curve length is shorter

When the total curve is longer, it is slightly shorter. It becomes even shorter as you extend the total curve.

Update:

I have reworked the program to produce my desired results, but it does so by using an exhaustive number of iterations per second that slows down the canvas drastically. I don't believe this is a solution, but rather something that shows what I'm trying to accomplish. I'm hoping that someone can help me find a way to make this program produce the same results but without the thousands of iterations.

The new code, along with all the code that was part of the original problem, is located here: https://py3.codeskulptor.org/#user303_MAsllc2ZJd4RIOO.py

What you want is called an arc length reparameterization and it's a symbolically unsolvable problem for cubics, and ridiculously complicated for quadratics, so your best bet is to stick with numerical approximations. What you probably want to do instead, though, is find "the point d=200 away from the start", by binary searching through your curve with an arclength approximation function, and then splitting on the resulting t. Then redrawing the first curve in that split in blue. — Mike 'Pomax' Kamermans

furas furas · Accepted Answer · 2019-07-19T23:03:13

If you use only

distanceBetweenPoints = currentBezierLength / tailSegments

without if/else then it draws correctly.

def DrawPointsOnTail(canvas):
    global tailSegments, centerPoint, endPoint, midPoint, tailLength
    currentBezierLength = BezierLength(centerPoint.position,
                                       midPoint.position, 
                                       endPoint.position,
                                       100)
    print (currentBezierLength)
    #if (currentBezierLength < tailLength):
    distanceBetweenPoints = currentBezierLength / tailSegments
    #else:
    #distanceBetweenPoints = tailLength / tailSegments

    for i in range(0, tailSegments):
        currentSegment = Point(BezierCurve(centerPoint.position,
                                           midPoint.position,
                                           endPoint.position,
                                           (i * distanceBetweenPoints) / currentBezierLength),
                               3, "Blue")
        currentSegment.draw(canvas)

Code on codeskulptor

How can I draw a constant length of a Bezier curve?

1 Answers