6 ms·

Animated Bézier Curves

142 points by davidbarker 12y ago

yummybear 12y ago
Nicely done. Illustrates the mechanisms great.
yavor-atanasov 12y ago
Here's a similar thing I did 5 years ago (yes, I know it is in actionscript :) ): http://yavkata.co.uk/weblog/actionscript_3/bezier-curve-interactive-visualization-with-actionscript-3/ http://yavkata.co.uk/weblog/actionscript_3/bezier-curve-inte...
theophrastus 12y ago
Very instructive! I've often seen where Bézier curves ("splines") are used to interpolate 'missing' data (for visualization, but also for analytical curve fitting) and always worry that hidden assumptions are thereby in place, (for instance: is nature, by default, 'smooth'?). If there was a reference discussing this situation, I'd love to be directed to it.
martco 12y ago
Didn't Lea Verou already do this? http://cubic-bezier.com/ http://cubic-bezier.com/
- Zikes 12y ago
  Almost completely different. Hers lets you design a bezier curve for practical use, but doesn't explain the concept.
qnaal 12y ago
mystifying.. but make sure to pronounce it "beˈzje" http://en.wikipedia.org/wiki/Pierre_B%C3%A9zier http://en.wikipedia.org/wiki/Pierre_B%C3%A9zier
- solox3 12y ago
  It sounds exactly like it's spelled in French.
  - qnaal 12y ago
    hackeur news
jmeyers919 12y ago
I made something similar on the Khan Academy a while back: https://www.khanacademy.org/computer-programming/bezier-thing/5150292972142592 https://www.khanacademy.org/computer-programming/bezier-thin...
- Sir_Cmpwn 12y ago
  It may be useful to explain that you have to click on the black area a few times to make this do anything.
friendzis 12y ago
There are many similar infographics (infogifs?) displaying Bézier curves, but this[0] is by far the best in depth explanation of what those colored lines actually mean or how you get them. http://sploid.gizmodo.com/fantastic-explanation-of-how-computers-draw-curves-1641989231 http://sploid.gizmodo.com/fantastic-explanation-of-how-compu...
- aw3c2 12y ago
  Please don't link to sites like gizmodo aggregators, here is the direct link: http://vimeo.com/106757336 http://vimeo.com/106757336
th0ma5 12y ago
I wrote some Clojure code a while back that may or may not correctly implement interpolation over 2D Bezier curves here https://gist.github.com/th0ma5w/4035151 https://gist.github.com/th0ma5w/4035151
Lerc 12y ago
These things are great, I have always thought it would be a great resource to have a library of them that are creative commons. There doesn't appear to be a name for what they are however. Concept-expressed-as-code-generated-animation that-is-sometimes-interactive is a bit longwinded. Ceacgatisi is a bit of a mouthful. The idea that it should have a name is not as trivial as it might seem. If these things had a name it would stimulate development of new ones. "I'll make an X" "Let's see if there's an X for that concept". The odd thing is it would probably be best if a name used for the idea didn't actually express what the idea was. An abstract name that allowed the idea to form naturally rather than directing a specific manner. Much in a similar way to Kodi is an abstract name rather than the descriptive (but inaccurate) XBMC.
- mkremins 12y ago
  Bret Victor calls these sorts of things "explorable explanations" [1]. Lately the term seems to be catching on with a few others [2] as well. [1] http://worrydream.com/ExplorableExplanations/ http://worrydream.com/ExplorableExplanations/ [2] http://blog.ncase.me/tag/explorable-explanations/ http://blog.ncase.me/tag/explorable-explanations/
- Retra 12y ago
  I've always called them "demo widgets." They are also just called "applets" in some contexts.
- bobbles 12y ago
  Edumation?
- irascible 12y ago
  Algomations! And a plug for a friend's labor of love http://www.algomation.com http://www.algomation.com!
Kenji 12y ago
The wikipedia page about bézier curves has a similar gif. This is actually how I first understood the concept and drew my first bézier curve (seeing the picture was enough to implement it), years ago. Great visualization, very easy to understand.
- nacs 12y ago
  There is a link to that Wikipedia article/animation at the linked site: http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Constructing_B.C3.A9zier_curves http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Constructing_...
