B1 Intermediate 9 Folder Collection
After playing the video, you can click or select the word to look it up in the dictionary.
Report Subtitle Errors
hello This week, we're going to start taking a look at spines and how you is a coder commutes them to enrich your applications and games in shorts, blinds or a way of algorithmic Lee representing a curve.
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.
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.
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.
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.
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.
Let's just take a minute to look at an interesting property of this here.
I've laid out the points in what appears to be a loop, and in fact, if I take the two end points, which in this case will be one and eight and overlap them, that would actually make a loop.
But it's a loop with a bit of a kink in it around the 0.8, but I can get rid of that by using the two original endpoints and overlapping those with the two neighboring points, which gives us a nice, perfectly curved loop.
And so if we wanted us blinds to be loops, we could just manipulate the indices when we're trying to calculate are supplying point and therefore we know that our loop goes through all the control points.
If we want our supplying to be looped, we have to treat it differently.
So I'm going to modify us blind point function.
If it's not loops, we just do what we did before, which will give us a curvy path but the ends wrong joint.
But it really is loops.
We can take our T variable, calculate the indices in a similar way to before, but this time wrap the indices around all of the points in the vector.
So let's say I'm approaching the point towards the end of the vector.
I can use the module list function to wrap it around to the start.
And likewise, if I go be below zero, I can't use the module is function for that.
But I can do a little trickery here to give me the point of the other side of the vector.
We should also modify our drawing function now to go through all of the points, but we must tell us mine function that it is loops.
Now let's take a look.
Well, it looks like a straight line again.
But as I start to move the points around, we can see there certainly joined.
Now we have a facility where we could control in a I character.
Let's say, for example, a spaceship to follow a path around space, and it will look very natural.
It won't have to move at right angles or turn it.
Fixed intervals on the path can be modified in real time, So with a simple bit of mathematics, we can generate a very natural looking behavior.
But what if we wanted our spaceship to follow the path precisely?
For example, in this instance, our spaceship is only getting an X and Y coordinate will always point in the same direction, regardless of where it's up to on the path.
Instead, what we would for is that the spaceship carry on, pointing in the direction of the path, depending on where it is, and we can do this by extracting the Grady int at any point.
A crude way of getting the Grady into the point would be to take its to control points and create a straight line between them.
And that would give us an approximate Grady Int.
Maybe, But a better way is to modify our spine equations to give us a precise, radiant in a similar way that we calculate the position.
Unfortunately, this is very simple indeed.
You remember before we were calculating our cue values, which were the influential field.
So we have something like minus T cubed plus two t squirt, take one.
All we need to do is to differentiate this equation which becomes minus the T squared Plus for tea, take one.
And we can do that for all of our equations.
So I'm going to take our entire point function here and duplicate it.
I'm going to call this one gets plying Grady int and everything else can remain the same.
But I'm going to change these equations.
I just couldn't face the others in There we go.
So let's hack something in to demonstrate that we can extract the radiance.
The agents location is going to be represented by a variable called F marker.
So we need to have some keys so we can increments and decadent this variable.
I'm going to use the es and S keys to change it.
But I want to make sure that I keep control of this variable.
So I'm also going to put some boundary checks in.
So if the marker value goes larger than the number of points in the path, then it wraps around like we did before with these at the next keys, I'm going to draw on our path.
Worthy agent currently stands toe.
To do that, I'm going to get the point on the path.
This assumes we're looping at the moment.
I'm going to get a point on the path where the marker location is, and I'm also going to call.
I'll get Grady in function for the same point to draw the agents.
I'm going to draw a line which I'm hoping is going to be orthogonal to the path at all points.
So let's have a look at this.
The first thing I do is calculate the angle of the gray didn't returned by the gets by ingredient function, so this will return an X y vector.
But I'm going to convert it to radiance, and I'm going to use the drawer line function which is provided by the game engine to calculate two points that are rotated around P one, which is where our agent is on the path by the angle represented by the Grady int.
I'm going to offset these by five pixels.
So I'm going from one point here, which, you can see is Ah, plus five to a minus five.
And this will hopefully give me two points either side of the path.
I'm going to draw this blue.
Let's not also forget that we're working in loot mode here, so let's take a look.
Well, I can see the agent is definitely orthogonal to the path.
Let's make our path a little bit more interesting.
It's always very satisfying watching the curves sort of unfold themselves, and we can see the agent starting to rotate, depending on the orientation of the path.
So if I used the N s keys, we can see the agent follows the path now because I'm incriminating its position along the curve and it wraps around very nice.
So this video showing you how to create a path and split between all the control points, and I think it's quite useful for things like non player character A I or animations.
But there is still a few things to work out, So as I move my agent around, we can see its speed varies.
And this is because it assumes that the distance between all of the points is the same.
Zero toe one will come up with a solution for this in part two of the spines video.
All of the code for this video is available on Get up.
If you've enjoyed it, please give me a big thumbs up.
Ever think about subscribing and I'll definitely see you next time and I'll definitely see if a part two of this video so take care.
    You must  Log in  to get the function.
Tip: Click on the article or the word in the subtitle to get translation quickly!


Programming & Using Splines - Part#1

9 Folder Collection
林宜悉 published on March 28, 2020
More Recommended Videos
  1. 1. Search word

    Select word on the caption to look it up in the dictionary!

  2. 2. Repeat single sentence

    Repeat the same sentence to enhance listening ability

  3. 3. Shortcut


  4. 4. Close caption

    Close the English caption

  5. 5. Embed

    Embed the video to your blog

  6. 6. Unfold

    Hide right panel

  1. Listening Quiz

    Listening Quiz!

  1. Click to open your notebook

  1. UrbanDictionary 俚語字典整合查詢。一般字典查詢不到你滿意的解譯,不妨使用「俚語字典」,或許會讓你有滿意的答案喔