6 ms·
Animated Bézier Curves
- akie 14y agoThank you, I now finally understand how Bézier curves actually work!
- huggyface 14y agoSecond this. It is one of those things that seems so mysterious but becomes so obvious when presented in such a clear, elegant fashion.
- tomdeakin 14y agoThirded. They is such a simple way to visualise this.
- cobrausn 14y agoIf 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 http://www.essentialmath.com/tutorial.htm
- guelo 14y agoIt's a shame about the invisible yellow lines.
- jasondavies 14y agoI've updated the colours now, is that better?
- guelo 14y agoAh yes much better, nice work.
- febeling 14y agoThere 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/ http://processingjs.nihongoresources.com/bezierinfo/
- TheRealPomax 14y agoNo, 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 14y agoAt least for the "de Casteljau" algorithm that Jason also demonstrates in this HN link (in my article, it's http://processingjs.nihongoresources.com/bezierinfo/#splitting_c http://processingjs.nihongoresources.com/bezierinfo/#splitti...)
- ret 14y agoThis is animated de Casteljau algorithm, fix the title. :)
- kilovoltaire 14y agoThe 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 https://github.com/hrldcpr/Bezier.hs/blob/master/Bezier.hs)
- tholman 14y agoA 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=x5.66y2.51x3.93y4.09x2.33y4.55x1.72y2.4x1.74y1.69x2.42y1.47x3.47y1.53x3.61y2.03x2.79y2.92x2.24y2.38x2.42y1.89 http://tholman.com/experiments/html5/bezier-curve-sim/01/?q=...
- agumonkey 14y agoObligatory pg quote: http://www.bookshelf.jp/texi/onlisp/onlisp_14.html#SEC97 http://www.bookshelf.jp/texi/onlisp/onlisp_14.html#SEC97
- tomjen3 14y agoAs 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.
- agscala 14y agoI wish there was a way to pause it! Cool regardess
- darklajid 14y agoSince upvotes are hidden: I'd love to have a way to stop/continue the animation as well.
- ssapkota 14y agoThank 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.
- weeber 14y agoThere is another good page on the adaptive subdivision algorithm for fast bezier curves rendering: http://www.antigrain.com/research/adaptive_bezier/index.html http://www.antigrain.com/research/adaptive_bezier/index.html And another one with more maths :) http://www.drdobbs.com/cpp/184403417 http://www.drdobbs.com/cpp/184403417
- greenpizza13 14y agoThis is so fascinating thank you!