

Understanding Quadratic Bézier Curves - antoineleclair
http://antoineleclair.ca/2011/08/27/understandaing-quadratic-b%C3%A9zier-curves/

======
jacobolus
Jason Davies's version using D3:

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

[http://www.jasondavies.com/animated-bezier/animated-
bezier.j...](http://www.jasondavies.com/animated-bezier/animated-bezier.js)

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

------
palish
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...)

~~~
saucerful
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.

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

~~~
psykotic
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+...](http://www.wolframalpha.com/input/?i=integrate+sqrt%28a+x^2+%2B+bx+%2B+c%29)

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.

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

[http://en.wikipedia.org/wiki/Bezier_curve#Constructing_B.C3....](http://en.wikipedia.org/wiki/Bezier_curve#Constructing_B.C3.A9zier_curves)

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

------
ontouchstart
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...](http://ontouchstart.posterous.com/explore-svg-with-
coffeescript-jsfiddle-9-drag)

Cubic Bézier timing function CSS: [http://ontouchstart.posterous.com/explore-
svg-with-coffeescr...](http://ontouchstart.posterous.com/explore-svg-with-
coffeescript-jsfiddle-11-dra)

------
tripzilch
that was very clear and concise, thanks!

