Skip to main content
Loading Explore guides…
Bézier Curves and Splines · Acedra
Home
Explore
Computer Science
Bézier Curves and Splines
Sign in to save
Chat
If YouTube asks you to sign in, open the video on YouTube.
Watch on YouTube
Reload player
Transcript
97 segments
Copy
Hide video
0:00
Before I knew about bézier curves and splines my idea of a curve was very basic It was either the classic y=x²-1
0:08
or a circular arc
0:11
But curves that could move in all directions that could do loops and all sorts of things, were still a mystery to me But once you start unraveling the construction of these curves the idea of chaining them together to form splines, come naturally They let you define a path in a way that is computationally very elegant Properties like the tangent and normal directions of the curve let you orient objects or construct a coordinate space around each point
0:36
which is very useful for generating procedural geometry
0:40
You can analyze these curves based on their radius of curvature find what direction they're turning and at what rate You can analytically evaluate their bounding box which is useful in a lot of optimization problems, such as when doing intersection tests
0:55
We're going to take a look at how to calculate some of these things and how they collectively make up what I consider to be The Beauty of Bézier Curves
1:07
Bézier curves, and more generally, splines, are ubiquitous in games You'd be hard-pressed to find any animations such as this camera moving along a path that are *not* based on splines These types of paths are everywhere, not just for animations but also 3D models generated along a path such as this rollercoaster track that you can manipulate by bending twisting and extending it
1:33
I also use them in my own game Flowstorm to create the smooth curved track you slide on
1:39
The level editor explicitly allows you to create connected curves in a spline and lets you control bezier curve handles which, might look familiar to those of you who have used the pen tool in Photoshop
1:52
So how do you create bezier curves?
1:56
Let's say you have two points: P0 and P1 connected by a line segment
2:02
Now imagine a third point P between these two points The position of P could be described by what is called a t-value a value between 0 to 1, similar to a percentage where t-values at 1 moves it to P1 and t-values at 0 moves it to P0 and any values in between are a blend between the two This function is called linear interpolation or lerp for short Mathematically, you can write it as (1-t)P0*tP1
2:33
Now, what if we add another point?
2:36
We now have two interpolated points one on each line segment "lerping" on their respective line based on the same t-value we saw earlier We can then connect these two points with another line segment If we then add a point on that line that also lerps based on the same t-value you can see that it follows a very specific path This path is a quadratic bézier curve
3:06
but we don't have to stop here what if we add another point? we repeat the same process add three points connect them add two points connect those and add the last point
3:20
and this point will now follow the path of the cubic bézier curve
3:25
what's beautiful about this construction is that it works no matter what points we use We can change the shape to anything and following the same rules it will give us this smooth path
3:38
We're going to focus mostly on the cubic bézier curve for the rest of this video since it's the most common one
3:57
This particular method of getting a point in a bézier curve based on nested lerps where each point along the way is calculated from lerps from the points that came before it eventually forming the path of the bézier curve is called De Casteljau's Algorithm I personally love it because of its numerical stability and just how easy it is to remember it's just lerps all the way down But there is another way we can interpret this
4:25
Let's start by writing out the math for all of our lerps
4:33
then, let's expand this formula entirely
4:37
let's also color code the points for readability
4:40
What you might be able to see is that we can rearrange this formula in terms of each point
4:51
First, each point can be visualized as a vector from the origin
5:00
But this is where it gets interesting Each of them are multiplied by four polynomials based on our t-value This is what they look like for all cubic bézier curves
5:12
You might be able to tell that the values are sort of trading off with each other as weights as we change t in the beginning, the first weight is 1 but as the t-value increases the values shift across the points until the last weight has a value of 1 This is called a weighted sum where each of these weights together add up to 1 at any given t value
5:40
Let's apply these weights to the vectors of the points As you can see, they trade off weights exactly the same way
5:48
so let's add them together
5:54
What we get is exactly the same behavior as with the lerps but using a different interpretation of the same math This follows the very same bézier curve we got with the lerps
6:14
This is called the Bernstein Polynomial Form of bézier curves
6:18
Now that we've factored out the points in the formula we've isolated these polynomials Since the points are considered constants we can easily calculate the derivative of these functions but what does it actually represent? The derivative is the rate of change or velocity vector at the given t-value in the curve
6:41
and for clarity let's just absolutely demolish the middle line it's getting in the way, and quite often it's not displayed whenever you see splines anyway Something I think is really fascinating with the derivative is that the derivative of the cubic bézier curve is, in and of itself a quadratic bézier curve This relationship holds for all bézier curves The derivative of a bézier curve is always another bézier curve of one degree lower
7:11
You can see how the derivative changes as we change the shape of the curve
7:29
So why is it useful? The derivative is tangent to the curve which means that if we normalize it we can not only get the tangent direction but also the normal direction of the curve by simply rotating it 90°
7:43
As soon as we have the tangent and normal directions we can start getting local coordinates that are offset from the curve This is the key to getting offset points that we can use to generate things such as roads in 3d
8:01
But what happens if we derive it again? The first derivative can be considered the velocity of the points so if we extend this idea to the second derivative that would be the acceleration of the point in other words the rate of change of velocity As I mentioned before, the velocity can be visualized as a quadratic bézier curve Similarly, the acceleration can be visualized as a linear bézier curve which is simply a line segment or we could just call it a lerp But we can go one step further
8:31
The third derivative is called jerk or jolt and represents the rate of change of acceleration For the cubic bézier curve, jolt is simply a point In other words it's a two-dimensional constant
8:46
If we animate t from zero to one you can perhaps see how they are all pulling on each other as they move through the curve
9:03
So why am I talking about all of these derivatives? Well, using the velocity and acceleration... (not this jerk let's remove it) ...we can calculate a fascinating property called curvature Curvature can be expressed with a surprisingly simple formula not just for bézier curves but for any parametric curves like this
9:25
We take the determinant between the velocity and the acceleration divided by the speed cubed This gives us curvature usually denoted with a κ (kappa) symbol Curvature roughly represents how bent the curve is at any given point If the curvature is 0, the curve is flat The further away the curvature is from 0, the more tightly bent it is Now, the unit this is expressed in is perhaps a little confusing I like interpreting it as radians per meter,
9:56
but you can also interpret curvature as reciprocal radius That is, the reciprocal of the radius of a circle with the same curvature
10:06
This means we can calculate the radius of what's called the osculating circle
10:14
As you can see, the osculating circle's curvature matches that of the curve
10:27
Let's look at a more interesting example
10:31
Here, the curvature starts out being negative marked blue in cyan before switching over to being positive marked red and yellow The point where the curvature changes sign as in, passes through zero, is called an inflection point at that point, the osculating circle is undefined since we can't divide by zero and there is no radius that would give us a straight line
10:56
That's how you calculate the curvature of a cubic bézier curve
11:04
A perhaps unexpected use of the derivative is to calculate the bounding box of the curve
11:10
Bounding boxes are used extensively in game development to optimize culling and intersection testing with, say, an infinite line, we can first check if the line intersects its bounding box before doing the more expensive curve intersection test So how do we get this box? The naïve solution is to simply use the control points of the bézier curve This can be good enough, but what we really want is the tight bounding box In some cases, the difference between the two is huge
11:41
If you look at the bounding box you can see that it's touching three points on the curve these are the points we want to find The first step to give us some insight is to split the curve into its two component functions, for x and y separately What we find is that the local minima and maxima coincide with the points we marked on the curve
12:03
If we then change the shape of the curve so that the left point is no longer part of the bounds the local minima also disappears from the left x position graph and so these local extrema they exist where the derivatives change sign So if we instead look at the derivatives their roots are the t-values where we have the points we're interested in
12:26
Note that not all points are part of the bounding box they are simply potential points that we should include in our bounds because they are local extrema So if we look at the formula for the derivative it's currently expressed in terms of our points but we can rearrange it to be in terms of t
12:43
after that, we can easily plug these terms into the familiar quadratic formula in order for us to find the roots of our derivatives this gives us four potential t-values: two from X and two from Y Note that some of these values should be discarded either because they're outside the 0-1 range we're interested in or the value inside the square root is negative (those t-values aren't real, ignore them)
13:12
We can also look at the derivative in 2D With this interpretation, the roots are the t-values at which the quadratic derivative curve crosses the X and Y axes
13:26
And again, you can see how the derivative changes as we change the shape of the curve
13:48
And that's how you analytically get the bounding box of a cubic bézier curve
14:03
So far throughout this video, we've been working with t-values a simple value from 0 to 1 representing where the point is along the curve
14:13
but how far has it actually moved? And for that matter how long is this curve? What is the arc length of this curve? Unfortunately, this is where bézier curves are less beautiful because there is no closed form solution to the length of a cubic bézier curve This integral is an elliptic integral, in other words sadness and despair so we have to approximate it one way of doing that, is to subdivide the curve into line segments and then sum the length of each individual line segment
14:46
The more segments we add the more accurate our measurement will be Though of course, it will also be more expensive to calculate the more samples we have
14:56
Mathematically, I think you can express it like this I'm not sure why I added this formula here because this is less descriptive but for fans of math notation there you go So now that we have the arc length of the curve, instead of using a t-value, what if we instead want to get the point at a specific distance along the curve?
15:20
Well we have the full arc length we can simply divide our distance value by the arc length and we'll get our t-value, which we can then evaluate as usual
15:38
So we can simply place dots on our curves and animate them by distance right? Well, unfortunately, this is where things get even more ugly If we change our control points, our dots are not equally spaced anymore Clearly, our distance values don't correctly translate into t-values and the dots move at different speeds at different points in the curve The reason for that is that, equally spaced t values are not equally spaced by distance in bézier curves
16:09
they just so happen to be very equal in this particular curve But why? One way to analyze this is, again, using the derivative The derivative can be interpreted as the velocity of the points If our points moved at different speeds along the curve, it means the magnitude of the derivative is not constant
16:30
In this particular case, you can see the derivative lies within a circle which means the speed is almost constant across the entire curve
16:38
but use any other curve, and you can see that it's no longer circular at all
16:44
Now the speed changes across the curve and our dots no longer have equal spacing
16:55
Pushing it to the extreme, the differences in point spacing will become very apparent
17:09
So how do we solve this? Since there is no closed form solution for the arc length we'll have to again approximate it
17:19
One way of doing this is to subdivide the curve and generate what's called a lookup table
17:25
in this table, we can save the arc length or distance along the curve to each t value we sample in the table as usual, the more samples we have the more accurate it will be but in turn it would also be more expensive to compute
17:43
What this allows us to do, is to input our distance value and from there we can relatively easily find what t-value it would have had based on the neighboring distance samples
17:59
What we're doing here, is effectively an approximation of finding the root of what would have been a pretty complicated polynomial After we get the t-value from this lookup table we can evaluate the curve as usual
18:13
For reference, this is what my code looks like to do this very thing It's basically a list of distance values and it returns the normalized position within that list, as in, a value from 0 to 1
18:31
So what we had before were equally spaced t-values But what we actually want is equally spaced distance values Now if we bring back our dots as we change from equally spaced t values to equally spaced distances they reach a much more uniform spacing and our animation has a nice uniform speed across the curve Approximating it like this is a little messy, but it's unfortunately what we're left with as cubic béziers just don't have a closed form solution but it's usually good enough in practice
19:07
what we just did was an approximate solution to what is called Arc Length Parameterization
19:13
as you can see, bézier curves are sometimes a little messy but with the simplicity of their construction and the flexibility of their uses I think they're beautiful, despite their flaws~ I don't have to know the exact arc length you know we can approximate that, it's okay I can still animate a camera along a path and make it fly through some fancy scenery, just like in my favorite games I even used 3D bézier curves in RGB color space
19:42
when I wanted to blend the point colors of the curve back in the polynomial section
19:47
Of course, bézier curves are not the only ones out there There's a whole cinematic universe of splines But for now, that's it from me Thanks for watching 💗
20:05
okay that was probably the the longest video project I've ever worked on and I guess it's kind of the first time I jump into this type of thing I just want to say thank you so much for supporting me on Patreon for all of you scrolling by, it's absolutely insane that I can like
20:25
see 3Blue1Brown be like, hey wouldn't it be neat if people made math videos? And then I can just dedicate like a month to doing that and that's exactly what I did and it's just amazing that I'm able to do that, because of all of you! So thank you all so much for supporting me it means the world to me so thank you all so much
20:49
I would also like to thank Jazz Mickle for making the music in this video Jazz makes like really cool music in general and you should check out her stuff I'm gonna link it in the description along with everyone else!
21:01
Big thanks to 3Blue1Brown or Grant Sanderson for pushing me to actually do this I've been wanting to make videos like math videos for a long time but it's mostly been like gifs on twitter but never like a full full video like this
21:18
It's been an interesting experience and it's been fun! I might do more videos like this, if all of you like this style of video and if you want to see more of it, I can probably do that! I just need to find ideas that I want to make videos on topics that might be interesting Obviously, we can go super deep into splines, talk about B-splines we didn't actually talk much about splines we mostly talked about bézier curves
21:50
but yeah so there's a lot that we could go into, so if you're interested in seeing that kind of stuff let me know because I genuinely have no idea what my audience wants my youtube is like improvisational game dev stuff and our D&D campaign and some old game projects and like it's very difficult to know what kind of audience I have so
22:14
input is super appreciated! Just let me know in the comments
22:19
So for those of you curious, the way that I made this video- I streamed a lot of it on twitch, so if you you're curious, the VODs, they're going to be up for another, I don't know 30 days? It's created in Unity, I did most of the animations and, actually all of the animations that are not like footage from other things, are created in Unity I made this sort of like custom timeline tool that helped me like arrange procedural animation one after the other
22:50
and then most of it is just code driven animation
22:56
I use my own math library called Mathfs, which is just useful for bézier curves and other like range remapping things that I might use
23:05
I also have my own frame recorder that exports a .png sequence and then I edited the rest of the video in DaVinci Resolve so basically I just exported out a long series of screenshots and then I just edit the video from there
23:22
All of the vector graphics is done using my own plugin for unity called Shapes it's a vector graphics plugin, and it was sort of made specifically for these types of things except it's also like made for you know real-time applications and games and not just you know, offline rendering
23:41
but yeah that's how the video was made Thank you so much for watching I hope you like this and I hope it was interesting or otherwise educational Thank you all so much
23:53
bye~ 💖
23:58
[freya]
24:01
[hey]
24:03
[mom]
24:05
[pls] Boy [;-;] Hey [bed pls] I'm gonna go to bed don't worry [now!!] <unintelligible> [im tired]
24:19
[stop this]
24:22
[pls sleep] thor wants me to go to bed
Here to help you learn
Sign in to keep a private conversation with your course tutor.
Ask me anything about the material…
Sign in to chat