đźŤ‰ 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 polyBĂ©zier curves, with some smoothing conditions
the smoothing conditions are to match the derivatives at their joints
limitations

nonlocal

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/decasteljau.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/thebeziercurvehowcardesigninfluencedcad/  Definition of BĂ©zier Curve and Its Properties
http://web.mit.edu/hyperbook/PatrikalakisMaekawaCho/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/beziercurvesandtypedesignatutorial/  TrueType Outlines
http://www.truetypetypography.com/ttoutln.htm
TrueType's curves are quadratic Bsplines. Each spline is equivalent to a series of quadratic BĂ©zier curves.
 TrueType Reference Manual
https://developer.apple.com/fonts/TrueTypeReferenceManual/RM01/Chap1.html  Converting Outlines to the TrueType Format
https://developer.apple.com/fonts/TrueTypeReferenceManual/RM08/appendixE.html
How to measure and handle errors  TrueType Fundamentals
https://docs.microsoft.com/enus/typography/opentype/spec/ttch01  Font Wars
https://courses.cs.washington.edu/courses/csep590a/06au/projects/fontwars.pdf
đźŤ‰ The Obscurities of BĂ©zier Curves Explained to My Computer Engineer Friends
By Wei Gao
đźŤ‰ The Obscurities of BĂ©zier Curves Explained to My Computer Engineer Friends
 300
Loading comments...