Bezier curve inflection points

Adrian Colomitchi wrote me an email about an article I wrote. It turns out that I was wrong about the inflection point section. I was trying to figure out what Timo meant by “loop tips”, and I figured it could be an inflection point.

So here’s how Adrian describes inflection points:

If you drive or ride a bicycle: inflection points will happen when you switch your direction from left-to-right or vice-versa.
The inflexion points have 0-curvature (and infinite radius)… for an instant you travel straight (because you are switching the direction).
By contrast, the tip points will have maximum curvature.

Here’s how the inflection points should actually look like (screenshots taken from Adrian’s site):

A Bezier curve with no inflection points:
Bezier curve with no inflection points

A Bezier curve with one inflection point:
Bezier curve with one inflection point

A Bezier curve with two inflection points:
Bezier curve with two inflection points

You can find out more about inflection points on a cubic Bezier curve on Adrian’s website.

If you have anything to add about inflection points (or Bezier curves), comment below.

Those variables on Bezier curve equations are not fixed

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:

Same Bezier curve with different control points

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.

Rapidly calculating Bezier points

The standard cubic Bezier curve is given by
B(t) = (1-t)3p0 + 3(1-t)2tp1 + 3(1-t)t2p2 + t3p3
where p0, p1, p2, p3 are the control points and t is in the interval [0, 1].

Very elegant, but not very practical. Too many multiplications and additions to be used in a fast-paced environment such as game development. If it’s a 3D Bezier curve, 3 separate calculations are needed for the x-, y- and z-component for a given t value. What we need is a simplication of the equation.

Expanding the polynomial equation, we have
= (1 – 3t + 3t2 – t3)p0
+ (3t -6t2 + 3t3)p1
+ (3t2 – 3t3)p2
+ t3p3

Rearranging the coefficients of tn, we have
= t3(-p0 + 3p1 – 3p2 + p3)
+ t2(3p0 – 6p1 + 3p2)
+ t(-3p0 + 3p1)
+ p0

The coefficients can now be reduced to constants by precalculating them, and calculation of a Bezier point takes less computation.

In matrix form, the equation looks like
Coefficient matrix form of Bezier curve