deleted 12y ago
[deleted]
deleted 12y ago
[deleted]
photon_off 12y ago
Here's mine from awhile ago: http://techblog.appnexus.com/2011/an-animated-bezier-curve-demo/ http://techblog.appnexus.com/2011/an-animated-bezier-curve-d...
NamTaf 12y ago
This is something like the 4th or 5th time I've seen Bezier curves appear on HN. What do you IT guys even use them for? Vector graphics? As a MechE, we encounter them mainly due to CAD and associated computational engineering, but I couldn't map how they'd be used in the more general IT world. I'd love to hear some use cases!
- sbochins 12y ago
  They're also useful for 3d graphics. I used them a lot in blender when making assets for a game.
- archagon 12y ago
  I'm using them right now to implement smooth line drawing in an iOS app. Really easy and effective! Also, it's super easy to create programmatic art for your app using the CoreGraphics API. If you go that route, there's a good chance you'll be creating a few UIBezierCurve objects along the way.
- louthy 12y ago
  I used them years ago to create bezier patch landscapes in games (PS1, PS2 era,...) . They allow for adaptive resolution which is great when you want to get rid of that rigid polygon look.
- dahart 12y ago
  You'll see some use cases and examples if you explore the links in the article, e.g., https://github.com/mbostock/d3/wiki/Gallery https://github.com/mbostock/d3/wiki/Gallery Bezier curves are used heavily in animation, and pretty much anything graphical, from fonts to games to web browsers.
- abdias 12y ago
  I use them for timing functions such as various easeings etc. But also for graphics, though here I tend to use cardinal/catmull-rom splines more. Edit: I did make a JS implementation of the latter if anyone's interested (MIT): https://github.com/epistemex/cardinal-spline-js https://github.com/epistemex/cardinal-spline-js
madethemcry 12y ago
Well, there is at least another source with better visualizations AND explanations of bezier curves. So I'm not impressed at all. The ultimate guide for bezier curves including great animations to explain the concept is from pomax: http://pomax.github.io/bezierinfo/ http://pomax.github.io/bezierinfo/ I would go as far as to call it a bezier reference document. I learned both geomteric and numerical approaches to calculate, combine and draw bezier curves from this source. I am still amazed by the beauty of de Casteljau's algorithm. The document has been submitted here before: https://news.ycombinator.com/item?id=8804691 https://news.ycombinator.com/item?id=8804691 https://news.ycombinator.com/item?id=5714842 https://news.ycombinator.com/item?id=5714842 https://news.ycombinator.com/item?id=7997706 https://news.ycombinator.com/item?id=7997706

142 points by davidbarker 12y ago

Nicely done. Illustrates the mechanisms great.

Here's a similar thing I did 5 years ago (yes, I know it is in actionscript :) ): http://yavkata.co.uk/weblog/actionscript_3/bezier-curve-interactive-visualization-with-actionscript-3/ http://yavkata.co.uk/weblog/actionscript_3/bezier-curve-inte...

theophrastus 12y ago

Very instructive! I've often seen where Bézier curves ("splines") are used to interpolate 'missing' data (for visualization, but also for analytical curve fitting) and always worry that hidden assumptions are thereby in place, (for instance: is nature, by default, 'smooth'?). If there was a reference discussing this situation, I'd love to be directed to it.

martco 12y ago

Didn't Lea Verou already do this? http://cubic-bezier.com/ http://cubic-bezier.com/

Zikes 12y ago
Almost completely different. Hers lets you design a bezier curve for practical use, but doesn't explain the concept.

qnaal 12y ago

mystifying.. but make sure to pronounce it "beˈzje" http://en.wikipedia.org/wiki/Pierre_B%C3%A9zier http://en.wikipedia.org/wiki/Pierre_B%C3%A9zier

solox3 12y ago
It sounds exactly like it's spelled in French.
- qnaal 12y ago
  hackeur news

jmeyers919 12y ago

I made something similar on the Khan Academy a while back: https://www.khanacademy.org/computer-programming/bezier-thing/5150292972142592 https://www.khanacademy.org/computer-programming/bezier-thin...

Sir_Cmpwn 12y ago
It may be useful to explain that you have to click on the black area a few times to make this do anything.

friendzis 12y ago

There are many similar infographics (infogifs?) displaying Bézier curves, but this[0] is by far the best in depth explanation of what those colored lines actually mean or how you get them. http://sploid.gizmodo.com/fantastic-explanation-of-how-computers-draw-curves-1641989231 http://sploid.gizmodo.com/fantastic-explanation-of-how-compu...

aw3c2 12y ago
Please don't link to sites like gizmodo aggregators, here is the direct link: http://vimeo.com/106757336 http://vimeo.com/106757336

