And even though you might not think you need curves in your application, you'll be surprised just how useful that can be.

For example, if you're making a game, why do your game objects need to move in straight lines?

They could look a lot more fluid and natural if they follow a curvature.

What if your interpolated between two points again, don't use a straight line use exploring.

You've probably already encountered spines and don't really realize it.

So here in humble paint, this is a splint on.

We can position the curvature, and you probably experienced the frustration of trying to curve it just how you want it.

It always seems to have a mind of its own.

We see from the paint example that will have to control points on the 3rd 1 which is used as an indication of where the curvature should tend towards.

And if we were trying to represent a longer path using more points in this fashion, we have to pretty much guess where those control points need to bay will also face issues about what happens when you try to join to SP lines.

If we have a look at the Wikipedia article, crisp lines will see that it's actually quite mathematical, and this could make it inaccessible for the one lone code is out there who just want to get some curvature into their application.

That said, the mass behind these things is quite fantastic, and we'll be looking at some of it.

When it comes to programming, we rarely like guesswork.

So deciding where to put these control points is not ideal, so will not use that type of supplying.

Instead, the type of spine I'm going to be explaining in this video can use multiple control points on the path is guaranteed to go through all of them.

And to use this, I'm going to use a type of flying called a capital Rome spine.

And an interesting fact here is the Mr Catmull in the cattle Roam.

Here is one of the founders and current president of Pixar.

So this guy knows his stuff when it comes to computer graphics in its most basic form of capital.

Rahm Spine contains four points which have denoted here with the red, blue, orange and green dots.

Justice get is going with some of the notation.

We usually refer to it as P zero p one, B two on PC Camel bombs flying will only generate a curve between P one on P two, and it uses P zero on PCP as a guide toe.

What angle?

The curve should be going through the points P one and peak, too.

To find a point along the spine, we usually use a Value T, which begins at zero for 00.1 and ends at one point, too.

So we're accessing the curve segment in normalize space and the nice thing about cat melodramas Blind is the points can be multi dimensional.

So even though we traditionally would have X and why we could have more dimensions afterwards on, the mathematics doesn't change just scales up.

So I'm going to try and start explaining how splitting works without getting involved with the mathematics just yet.

And I find it useful to think about the points as being the center of influential circles that guide our point t so simply put, as we approach P, too, we're more influenced by P, too.

And we become less influenced by P one because we're further away.

So, of course, if the point lies directly in the middle of P one and p two were equally influenced by both the points and if the point on the curve were interested in happens to lie on one of our control points were 100% influenced by that control point, and nothing comes from the other control point.

So what's appoints P zero p 34 then?

Well, if we just had the points p one MP to influencing the curve, we would get a straight line which you don't need me to tell you isn't a curve.

So in a similar way to the circles of influence from P one and p.

Two p zero on PCP also are influencing a point on the curve, but in a much more mild way.

So whereas we saw P one and P two attract our target points, p zero p fi repel the target point, and we can see in this example that the curve pushes upwards using the Desmond's dot com Graphing calculator.

We can have a look at the maths behind the spine.

Consider the X axis along the bottom to represent our verbal tea normalize space so it goes from zero toe one and remember for our point that was blue, which is a P one.

We want to have a full influence when we're on the point on.

We want to have no influence at all when we're on the other extreme of the curve in this case peak, too.

So in this way, consider the Y axis to be the amount of influence the point has on our point.

T going around the curve segment.

Naturally, then it follows that are orange points, which was P, too, has an opposite looking curve, so it is not influenced a tall by P one.

But as we increase ah t point along the curve segment, it becomes fully influenced by the time it gets 2.2.

Let's consider P zero.

Now this one looks a little strange.

Positive influence in the wind direction is attraction.

I we bend the curve towards the point, so p zero the red point here goes negative, which pushes the point away, as I showed with the arrows before.

And likewise, we have a mirror image curve for P three, the final point.

All of these functions are cubic ce.

So this is a cube.

Explain.

If you've ever tried to use the pen tool in photo shop, you'll know why this is important at each supplying control point.

We can specify a Grady int, but the curve doesn't necessarily go through the points.

This makes this tool incredibly frustrating to use.

But it does highlight one of the limitations of the capital of arms blind that we cannot specify the Grady in through a point.

The Grady in't is always calculated by the position of its neighboring points.

These equations are only valid for one component of our point vector.

So in two D space, we'd have to calculate all of these for X on all of these for why to give us the X Y point on the curve segment.

I think it's time to start putting these into practice.

So I've created a new console project, and I'm going to use our old friend the oil see console game engine so we can visualize the spines as most of my viewers will know by now you'll see counsel game Engine just simply wraps up the console in a way that it repeatedly displays information to the screen, and it also accept some user input on.

We need to override two functions in this class.

The unused create on on user update functions.

I'm going to create a council application that's 160 characters wide by 80 characters.

High on each character in the console is going to be 10 by 10 pixels.

Let's start by creating a structure that represents a to D Point.

So I'm just going to have an ex.

And why Coordinates?

I'm going to create another structure now to represent the spine from the spine is going to consist of a vector of points.

Let's start by getting some of the visual ization out of the way.

In my game engine class, I'm going to need spine object, which I'm going to call path and in the unused create function.

