
Animated Bézier Curves - davidbarker
http://jasondavies.com/animated-bezier/#
======
friendzis
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...](http://sploid.gizmodo.com/fantastic-explanation-of-how-computers-
draw-curves-1641989231)

~~~
aw3c2
Please don't link to sites like gizmodo aggregators, here is the direct link:
[http://vimeo.com/106757336](http://vimeo.com/106757336)

------
Lerc
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
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/)

------
yavor-atanasov
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...](http://yavkata.co.uk/weblog/actionscript_3/bezier-curve-interactive-
visualization-with-actionscript-3/)

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

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

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

------
Kenji
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
There is a link to that Wikipedia article/animation at the linked site:

[http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Constructing_...](http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Constructing_B.C3.A9zier_curves)

------
qnaal
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
It sounds exactly like it's spelled in French.

~~~
qnaal
hackeur news

------
yummybear
Nicely done. Illustrates the mechanisms great.

------
NamTaf
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!

~~~
abdias
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)

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

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

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

------
martco
Didn't Lea Verou already do this? [http://cubic-bezier.com/](http://cubic-
bezier.com/)

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

