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 x and y are determined independently, according to a third parameter, dubbed t.
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
where P0 and P3 are the start and end points, and P1 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 P0,P1,P2, and P3.
So, what is t?
t ∈ [0,1]
Simply speaking, 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
Since 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 t.