Roblox Studio Intro to Bezier Curves w/ Visuals!

hey guys in this video i'm going to be talking about lurping and quadratic bezier curves i'm going to be working my way up from just normal linear interpolation and then i'm going to be talking about quadratic bezier curves and then i'll finally finish off with cubic bezier curves and how they're used alrighty let's just jump straight into the tutorial so i'm just going to be talking about again bezier curves so the first thing i actually do want to talk about is just lurping so what is lurping exactly lerping is the process of an object or just a value going in between two points at like a constant speed i'll kind of show you it's called uh linear interpolation so i'm going to represent all these visually because i'm personally i'm more of a visual learner and i'm sure a lot of you guys are too so what i'm going to do is i'm going to have two midpoints so i'm just going to rename this to start and then actually i'm going to make this a red color just so you could differentiate all the different colors so i'm going to have a start and finish part and then i'm going to actually make one more part and this is actually going to be green this is going to be the object that is traveling in between these two parts it's kind of similar to tweening in a way but i'm actually not going to be using tween service i'm going to be doing this through a script so first thing i want to talk about is that there's a little lerping formula so i'm going to write that out real quick it's nothing too terrible it's pretty intuitive once you understand it a little bit more so what i'm going to do is i have an a value a b value and a time value so the a value is going to be the start position and the b value is going to be the ending position that's all you need to know so what i'm going to do is i'm going to take a which is the starting position right here i am going to add the difference between b and a and remember these are going to be vector values these will be vector 3's so i'm taking the difference between two vectors at a certain point and i'm going to multiply that by t and t is the time value so for example if t was 0.5 this part will be exactly in between if t was 0.9 it will be up here and i'm about to show you how i could use this so what i'm going to do is i am going to just grab a few of these values from the workspace so workspace find first child start and finish finish equals workspace find first child finish i'm going to zoom in a bit so you can see this a bit better i want to start doing that more of my videos okay so now that we have the start and finish i'm actually going to take the position of both of these and then the best way to represent this is through a for loop so i'm going to do 4 i equals 0 comma 10 and it's going to increment by one if you don't quite understand for loops i recommend finding a video on that because these are really important in coding so what i'm going to do is i'm going to take find a time value and the time value it's represented as a percentage so instead of using one two three four five as i'm grabbing i i'm gonna say local t equals i divided by ten so this will give me percentage within like zero and 100 almost so if i equals one t will return ten percent so that's how i'm going to use my time value and you'll see that here in a second so now what i want to do is i am just going to grab a i'm just going to alert a value so lerp i have my function right here actually i'm going to set them i'm going to set this value to the lerp so i actually need to rename this quick i'm going to rename this travel because it's going to be the moving part so let me just get that real quick so i'm going to do travel.position equals alerp and then i'm going to again identify the starting and finish positions start comma finish and finally the time value so again it's just going to go and return me this value at a certain time i'm gonna have it waiting point one in between each iteration of the for loop so now watch what happens ready if i just run the game this is very basic this is the most basic form of a lerp or of uh that one you're very fast so let me redo that this is the most basic form it's just intro bezier curves so this is what am lerp looks one two three four five six seven eight nine ten and whenever i said the value i'm just kind of naming off i so again if the value is 10 i'm dividing 10 by 10 that's 1. 9 divided by 10 is 0.9 so that's the percentage of the weight there so that's just a lerping that's kind of like some sort of prerequisite knowledge just for bezier curves so we can actually use this function to create quadratic and cubic bezier curves so you might be asking what do you actually use bezier curves for well it's actually used a ton in computer graphics and generating curves because you see we don't always just use straight lines for everything we do so if you ever use photoshop or photoshop or adobe illustrator the pen tool that's bezier curves so they have anchor points you can move those around they're very important pretty much everything you do so if you're gonna you know be games developer i look into this so what i'm going to do is i'm going to start by creating a quadratic bezier curve so quadratic this is where it gets a little bit more like it looks confusing but i'll explain it and i'll help you visualize it so what i'm going to do is i'm going to duplicate this red part and this is an in-between part you could think of this like an anchor point so i'm just going to name this p1 p1 is just again it's the in between point so now what i'm going to have it do is i'm going to have a point lerping in between these two points and i'm also going to have a point lurking in between these two points and i'm also going to have one more lerp which is going to be going along those two lerps you'll see what i mean in a second it's it's a little much too graspier to grasp the concept immediately but you'll see what i'm talking about so what i'm going to do is i am going to write another for loop let me comment this out i'm going to write another for loop and this is going to be my um quadratic bezier curve by the way beams in roblox they use cubic bezier curves so cubic is like you want to be able to use that or you want to be able to at least try to understand it so what i'm going to do is say i actually need to um so i have p1 let me quickly get that position equals workspace find for child p1 dot position so now that i have p1 i can start off by doing a few lerps so l1 just stands for lerp1 like i said lerp1 is just an imaginary number going in between these two points so that's what lerp1 is going to do so again you can try to guess i'm going to have start and p1 as my first verb start comma p1 so there's my first slurp and my second lerp is going to be between these two values for these two objects so i'm going to do l2 equals lerp and then p1 again p1 is this point and then finish so now i have an l1 and l2 and finally all i need to do now is make the quadratic bezier curve so that is going to be a lerp in between those two lerps so it's actually going to move on a curve now and i keep forgetting to put t here let me do that real quick t please remember these all are going to be traveling along a time like the times the parameter the only thing we have to do now is p1 dot actually no not p1 travel dot position equals and then quad so now you can probably see what this or imagine what this is kind of going to do oh where'd my point go that's kind of funky one second it's probably yeah it's because i didn't put a weight here it just went right into the last object and sometimes it doesn't always show there we go so as you can see it doesn't quite hit any of these points there's two points of lurping in between here and what this point is doing it's just moving along those two loops so i'm actually going to start off by helping you visualize even more what it's doing because again it's very i'm trying to help you grasp it visually rather than me just talking it through so i'm going to name point i one this is going to stand for just enter like it's just an in-between point it's going to show the um actually i'm going to name it l1 for loop one and then this one is going to be l2 so i'm just going to help you visualize it visualize this by showing the other two lerps and i'm going to actually give these two am a trail so you know i showed in the intro a trail will just help you um be able to see the path it's going on easier so we got two points i'm going to move this here this here and then add a trail trail needs two attachments so there we go so now when i move this we got a little trail perfect i'm always gonna have it face camera because why not wherever that property is i'm just not seeing it i think there is a property oh it's because i have the object selected of course face camera there we go so i'm just going to do the same thing for um for this point l1 let me just duplicate this so i don't have to go through the whole process again all right so now i have two lerp objects which will go along the path of the lerp equals workspace find for child l1 oops and local l2 equals workspace find for child l2 so now all i have to do is set these points position to um l1 actually that's bad i don't i don't want to name these the same thing lerp1 object lerp2 object okay lerp1 equals l1 oh well sorry they're one dot position because these are still objects in the game keep that in mind equals l2 so now when you run the game you're gonna see a little bit more visually of what's going on see that oh i need to set the lifetime longer on the paths uh that's my bad sorry guys so the lifetime is very short so um lifetime let's make this just 20 seconds just an arbitrarily large number because why not and what i'm actually going to do is i'm going to make more segments more intervals so it's smoother and i'm going to make this 0.01 so now it's going to be moving a lot smoother than it was before there you go you see that start to finish they all finish at the same time just two points alerting in between so that's the cubic okay not cubic sorry quadratic bezier curve and i'm actually just going to make a green path for this one this object so let me just get this so i'm going to use my change my travel object real quick i have another one here that just has a trail to it so there we go now um you can see let me run it one more time just for you guys so you can see the um the path that's going on as you can see it's a nice little curve it's like if you've ever seen a quadratic function in algebra like x squared plus five x plus six or whatever it's like a parabola almost kind of similar to that so what we're going to be doing now is making a cubic bezier curve so similar in algebra if you've ever seen a cubic bezier curve it's kind of like not sorry just a cubic function it's very um very curvy you'll see in a second so what i'm going to do is make yet another point and i'm going to name this point p2 so we're going to have even more lerps guys very exciting right so literally bezier curves are just revolved around ellerbs keep that in mind so here's p2 and like i've done with the other points just gonna initialize it up here there we go so we got p2 now so oops this is a very important bezier curve to know because this is what beams use so depending on the path you want an object to travel you want to know how to do this so what i'm going to do is i'm just going to copy and paste this i'm just going to name this quadratic and comment it out for now so now what i want to do is define another lerp so local l3 and then i'm going to make that equal to lerp of these two points so i am i'm actually gonna have to change these up a little bit so let me just quickly delete these insides just so i could kind of visualize it myself a little so we want to go between this point and this point so that's going to be the first lerp which is p1 on time and then we want to go between this point into this point p1 and p2 and then again the time value and then finally p2 and the finish so this point into this point so now we have three lerps and a third lerp means we add another one of these just to help you visualize what the paths look like so local lerp3 equals workspace l3 there we go so now i could do this lerp3 dot position equals l3 so i have these three objects moving along the position of each slurp and now this is a new another new thing so the first slurp i'm actually going to have two lerps going along these lerps it gets kind of confusing so just try to imagine it don't try to memorize it memorizing it won't get you anywhere so i'm going to have this start loop going from l1 to l2 so it's going to be moving on a curve between l1 and l2 and remember their point and lerp2 they go from start all the way to p2 so it kind of ends back here and again you'll see what i mean here and local finish equals the lerp and then l2 comma l3 time and then finally all we need to do is create the cubic lerp so we got start finish and time make this cubic so let me show you what it looks like first because it is very interesting so let's see i got a little error that's the first sub on nil okay so i gave it must have given it a no value at some point probably right here because i forgot to put in the time parameter like i usually do for some reason so look at that three lerps going and there's actually one more lyric i want to show you so i'm going to because i added two whole new lerps in oops now i got two purple objects these are going to be like the you know like the in-between lerps of the lerps the lerps of the lerps why not okay so what i'm going to do is say um get these yep i have to get more values spin one equals workspace find first child spin one s fin two equals workspace find for child s fin two and then i could just do s fin two dot position equal start and s fin two dot position sorry spin one equals start and then this will equal finish so now you're gonna see every single lerp that's going on here we go guys moment of truth lots of lurps be ready oh my gosh look at that so as you can see this white object just has a linear interpolation going just a single one the purple point that has a quadratic linear interpolation going on so there's two quadratic linear interpolations going on and then the cubic that is lurping amongst the two quadratics so i'm just going to tell you this quadratic quadratic and then this is a lerp this is also a lerp and this is a lerp and finally we got our cubic so just to get a cubic we need three lerps two quadratics and one cubic let me run that back one more time for you guys so just look at it try to understand so keep in mind quadratic is only going to go amongst three points there's the quadratic and there's a cubic the green line is a cubic so those are uh those are bezier curves guys that's a very intro to busy curves i just gave you there's so much you can use bezier curves for for example i was able to make a like a bow and arrow for example like if you want to map the trajectory of the arrow you would need bezier curves for that you'd use a beam object to do that so just try to like visualize it don't try to memorize it okay so i hope that this helped clarify some things with bezier curves if you guys liked this video you know just please drop a like i'd appreciate it it always takes time and a lot of motivation to get these videos out especially with like school going on and it has been a little while since i've um you know since i've posted because i've been very busy but thanks so much for watching guys i hope you all have a great day

Channel: Joel__

Views: 24,248

Keywords:

Id: J8cTMyhb7Yw

Length: 21min 27sec (1287 seconds)

Published: Sun Oct 24 2021