th0ma5 12y ago

I wrote some Clojure code a while back that may or may not correctly implement interpolation over 2D Bezier curves here https://gist.github.com/th0ma5w/4035151 https://gist.github.com/th0ma5w/4035151

Lerc 12y ago

These things are great, I have always thought it would be a great resource to have a library of them that are creative commons. There doesn't appear to be a name for what they are however. Concept-expressed-as-code-generated-animation that-is-sometimes-interactive is a bit longwinded. Ceacgatisi is a bit of a mouthful. The idea that it should have a name is not as trivial as it might seem. If these things had a name it would stimulate development of new ones. "I'll make an X" "Let's see if there's an X for that concept". The odd thing is it would probably be best if a name used for the idea didn't actually express what the idea was. An abstract name that allowed the idea to form naturally rather than directing a specific manner. Much in a similar way to Kodi is an abstract name rather than the descriptive (but inaccurate) XBMC.

mkremins 12y ago
Bret Victor calls these sorts of things "explorable explanations" [1]. Lately the term seems to be catching on with a few others [2] as well. [1] http://worrydream.com/ExplorableExplanations/ http://worrydream.com/ExplorableExplanations/ [2] http://blog.ncase.me/tag/explorable-explanations/ http://blog.ncase.me/tag/explorable-explanations/
Retra 12y ago
I've always called them "demo widgets." They are also just called "applets" in some contexts.
bobbles 12y ago
Edumation?
irascible 12y ago
Algomations! And a plug for a friend's labor of love http://www.algomation.com http://www.algomation.com!

Kenji 12y ago

The wikipedia page about bézier curves has a similar gif. This is actually how I first understood the concept and drew my first bézier curve (seeing the picture was enough to implement it), years ago. Great visualization, very easy to understand.

nacs 12y ago
There is a link to that Wikipedia article/animation at the linked site: http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Constructing_B.C3.A9zier_curves http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Constructing_...

deleted 12y ago

[deleted]

deleted 12y ago

[deleted]

photon_off 12y ago

Here's mine from awhile ago: http://techblog.appnexus.com/2011/an-animated-bezier-curve-demo/ http://techblog.appnexus.com/2011/an-animated-bezier-curve-d...

NamTaf 12y ago

This is something like the 4th or 5th time I've seen Bezier curves appear on HN. What do you IT guys even use them for? Vector graphics? As a MechE, we encounter them mainly due to CAD and associated computational engineering, but I couldn't map how they'd be used in the more general IT world. I'd love to hear some use cases!

sbochins 12y ago
They're also useful for 3d graphics. I used them a lot in blender when making assets for a game.
archagon 12y ago
I'm using them right now to implement smooth line drawing in an iOS app. Really easy and effective! Also, it's super easy to create programmatic art for your app using the CoreGraphics API. If you go that route, there's a good chance you'll be creating a few UIBezierCurve objects along the way.
louthy 12y ago
I used them years ago to create bezier patch landscapes in games (PS1, PS2 era,...) . They allow for adaptive resolution which is great when you want to get rid of that rigid polygon look.
dahart 12y ago
You'll see some use cases and examples if you explore the links in the article, e.g., https://github.com/mbostock/d3/wiki/Gallery https://github.com/mbostock/d3/wiki/Gallery Bezier curves are used heavily in animation, and pretty much anything graphical, from fonts to games to web browsers.
abdias 12y ago
I use them for timing functions such as various easeings etc. But also for graphics, though here I tend to use cardinal/catmull-rom splines more. Edit: I did make a JS implementation of the latter if anyone's interested (MIT): https://github.com/epistemex/cardinal-spline-js https://github.com/epistemex/cardinal-spline-js

madethemcry 12y ago

Well, there is at least another source with better visualizations AND explanations of bezier curves. So I'm not impressed at all. The ultimate guide for bezier curves including great animations to explain the concept is from pomax: http://pomax.github.io/bezierinfo/ http://pomax.github.io/bezierinfo/ I would go as far as to call it a bezier reference document. I learned both geomteric and numerical approaches to calculate, combine and draw bezier curves from this source. I am still amazed by the beauty of de Casteljau's algorithm. The document has been submitted here before: https://news.ycombinator.com/item?id=8804691 https://news.ycombinator.com/item?id=8804691 https://news.ycombinator.com/item?id=5714842 https://news.ycombinator.com/item?id=5714842 https://news.ycombinator.com/item?id=7997706 https://news.ycombinator.com/item?id=7997706