Animated Bézier Curves

http://jasondavies.com/animated-bezier/#

by davidbarker • 11 years ago

142 28 11 years ago

yummybear• 11 years 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-inte...

theophrastus• 11 years 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• 11 years ago

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

Zikes• 11 years ago

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

qnaal2• 11 years ago

mystifying..

but make sure to pronounce it "beˈzje"

http://en.wikipedia.org/wiki/Pierre_B%C3%A9zier

solox3• 11 years ago

It sounds exactly like it's spelled in French.

qnaal2• 11 years ago

hackeur news

jmeyers919• 11 years ago

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

Sir_Cmpwn• 11 years 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• 11 years 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-compu...

aw3c2• 11 years ago

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

th0ma5• 11 years 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

Lerc• 11 years 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• 11 years 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/

[2] http://blog.ncase.me/tag/explorable-explanations/

Retra• 11 years ago

I've always called them "demo widgets." They are also just called "applets" in some contexts.

bobbles• 11 years ago

Edumation?

irascible• 11 years ago

Algomations! And a plug for a friend's labor of love http://www.algomation.com!

Kenji• 11 years 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• 11 years ago

There is a link to that Wikipedia article/animation at the linked site:

http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Constructing_...

photon_off• 11 years ago

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

NamTaf• 11 years 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• 11 years ago

They're also useful for 3d graphics. I used them a lot in blender when making assets for a game.

archagon• 11 years 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• 11 years 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• 11 years 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

Bezier curves are used heavily in animation, and pretty much anything graphical, from fonts to games to web browsers.

abdias• 11 years 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

madethemcry• 11 years 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/

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

https://news.ycombinator.com/item?id=7997706

Animated Bézier Curves

Related Stories