# Visualizing Bézier Curves

#### Apr. 28th, 2019

**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:

- Find the lerp point using t on the line between p0 and p1 (red line).
- Find the lerp point using t on the line between p1 and p2 (blue line).
- 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!

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:

- A lerp using t between two points p0 and p1 can be represented as: (1 - t)*p0 + t*p1
- 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 - 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 - 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