I'm going to populate that path with points.

So these coordinates of consul characters on the screen and they represent the control points in the split.

There's only four of them now.

Let's try to draw these to the screen.

First thing I'm gonna do is clear the screen, which I'm doing by drawing space.

Tow all characters.

Then I want to reiterate through all of the points and draw them.

To do this, I'm going to use the fill function to draw one pixel either side.

What one character, either side of all of the control points it's going to use the solid character is going to call them read.

This will give me a three by three block to represent a control point, and in the middle of that three by three block, I'm going to draw the index of their control point so we can see which one's which.

Let's take a look perfect.

I want to move the control points around the screen, so I'm going to create a variable The represents, a point that's selected for movement.

We'll initialize it.

Zero.

So let's handle a little bit of input from the user.

If the user presses the ex key, I want to increment my selected points variable, but I'm also going to make sure that it doesn't go out of bounds, so if it does, it rotates.

It background to zero again.

I'm going to do the opposite with Zed key, which this time decadence the variable now want to move the selected point around depending on the arrow keys.

So I'm going to check if an arrow keys held down in this case left.

And if it is, I'm going to move these selected points exposition by some value.

In this case, I'm picking 30 because it will be a fast movement on defy.

Modulate that with the elapsed time.

It'll be smooth depending on the performance of the system.

And likewise, I could do the same for the other Iraqis.

I think it's important that we highlight the currently selected control point, so I'm going to use exactly the same code as I've done here, except instead of coloring it in red, I'm going to color it in yellow on dhe.

Obviously, I'm going to use the selected point variable instead of the eye in the loop.

Let's take a look so we can see the zero control point is currently highlighted, and I can use the arrow keys to move it around.

And if I used is that the next keys, I could move any control point that I want.

So how do we draw the curve?

I'm going to create a function called get splitting point, which takes in a value teeth and returns in X Y coordinates.

For now, I'm just gonna hard code that is 00 Drawing spine is a little tricky, and I want to make sure I'm drawing it behind the control points, remember, Were using the curve to generate an X Y position based on a normal ice coordinate.

So we're going to wish you a zero to a one, and it will return in X y for that point on the curve.

So let's create a little four loop, which its rates from 0 to 1, and I'm going to nibble at it in very small steps and we'll see that this is actually one of the downsides of using spines for each value of tea.

I'm going to call our supplying point function, which should return the X y coordinate.

And I'm just going to draw a pixel at that X y coordinate.

But of course, at the moment it'll only draw something at 00 because we need to fill in our gets plying point function.

We've only been given the value of tea, so we need to create some indices based around that value.

T we know.

For example, if t was, say no 0.3, then p one would be the floor of tea, which in this case would be zero from there, we know that pee, too.

His p one plus one.

We know that p three.

It's the one plus two and we know that p zero is p one.

Take one.

So let's do exactly that.

I'm just going to cast to an interview to do our floor equation.

And, of course, because I called these things live immediately noticed a mistake.

It's p 01 two three.

We can now start to implement our equations, so I know that I'm going to be using t squared and t cubed a lot.

So I'm going to cash these.

I'm just going to take the equations exactly as I had them in the decimals graphing calculator to give me four values, which are influential field values.

To calculate the result, we do it one axis of time, so I'm going to look at the X axis first.

We need to take the points that were interested in.

So in this case, the 1st 1 is P zero.

We're only looking at the X coordinates in the moment when we multiply that by our first field of influence, which was the red line, the red point, and then take the next point along and use our second field of influence and so on.

So the four influential fields are multiplied by their respective point locations in the X axis.

I could couldn't paste this to do the Y axis and just change the ex components toe.

Why components instead of returning 00 will return t X t.

Why?

There's one final thing to do.

If we examine these equations, we see that the influence on the Y axis lies between zero and two.

We want this to be between zero and one, so we will have all of the values.

Let's take a look.

Well, that's certainly something on the screen.

Let's see if it's behaving so I'm going to move this control point down.

We can see it does start to repel some of the curve.

Let's move this control points over a little bit.

We'll bring this one round two, so I'll make it look like we had in the diagram before.

However, for some reason, it's a dash line.

Why is this?

Well, that's because we nibble through the zero to the one in a small increment.

And if we're only incriminating in North Point, not five, that means really.

We can only have 20 pixels between the two control points and if they're 40 pixels apart, will skip every other pixel.

So we need to make this smaller.

Let's have a look.

That's better.

That one curve segment on its own isn't very impressive.

So let's have a lot more points.

So here I've added a point every 10 pixels in a straight line.

We've now got more than one curve segment, so we need to adjust our drawing routine accordingly.

Now I take the number of points in our path, and I'm going to use that to calculate my tea.

Note that I'm subtracting of value from them.

I don't want to draw the to control points at the end of the spine.

Take a look.

Mmm.

Something doesn't look quite right here.

Oh, dear.

Let's see why this might be Well, our tea is going to go above one, so we need to modify our get splitting point function to accommodate this.

This is quite simple because we've already got the floor of our tea to give us our first control point.

We just want what's left over.

So our control points will represent 123 and four, and any remainder that comes in is what we're going to use to index into the normalized point of the curve segment.

This looks a little better.

Let's move some points around very nice and so you can see with more control points, we can have quite elaborate curves.