## Quadratic Bezier curve control point calculation demo

MacGile made a video to demonstrate the calculation of control points of a quadratic Bezier curve. The algorithm is based on what I wrote here.

That looks awesome! Thanks MacGile!

Skip to content
# Polymath Programmer

# Articles with control point

## Quadratic Bezier curve control point calculation demo

## Reverse engineering quadratic Bézier curves

### An example

### Curve tension

## Those variables on Bezier curve equations are not fixed

Code. Maths. Work.

MacGile made a video to demonstrate the calculation of control points of a quadratic Bezier curve. The algorithm is based on what I wrote here.

That looks awesome! Thanks MacGile!

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.

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].

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.

I wrote something on reverse engineering Bezier curves about… *goes to check* woah, 2 years ago! I don’t remember it being *that* long… (You might want to read that article before proceeding…)

Anyway, I’ve received a few comments and emails about its usefulness. Basically, what I did was to find the 4 control points of a cubic Bezier curve from 4 known points which lie on that Bezier curve. 2 of the known points are to be the end points of the Bezier curve (which automatically makes them control points too). The other 2 known points lie somewhere on the Bezier curve.

Here’s where the confusion sets in. Commenter Yonatan pointed out that there is an infinite number of Bezier curves based on how those 2 known points are defined. And he’s right.

Now, I formed that solution based on the “natural” implicit decision that the 4 points are *evenly spread out* on the Bezier curve. There is no reason for them to be, and the math never assumed they are. The solution arose from the assumption that the control points were evenly spread out, but in the end, it worked for the general case as well. So long as 0 < u,v < 1 and u not equal to v (and logically speaking, u < v), everything worked fine.

So the whole point of this article is this: u doesn’t have to be 1/3, and v doesn’t have to be 2/3. *You* are supposed to know or decide what value they take. Once you’ve decided, the other control points will be uniquely determined. Let me illustrate:

Now the 2 Bezier curves are exactly the same (I would know, I copied and pasted them…). Suppose I define u and v such that **f** and **g** lie on certain points on one Bezier curve, and they lie on different other points on the other Bezier curve. What happens is that the control points **p1** and **p2** are different for the 2 Bezier curves, even though the curves are exactly the same!

**Disclaimer**: I haven’t worked out an example such that it is true (other than the trivial case of a straight line), that a Bezier curve can be drawn with 2 different sets of control points. As in exactly the same. However, based on the math, I *can* say that 4 points lying on a Bezier curve can be drawn with 2 different sets of control points. The resulting curves might (actually they should) differ slightly, a twitch of a pixel here, a slight upward gradient there. But the 4 points would be exactly positioned as calculated. It’s meant to be a, what’s the word, *sensational* example. So there.

I can’t tell you what u and v are, although 1/3 and 2/3 should work fine. I gave you the theory and the solution. It’s up to you to decide how to use it. Depending on your context, you might decide on different values for u and v, which will influence how your control points are calculated.

My original intent was to produce a camera path flying in 3D. I didn’t care about the “correctness” of its path, only that there *is* one. As such, u=1/3 and v=2/3 worked excellently for me.

You might find that 1/3 and 2/3 don’t work for you. That’s fine. u and v are *variables*. By definition, they’re not fixed. Choose whatever value works for you. Depending on context, you might even want to come up with a simple formula (based on your situation) to calculate u and v dynamically.