🍉 The Obscurities of Bézier Curves Explained to My Computer Engineer Friends

when we want to create some "natural" animation

https://material.io/design/motion/speed.html#easing

@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

how does

"cubic-bezier(.., .., .., ..)"

work?

https://cubic-bezier.com/

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

BĂ©zier Curve on Wikipedia

de Casteljau's algorithm

the “triangular scheme”

https://pomax.github.io/bezierinfo/#decasteljau

implementation (React)

đź‘€

https://codesandbox.io/s/bezier-xgorv

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

https://pomax.github.io/bezierinfo/#boundingbox

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!

https://pomax.github.io/bezierinfo/#splitting

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

http://www.inf.ed.ac.uk/teaching/courses/cg/d3/bezierJoin.html

https://pomax.github.io/bezierinfo/#polybezier

BĂ©zier game

limitations

  • non-local

  • cannot precisely modal shapes like an eclipse

BĂ©zier curves in browsers

CSS Easing Functions

MDN Doc

cubic-bezier.com

SVG Paths

curve commands

(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

References

Made with Slides.com