1.9 KiB
| created_at | title | url | author | points | story_text | comment_text | num_comments | story_id | story_title | story_url | parent_id | created_at_i | _tags | objectID | year | |||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 2017-04-26T10:23:46.000Z | Animated Bézier Curves (2010) | https://www.jasondavies.com/animated-bezier/ | arm | 106 | 9 | 1493202226 |
|
14201894 | 2010 |
Animated Bézier Curves - Jason Davies
Animated Bézier Curves - Jason Davies
Jason Davies → Animated Bézier Curves
Animated Bézier Curves
Play with the control points to modify the curves!
These animations illustrate how a parametric Bézier curve is constructed. The parameter t ranges from 0 to 1. In the simplest case, a first-order Bézier curve, the curve is a straight line between the control points.
For a second-order (quadratic) Bézier curve, first we find two intermediate points that are t along the lines between the three control points. Then we perform the same interpolation step again and find another point that is t along the line between those two intermediate points. Plotting this last point yields a quadratic Bézier curve. The same steps can be repeated for higher orders.
Inspired by a similar animation on Wikipedia. Thanks to Mike Bostock for the suggestion, and for citing me in his D3 paper!
Want to know more about Bézier curves? I highly recommend Mike Kamermans' interactive online book, A Primer on Bézier Curves.
© Jason Davies 2010 | Privacy Policy