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 or a circular arc 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 which is very useful for
generating procedural geometry 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 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 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 I also use them in my own game Flowstorm to
create the smooth curved track you slide on 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 So how do you create bezier curves? Let's say you have two points: P0 and P1
connected by a line segment 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 Now, what if we add another point? 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 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 and this point will now follow
the path of the cubic bézier curve 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 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 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 Let's start by writing out the math
for all of our lerps then, let's expand this formula entirely let's also color code the points for readability What you might be able to see is that we can rearrange this formula
in terms of each point First, each point can be visualized
as a vector from the origin 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 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 Let's apply these weights
to the vectors of the points As you can see, they trade off
weights exactly the same way so let's add them together 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 This is called
the Bernstein Polynomial Form of bézier curves 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 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 You can see how the derivative changes
as we change the shape of the curve 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° 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 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 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 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 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 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, but you can also interpret
curvature as reciprocal radius That is, the reciprocal of
the radius of a circle with the same curvature This means we can calculate the radius
of what's called the osculating circle As you can see, the osculating circle's curvature
matches that of the curve Let's look at a more interesting example 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 That's how you calculate the
curvature of a cubic bézier curve A perhaps unexpected use of the derivative
is to calculate the bounding box of the curve 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 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 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 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 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) 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 And again, you can see how the derivative changes
as we change the shape of the curve And that's how you analytically get
the bounding box of a cubic bézier curve 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 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 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 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? 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 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 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 In this particular case, you can see
the derivative lies within a circle which means the speed is almost constant
across the entire curve but use any other curve, and you can see
that it's no longer circular at all Now the speed changes across the curve
and our dots no longer have equal spacing Pushing it to the extreme, the differences in point spacing
will become very apparent So how do we solve this? Since there is no closed form
solution for the arc length we'll have to again approximate it One way of doing this is to subdivide the curve
and generate what's called a lookup table 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 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 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 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 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 what we just did was an approximate
solution to what is called Arc Length Parameterization 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 when I wanted to blend the point colors of
the curve back in the polynomial section 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 💗 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 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 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! 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 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 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 input is super appreciated!
Just let me know in the comments 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 and then most of it is just code driven animation 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 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 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 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 bye~ 💖 [freya] [hey] [mom] [pls] Boy [;-;] Hey [bed pls] I'm gonna go to bed don't worry [now!!] <unintelligible> [im tired] [stop this] [pls sleep] thor wants me to go to bed
This is 3B1B-quality. She deserves more followers, and it was an instant subscribe for me.
I love the fact that the animations were all coded by her. This is artistically awesome and technically amazing.
Love Freya.
I think my favorite part of the video is how afterwards she found out that she pronounced osculating incorrectly (as oscillating) and was embarrassed. To me that’s just a sign that she’s self taught, even more respect.
To those who are saying it reminds them of a 3b1b video, part of that is that this video is a response to 3b1b’s challenge to make math explainers. Part of it is her use of her own Unity vector graphics library (Shapes), which is great.
What a nice video!
I usually ignore videos because they are more often than not just some talking head some text presented in a form to maximise ad revenue, but the material in this video would have been very hard to understand without the animations.
Very useful indeed
The clarity and visual presentation are incredible for this video. It reminds me of the 3brown1blue channel.
I will never not recomment https://pomax.github.io/bezierinfo/ when it comes to bezier curves.
The creator is a twitch streamer and they showed the development of this video over a series of streams. Twitch.tv/acegikmo
I'm not a game dev but I highly enjoyed watching a competent person demonstrate the unity tools that went into creating it. Great stuff.
"I don't have to know the exact arc length, you know? We can approximate that, it's okay..."
I worked on an iOS game in the late 2000's - you were controlling a bell diver and had a harpoon you could swipe to shoot at enemies. Unity and the like didn't exist back then so we had to do a lot of things ourselves - for the harpoon chain we displayed a few sprites that represented the chain links, and calculated a bezier curve to know where to place them, fun times!