If you are at all interested in SVG or Bézier curves, you’ve probably seen something like Jason Davies’ animation. I found that those animations are an excellent way of intuitively grasping how Bézier curves work. However, the math behind it all is less intuitive.
I just read this really illuminating article.
Something I hadn’t realized before reading the article is that, mathematically, Bézier curves are not defined as run-of-the-mill functions. Whereas generally one would plug an
x value into a function to determine a
y value, à la
f(x) = y = ax + b , Bézier curves are defined parametrically. The values of
y are determined independently, according to a third parameter, dubbed
This is the general formula for a cubic Bézier:
B(t) = (1-t)3·P0 + 3·(1-t)2·t·P1 + 3·(1-t)·t2·P2 + t3·P3
P3 are the start and end points, and
P2 are the first and second control points.
This actually means:
x = (1-t)3·P0x + 3·(1-t)2·t·P1x + 3·(1-t)·t2·P2x + t3·P3x y = (1-t)3·P0y + 3·(1-t)2·t·P1y + 3·(1-t)·t2·P2y + t3·P3y
So, plugging the same
t value into both functions will give you an
x and a
y, i.e. one coordinate for a point on the Bézier curve with said values for
So, what is
t ∈ [0,1]
t goes continuously from 0 to 1, and, at each value, it generates a new set of coordinates.
Here’s what the path
M0 200C0 0 100 0 100 200 looks like:
If you interpret
t as increasing over time, what you get is that black dot - its
x,y coordinates represent the values of x and y generated by the current value of t in the parametric equation.
Parsing out that path into the constants in the parametric equation you get:
P0 = (0,200); // start point P1 = (0,0); /// first control point P2 = (100,0); // second control point P3 = (100,200); // end point
t is continuous over
[0,1], the parametric equations produce an infinitely dense set of coordinates. Those coordinates are what define the curve.
The following animation, depicting the path
M0 200C100 50 400 300 500 200, demonstrates which
x,y (the coordinates of the black dot) result from which value of