Animated Bézier Curves | Hacker News Reader

Animated Bézier Curves

jasondavies.com

142 pointsdavidbarker28 comments

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

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

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.

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/

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

Edumation?

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

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

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.

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

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

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.

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

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

mystifying..

but make sure to pronounce it "beˈzje"

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

It sounds exactly like it's spelled in French.

hackeur news

Nicely done. Illustrates the mechanisms great.

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!

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

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.

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.

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.

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

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

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

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

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

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

Reply on news.ycombinator.com