Reverse engineering quadratic Bézier curves

I wrote an article on cubic Bézier curves almost 3 years ago. And there had been emails and comments sporadically during that period. The latest one was from a lady, so I decided to write something about it (yes, I’m biased).

The recurring (if you count 2 or 3 as recurring) question is about quadratic Bézier curves. I provided a method for calculating the 4 control points of a cubic Bézier curve, given 4 points that the curve has to pass through. The question is, how do you calculate the 3 control points of a quadratic Bézier curve, given 3 points that the curve has to pass through? The 1st and 3rd points are also the end points of the curve.

As with the cubic version, there are infinitely many solutions. The question I posed above missed out a crucial element which would give a unique solution. How far along the curve is the 2nd point? Let’s look at the quadratic Bézier equation first:

B(t) = (1-t)^2 * p0 + 2(1-t)t * p1 + t^2 * p2

where p0, p1 and p2 are the control points, and t in [0,1]

Suppose you have 3 points that the curve has to pass through. The 1st and 3rd points are also the 1st and 3rd control points (substitute t=0 and t=1 into the equation to see why that is so). That leaves the 2nd control point to be calculated. If you didn’t know, the inner control points of a Bézier curve don’t necessarily fall on the curve itself (and usually don’t).

Since you know the 3 points that pass through the curve, and the 1st and 3rd control points are known, let the points be p0, f and p2, where f is the point on the curve when t=u. Stating the value of u is the crucial element for a unique solution. In the case of a quadratic Bézier curve, the value off the top of my head is 1/2. Meaning the 2nd known point is assumed to fall about halfway along the curve. You may have a different opinion based on the problem you’re trying to solve.

So let’s substitute into the equation, shall we? At the 2nd known point f, we have

f = (1-u)^2 * p0 + 2(1-u)u * p1 + u^2 * p2

Rearranging the terms, we have

p1
= [f – (1-u)^2 * p0 – u^2 * p2] / 2(1-u)u
= 1/(2(1-u)u) * f – (1-u)/2u * p0 – u/2(1-u) * p2

Remember that u is determined by you (1/2 is a good value if you have no other information otherwise). p0, f, and p2 are the 3 known points that pass through the curve (f is the point where t=u). So the only unknown is p1, the 2nd control point.

And I can “cancel” the (1-u) and u terms in the simplification because u is strictly between 0 and 1. In particular, u cannot be equal to 0 or 1.

There you have it. A unique solution to finding the control points of a quadratic Bézier curve.

An example

But hey, I’m feeling generous. I’ll do up a solution with real values.

Suppose you have 3 points [1,1], [2,3], [4,2] that pass through a quadratic Bézier curve. The 1st and 3rd points, [1,1] and [4,2] are the 1st and 3rd control points respectively. That leaves calculating the 2nd control point such that the curve pass through [2,3] when t=0.5 (let’s assume [2,3] is halfway along the curve).

Let’s look at the final stage of our 2nd control point calculation

p1
= 1/(2(1-u)u) * f – (1-u)/2u * p0 – u/2(1-u) * p2
= 1/(2*(1-0.5)*0.5) * [2,3] – (1-0.5)/(2*0.5) * [1,1] – (0.5)/(2*(1-0.5)) * [4,2]
= 2 * [2,3] – 0.5 * [1,1] – 0.5 * [4,2]
= [4,6] – [0.5,0.5] – [2,1]
= [1.5,4.5]

So the final control points are [1,1], [1.5,4.5] and [4,2].

Quadratic Bezier curve

Curve tension

But wait, there’s bonus material! The lady also asked about curve tension. I’m not sure if that’s the correct term. Basically, she wanted to know how to skew the 2nd control point towards the 1st or 3rd control points.

This one’s easy. Just adjust your u value. If you assume u=0.2, then the 2nd control point is skewed towards p0, the 1st control point. If you assume u=0.8, then the 2nd control point is skewed towards p2, the 3rd control point.

So to skew towards p0, let u be closer to 0. To skew towards p2, let u be closer to 1.

Remember, u is decided by you, unless the problem you’re solving states otherwise.

Comments

  1. math novice says:

    You made my day! Thanks for the article it was most informative.

  2. Thank you very much!!!

    I’m a programmer but not good at math, and you saved me with the example. I was using a function which draws a curved line (bezier curve) given the 2 anchor points and a control point. The problem was i had a point that exists on the curve and i wanted to find the control point based on that one. Thanks to you i did it now!

    My Code:
    drawnObject.graphics.curveTo(myMask.p8.x*2-myMask.cp4.x/2-myMask.cp5.x/2, myMask.p8.y*2-myMask.cp4.y/2-myMask.cp5.y/2, myMask.cp5.x, myMask.cp5.y);

  3. Timo Suoranta says:

    This is related to cubic bezier splines. I wanted to get optimize u and v for ‘better shaped’ so I found this:

    http://www.tinaja.com/glib/nubz4pts1.pdf

    There is says use u = d1/(d1+d2+d3) and v = (d1+d2)/(d1+d2+d3) where dn is distance between points pn and pn-1. This typically results better curves than u=1/3 and v=2/3.

    However, it is still not what I’d like. Would it be possible to figure out u and v so that ‘loop tips’ – if you know what I mean – are at middle control points? Or, if this is not possible, at least try to minimize the distance of loop tips and middle control points?

  4. I’m glad you found that useful, Matias.

  5. Hi Timo, that apportioned chord method would be my best suggestion for solving your problem.

    There are infinitely many solutions to the problem, and it’s hard enough to do that, and still find a good curve shape.

    You mentioned that the apportioned chord method is still not to your liking. Can you give an example such that the curve doesn’t look good? You could also give an example where the “loop tip” occur.

  6. Indeed, I found that apportioned chord method works pretty well.

    For clarification, I posted a screenshot to http://neure.ath.cx/bezier.png and circled what I called ‘loop tips’ with red. I also marked the desired locations for the tips – middle points on the curve – with green rectangles. There is also another example bezier2.png but it has no extra markings.

  7. Vincent says:

    If I understand it correctly, those “loop tips” are called inflection points. Basically, it means the curve bends in a different “direction” at that point.

    You should note that the case you presented is a special case for how a Bezier curve turns out. Not all cubic Beziers turn out to have 2 inflection points.

    I found something that might help you on your project.

    http://www.caffeineowl.com/graphics/2d/vectorial/cubic-inflexion.html

    I believe that article teaches you how to find the 2 values of t for which an inflection point is found on a cubic Bezier curve. That should be your u and v values then.

  8. Timo Suoranta says:

    Thanks for the link. It looks like this is the right direction, however, not quite right.

    On that page, infliction points are where first and second derivates (yellow and purple lines) are coincident. Based on some experimenting, I am looking for points where the derivates are at right angles. Do you know what these points could be called and how would I proceed?

    I would like to let users to control 4 points on a cubic bezier curve. It would be the most intuitive for the middle control points to be ‘those’ points, but I don’t even know what they are called..

    Thanks!

  9. @Timo Suoranta

    Based on some experimenting, I am looking for points where the derivates are at right angles. Do you know what these points could be called and how would I proceed?

    Look for points in which:

    f’x(t)•f”x(t) + f’y(t)•f”y(t)=0

    Those would be the points in which the curve approximate a circle the best (speed on the trajectory and the centripetal force are orthogonal).

    Adrian