Visualizing Bézier Curves

What Is This?
A demo showing how to visualize the math behind Bézier curves, as described in this awesome GDC talk by Squirrel Eiserloh: Math for Game Developers: Curves Revisited. Bézier curves can be thought of as just a series of lerps! Check it out:

Let's say you want to find a point on the curve at some value t (0.0 - 1.0 where 0.0 = 0% through the curve, 1.0 = 100% through the curve). Here's how you would do that for a quadratic Bézier:

1. Find the lerp point using t on the line between p0 and p1 (red line).
2. Find the lerp point using t on the line between p1 and p2 (blue line).
3. Find the lerp point using t on the line between the two points we calculated in steps 1 and 2 (yellow line). That's the point on the curve at t!

Pretty neat, huh?! For me, this makes it very simple and easy to visualize!

You can also simplify the lerps to get the standard equation: (1 - t)^2*p0 + 2(1 - t)*t*p1 + t^2*p2. Here's how:

1. A lerp using t between two points p0 and p1 can be represented as: (1 - t)*p0 + t*p1
2. Plug that in for steps 1 and 2 above (we'll call these points p3 and p4):
   
   p3 = (1 - t)*p0 + t*p1
   p4 = (1 - t)*p1 + t*p2


3. To find the point on the curve we need to lerp between p3 and p4 (step 3 above - we'll call this p5):
   
   p5 = (1 - t)*p3 + t*p4


4. Now, let's plug in the values of p3 and p4 and simplify:
   
   p5 = (1 - t)*((1 - t)*p0 + t*p1) + t*((1 - t)*p1 + t*p2)
   p5 = (1 - t)*(1 - t)*p0 + (1 - t)*t*p1 + t*(1 - t)*p1 + t*t*p2
   p5 = (1 - t)^2*p0 + 2*(1 - t)*t*p1 + t^2*p2

(The same logic applied here can also be used for cubic Bézier curves... just with one extra layer of lerps)

Easing?
You can also create easing functions by playing with the control points! Try this with a cubic Bézier: Move the control points to the end points (p0=p1 and p2=p3). Or try reversing that (p0=p2 and p1=p3).

How Long Did It Take?
A couple of days.

How Many Lines of Code?
270