Animated Bézier Curves

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/

Re: Animated Bézier Curves

#7

Post by ret » Thu, Apr 26, 2012, 1:11 PM UTC

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

Re: Animated Bézier Curves

#8

Post by huggyface » Thu, Apr 26, 2012, 1:16 PM UTC

akie wrote: post #2

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

Second this. It is one of those things that seems so mysterious but becomes so obvious when presented in such a clear, elegant fashion.

Re: Animated Bézier Curves

#9

Post by kilovoltaire » Thu, Apr 26, 2012, 1:35 PM UTC

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)

Re: Animated Bézier Curves

#10

Post by tholman » Thu, Apr 26, 2012, 2:06 PM UTC

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