Animated Bézier Curves

Thank you, I now finally understand how Bézier curves actually work!

There is another very interesting page on bezier curves which goes all the way into the maths you need, i.e. finding intersections, length of a curve, splitting a curve, etc. It's not animated but interactive, so drag the control points.

http://processingjs.nihongoresources.com/bezierinfo/

The same simple explanation in the animation leads to a nice simple Haskell implementation.

Assuming you already have a parametric line function `line p q t` that interpolates between two points p and q on t in [0,1], you can recursively implement parametric Bézier on a list of control points as:

  bezier [p] t = p
  bezier ps  t = line (bezier (init ps) t)
                      (bezier (tail ps) t)
                      t

It's exponential in the number of points though ;)

(Full source at https://github.com/hrldcpr/Bezier.hs/blob/master/Bezier.hs)

As a (2D) game developer I love bezier curves. So many uses. My favorite may be that you can calculate the curve from just the end points if you know the velocity you want the object moving along the curve to have at the end.

A while back I made a little interactive demo to get my head around how beziers work... why stop at 5 points ;) - http://tholman.com/experiments/html5/bezier-curve-sim/01/?q=...

Thank you. This gives a beautiful understanding of Bézier curves.

One request: Please add pause/resume in the animation. I could just pause at any given time, and go through the state of all points. I hope it would help anyone to understand it much easily.

This is animated de Casteljau algorithm, fix the title. :)

Obligatory pg quote:

http://www.bookshelf.jp/texi/onlisp/onlisp_14.html#SEC97

There is another good page on the adaptive subdivision algorithm for fast bezier curves rendering: http://www.antigrain.com/research/adaptive_bezier/index.html And another one with more maths :) http://www.drdobbs.com/cpp/184403417

It's a shame about the invisible yellow lines.

I wish there was a way to pause it! Cool regardess