Understanding Quadratic Bézier Curves | Hacker News Reader

Understanding Quadratic Bézier Curves

antoineleclair.ca

Jason Davies's version using D3:

http://www.jasondavies.com/animated-bezier/

http://www.jasondavies.com/animated-bezier/animated-bezier.j...

Thanks, I liked this better than the originally posted article, mostly because it explains higher order beziers.

Interesting... It looks like the speed of the dot isn't constant. I wonder if that would cause problems e.g. for animation purposes? (Like using the bezier curve as a way to animate the position of an object moving through 3D space in a game / in movie production...)

Yes, if you want a constant speed you need to re-parametrize by arclength, which is straightforward for quadratic (or, more generally, polynomial) curves as there is a simple closed expression for their length.

But those tend not to have a zero derivative at the vertices, no? Which would cause other animation problems, if you try to link two curves together.

Yes, a quadratic Bezier is only piecewise differentiable. If you need it to be completely smooth you can use a higher order Bezier (i.e. a higher order polynomial).

But the reality is that if the curve looks pretty smooth, the animation will be pretty smooth. By computing the change in derivative at the singular point you can figure out how big the jump is, and then try to minimize it.

You are correct about the re-parametrization. A closed expression for arc-length is news to me however. Do you have a citation?

There's a closed-form expression for the arc length of a quadratic Bezier segment. Maybe that's what he had in mind. The integrand is sqrt(x'(t)^2 + y'(t)) dt, where x(t) and y(t) are quadratic in t and hence x'(t) and y'(t) are linear, so it just works out to the square root of a quadratic polynomial. With the quadratic formula to the rescue and a clever substitution, you get this closed form:

http://www.wolframalpha.com/input/?i=integrate+sqrt%28a+x^2+...

This page documents the derivation in more detail:

http://segfaultlabs.com/docs/quadratic-bezier-curve-length

But should you use this for reparameterization? One great thing about calculating arc length by numerical quadrature is that you get all the intermediate arc lengths for the initial segments of the curve for free as intermediate results. Those are exactly what you need for reparameterization, and it works for polynomial and rational curves of any degree whatsoever, not only quadratics.

By contrast, there's no way you could find a closed-form expression for the _inverse_ of that arc length function for reparameterization, so you'd still need to do the same old iterative inversion thing of tabulating it at a bunch of points and then inverting the table and lerping between the gaps. The incremental evaluation required for that is a much better fit for numerical quadrature. If you have to do one, you might as well do both.

Polynomial splines are pretty shitty compared to rational splines for animation and modeling, but they both have the problem of non-constant speed. It gets much worse with higher degree curves. You fix that by letting the animator separately specify a scalar speed curve so he can control where things speed up and down. To make this curve be natural to manipulate, it must be specified relative to an arc length parameterization. You can sometimes profitably combine the arc length reparameterization curve and the pre-integrated user-specified speed remapping into a single remapping curve that's baked out to disk, so the run-time curve evaluator only has to deal with a single level of parameter remapping on top of the raw spline.

This is just a fact of life with splines. They have non-uniform speed in their raw form and you have to deal with it. It's also why quaternion slerping being constant angular speed isn't a real advantage over lerp-and-normalize because they both trace out the same path and often you'll want to overlay a speed curve anyway (and lerp-and-normalize's speed is only barely non-uniform). Evaluate-and-normalize is the way to go for quaternions. It works great for multi-way skeletal animation blending and higher-order rotation interpolation (just do the spline evaluation in R^4 and project back onto the unit sphere). Casey has an old email that goes into some of this: http://mollyrocket.com/911.txt

I think it's an interesting study in the jargon of specialization that I had to look up most of what you wrote in order to figure out that you weren't just making things up.

This happens in any specialization... An endocrinologist and a radiologist, for example, probably only speak half of the same medical language.

Now you know how non-programmers feel when they overhear programmers talking shop. :)

It's not my fault that slerp and lerp sound suspiciously fabricated! :-D

They're just gifs, but wikipedia has some interesting animations.

http://en.wikipedia.org/wiki/Bezier_curve#Constructing_B.C3....

Or written another way, it's a weighted average of weighted averages.

I did a few exercises with SVG in pure CoffeeScript (no external library)

Draggable Cubic Bézier curve: http://ontouchstart.posterous.com/explore-svg-with-coffeescr...

Cubic Bézier timing function CSS: http://ontouchstart.posterous.com/explore-svg-with-coffeescr...

that was very clear and concise, thanks!

Reply on news.ycombinator.com