🍉 The Obscurities of Bézier Curves Explained to My Computer Engineer Friends
when we want to create some "natural" animation
@keyframes move {
0% { transform: translateY(0); }
10% { transform: translateY(10px); }
20% { transform: translateY(20px); }
30% { transform: translateY(30px); }
40% { transform: translateY(40px); }
50% { transform: translateY(50px); }
60% { transform: translateY(60px); }
70% { transform: translateY(70px); }
80% { transform: translateY(80px); }
90% { transform: translateY(90px); }
100% { transform: translateY(100px); }
}what are our alternatives
so how... does it really work
why a few numbers can represent curve
The Peugeot 204 was the first car who’s bodywork was completely build using UNISURF CAD. Image via Flickr dave_7
the initial problem
đź‘€
modeling curves
modeling curve is not easy!
illustrations: Farin, Curves and Surfaces for CAGD
we are in the business of approximating curves
Â
mathematicians: all continuous functions in a closed interval has polynomial approximation
engineers: how ah?
(please don't read this) Weierstrass approximation theorem states that every continuous function defined on a closed interval [a, b] can be uniformly approximated as closely as desired by a polynomial function
de Casteljau's algorithm
the “triangular scheme”
https://pomax.github.io/bezierinfo/#decasteljau
recursive nature of
de Casteljau's algorithm
Some properties of BĂ©zier curves
and their implications
1. the whole curve will stay within the polygon that defines it
this means you will guaranteed to have a “bounding box” for any Bézier curve
2.1. you can break a BĂ©zier curve into smaller pieces and each segment is still a BĂ©zier curve!
2.2. furthermore, all the control points of the (left and right) segments are already computed!
1. + 2. implies you can find the intersections of any two BĂ©zier curves
by continuously breaking them down until either no bounding boxes intersect or you reach pixel level and still have intersecting bounding boxes
(check code for curve computation with split curve)
3. you can “join” two Bézier curves to form poly-Bézier curves, with some smoothing conditions
the smoothing conditions are to match the derivatives at their joints
limitations
-
non-local
-
cannot precisely modal shapes like an eclipse
BĂ©zier curves in browsers
(similarly)
Canvas curveTo
representing font glyphs
(beyond browsers)
PostScript
- a page description language
- used by Adobe
- defines objects with vectors and rasters them on the fly
- vectors are specified with straight lines and spline curves
- BĂ©zier Primer
https://pomax.github.io/bezierinfo/ - Finding a Point on a BĂ©zier Curve: De Casteljau's Algorithm
https://pages.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/Bezier/de-casteljau.html - Joining BĂ©zier Curves
http://www.inf.ed.ac.uk/teaching/courses/cg/d3/bezierJoin.html - The Bézier curve – How car design influenced CAD
https://blog.bricsys.com/the-bezier-curve-how-car-design-influenced-cad/ - Definition of BĂ©zier Curve and Its Properties
http://web.mit.edu/hyperbook/Patrikalakis-Maekawa-Cho/node12.html
References
- An outsider's introduction to Fonts
http://www.anaesthetist.com/mnm/fonts/Findex.htm#index.htm - The BĂ©zier Game
https://bezier.method.ac/ - BĂ©zier Curves and Type Design: A Tutorial
https://learn.scannerlicker.net/2014/04/16/bezier-curves-and-type-design-a-tutorial/ - TrueType Outlines
http://www.truetype-typography.com/ttoutln.htm
TrueType's curves are quadratic B-splines. Each spline is equivalent to a series of quadratic BĂ©zier curves.
- TrueType Reference Manual
https://developer.apple.com/fonts/TrueType-Reference-Manual/RM01/Chap1.html - Converting Outlines to the TrueType Format
https://developer.apple.com/fonts/TrueType-Reference-Manual/RM08/appendixE.html
How to measure and handle errors - TrueType Fundamentals
https://docs.microsoft.com/en-us/typography/opentype/spec/ttch01 - Font Wars
https://courses.cs.washington.edu/courses/csep590a/06au/projects/font-wars.pdf
🍉 The Obscurities of Bézier Curves Explained to My Computer Engineer Friends
By Wei Gao
