
Animated Bézier Curves - J3L2404
http://www.jasondavies.com/animated-bezier/
======
akie
Thank you, I now finally understand how Bézier curves actually work!

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

~~~
tomdeakin
Thirded. They is such a simple way to visualise this.

~~~
cobrausn
If you wish for some additional reinforcement on interpolation and splines,
the presentation on this by Squirrel Eiserloh for GDC is fantastic.

<http://www.essentialmath.com/tutorial.htm>

------
febeling
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/>

~~~
TheRealPomax
No, I'm pretty sure I made them animated, and added a big red text over the
sketches to make sure you know they are, saying "Animated sketch, click to
play" =D

~~~
TheRealPomax
At least for the "de Casteljau" algorithm that Jason also demonstrates in this
HN link (in my article, it's
[http://processingjs.nihongoresources.com/bezierinfo/#splitti...](http://processingjs.nihongoresources.com/bezierinfo/#splitting_c))

------
kilovoltaire
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>)

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

------
tholman
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=...](http://tholman.com/experiments/html5/bezier-curve-
sim/01/?q=x5.66y2.51x3.93y4.09x2.33y4.55x1.72y2.4x1.74y1.69x2.42y1.47x3.47y1.53x3.61y2.03x2.79y2.92x2.24y2.38x2.42y1.89)

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

------
agumonkey
Obligatory pg quote:

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

------
weeber
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>

------
guelo
It's a shame about the invisible yellow lines.

~~~
jasondavies
I've updated the colours now, is that better?

~~~
guelo
Ah yes much better, nice work.

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

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

~~~
darklajid
Since upvotes are hidden: I'd love to have a way to stop/continue the
animation as well.

