Smoothstep: The most useful function

hey welcome to the art of code my name is more time and what you see here is a smooth step curve and I know it doesn't look very exciting but it is one of the most important building blocks that you can have in your tool belt to make cool-looking stuff I personally use it all the time for all kinds of different things and I think it's very important that you know how this function works so I thought I'd make a video specifically about this function so you can get a better idea and sewed up if I in future videos I use a smooth step I can just point to this video so that's your not mystified by and how this thing works so I invite you to stick around alright so a smooth step function is used to turn things on or off and usually you do that by multiplying by by dysfunction because where wherever dysfunction is zero that's where it will turn the effect off and wherever this function is one that's where it will turn it on and and so this dis curve starts at zero and then at some threshold it smoothly goes up and then it smoothly goes to one so let's try to make this function ourselves I'm I'm here on a website called desmos that I highly recommend if you're if you want to do anything with math or want to visualize anything or a prototype anything that has to do with functions then this is a great website where you can go and you can just start playing around with stuff I use it all the time so let's let's build this function from scratch so let me just go here and let me just get rid of this and so a smooth step starts starts at zero and it smoothly goes up and then at like when it gets to one it smoothly kind of tapers off at one and so to do that well like one function that smoothly goes from zero up would be just a simple parabola right so you can just I could just do x squared here and then we're only looking at the part from 0 to 1 and so this starts at 0 and it smoothly goes up now the other part where we're at 1 it kind of smoothly go like it kind of tapers also so it's it's a smooth transition to 1 well that's also a parabola because we can we can do this let me just do it like that and I'm start with the normal parabola and then move that parabola one to the right and to do that I just subtract one from it and now turn that parabola around so I can just put a minus there and now shift the parabola up by adding by adding one right so I could do plus one over here but I could also just put that one over here so now I have two functions one like the purple and the black one and actually let me just make those different colors so let's say they're red and the blue one and now if I start if I start this as the red one and then slowly kind of fade towards the blue one then I will have to write and at the right function and to do that what I could do is if I call this a and I call this B then I could just do a linear interpolation between these two functions so I could I could say well you start at a and then x 1 minus X so this is the linear interpolation function plus B times X ok so now if I turn these other ones off then on the interval from 0 to 1 this is exactly what we want so now if you if you fill if you fill in if you fill this all in and you simplify it then you get to something like this where it's x squared and then 3 minus 2x so that is that is that function so we can get rid of the other thing and so now before 0 we want this function to stay at 0 I'm after one we want this function to stay at one all the time and so for that I would have to clamp this x-value but what I'm gonna do is I'm because X is a reserved is a reserved variable here I'm just gonna call it K instead of X and then over here I can click down here and I can I could say K equals x okay so then then there is the same so this is the same but now I can I can clamp this so now I can say for instance I could say well if X is smaller than 0 then it should just use 0 instead and the way to do that she can say well take the maximum value of 0 and X right if we take the maximum value of 0 and X then if if X is smaller than 0 and it's going to return 0 similarly I can clamp it on the other side by saying take the minimum value of 1 and X okay so now I have it clamped and if I turn this off you can see we have exactly the the curve that we want now we want to have full control over when when we turn something on and when we turn something off so we want to have control over where this curve starts and where it ends so let's try to build that so to move this curve left and right we can just take this X and remap it similarly to how I did before how I move the parabola over by doing minus 1 well over here I can also do minus 1 or minus 2 and you see it shifts right so so let's call this minus threshold 1 t1 and then I have to make that and so now I have a t1 in here that I can use to move the first threshold around and also the second one in this case but we're kind of interested in the first one and now but we don't only want to be able to move the first one we also want to move the second one so we have full control over stuff and if I just turn this one back on so if I if I just turn the smooth one off and I turned this straight on basically what we're doing here is we like this segment here this line segment is just this part here right it's the unclamped part and this is just a line and we move that left and right with by just subtracting here in order to move the second the second threshold I would have to make this line go steeper rights deeper or shallower that's how I move the second point and the way to get this line to move steeper if I if I put just some brackets around here I could get it twice as steep for instance by just multiplying this by 2 right so if I multiply by 2 then my line is twice as steep and therefore the second threshold is closer to the first threshold but I'm not going to do it like this what I'm going to do is I'm going to divide it by the second threshold so I'm going to do divide well not like that I'm going to divide by threshold two and now if I create the second threshold if that threshold is is 1 then then it will divide by 1 so it will not change anything but if I if I now move the second threshold then it divides by a smaller and smaller number and therefore this will get larger and larger and therefore the line will get steeper and so now we can move the second part and we can move the first part as well now in GLSL when you create shaders and you use the smooth step function these two thresholds are independent of each other well whereas right now tor not right like if I move the first threshold it moves the second threshold with it so to fix that we're just going to compensate for that by by here we're just going to subtract the first threshold so minus t1 so now if my t1 is 0 then it's subtract it's 0 so it doesn't really change anything but now if I move this around the second threshold stays where it is and so this is what the smooth step function how to smooth step function behaves in GLSL so I could turn this off and turn the actual smooth part on and so now you can see we have a function that we can use to or we can we can we have exact control over where it is one and where it is zero and also similar to how to sum the step function works in GLSL if you turn the thresholds around if the second threshold is smaller than the first threshold then watch what happens so now it goes from low to high right it goes from zero to one but if I move this around then it goes from one to zero and that is exactly how the smooth step function behaves inside of GLSL and so you might think okay that's great but how do I use this well let's say for instance you had another function let's say whatever the sine of x times five maybe or let's make it even more times ten and and I don't know this could be whatever waves ocean waves and you want the ocean waves to attenuate when they get to the beach and they get smaller well now I could just multiply these these two functions together because because this smooth step function here goes from zero to one if you multiply something by zero it's it the result will be zero and if you multiply it by one the result will be the original the original function right so we can just multiply that together so let me um let's see here so this is the this is dysfunction let me call this function s so I just go S equals and now if if I if I turn this one back on I can just multiply this by s to control where where that function where the function is canceled out right so so now I have full control over where where this happens and and so this this I use all the time for all kinds of different things and like maybe I don't want it to be canceled out completely well if you don't want to canceled out completely then you want this blue this blue line to never go all the way all the way to zero and so what I could do is let's say instead of going from zero to one I could multiply it by let's say 0.8 so now it goes from 0 to 0.8 and now I just add point 2 to it so zero point two and now and now I have a function if I turn this off where where my sign is 20% and then it and then at a position at the exact position where I want that to happen it goes from it goes from 20 percent to 100 percent let's say and you could also like multiply multiply smooth stop functions together so you could go up here and then you could maybe go down later at a specific point where you want it to happen so let's just look at this real quick in inside of shader toy so I have here a shader toy where I already made a smooth step so this is so here my my UV coordinates go from 0 to 1 and and so here I can move this move this threshold around right and so if I put it on the other side of 0.6 I say zero point seven then it goes from white to black instead of from black to white another way to turn it around you could do is you you could get you you could say or just give me 1 minus this number right that's the same it's basically the same thing so let's try to build something real quick with this I did a shader not so long ago of a snake that you can see here and for the tongue of the snake what I made is I basically have just two cylinders that are close together and they're kind of smoothly blended together and then as you get go along the tongue those cylinders they move apart to make the fork in the end of the tongue so let's try to let's try to make that so what I can do is let's see here so well let's just first make one edge so I say 0.5 and 0.4 let's say Y is not oh yeah they're just showing just over here so yeah like the first thing I'm going to do I like I want to put the I won't want to put the origin in the middle here so because right now the orange isn't is on the bottom left so let's do what what we normally do so minus 0.5 times I resolution dot XY and then divided by Y and that just makes it that D that the origin is in the middle okay and so if I want to make this into like so here I wouldn't work with a cylinder I would just work with a box and I would have two boxes that go together and then they split apart so let's see so one thing so right now it only makes one edge right so if I want the other edge in there then then I would have to well actually your let me just turn these around let me just go from zero to zero point four and then if I want this to go back to black then I would have to let's say multiply it by another by another smooth step that has the threshold turned around let's say so the bigger one would be would be first so let's say from point one to point one four I mean from point one four two point one so the bigger one is here first because we want to go from high to low and that would give me something like that but we can do this better we can do this we can we can we can make two edges for the price of one in this case and let me just go back to two here because what I can do if I just turn this off here for a second and I get rid of this here as well so it goes from zero to one and I move this over because what I can do is I could use an absolute to fold the left side of the screen onto the right side so like watch what happens if I do that so this is my original X right that I put into this so if I put an absolute around here okay so now I have two edges for the price of one and and I could still I could still change changey so now what I would want to do is if I wanted white in the middle I would have to you have the the first threshold would have to be larger than the second one so let me just move that so do something like that so let's just try to do that so over here so instead of having to smooth steps let's just try using one smooth step but then with an absolute so I just put an absolute here and then if I do this now I have the opposite so I have to put my thresholds the other way around and so now I have I have two edges for the price of one basically and now I want two of these I want two of these these cylinders while in 3d was a cylinder here it's kind of like a box I want two of these boxes they're kind of overlapping and then in the end to kind of feather out right and well I can get the second one also like for free by doing another reflection so if I if I go over here let's say if I had this one let's move this one to the right and so to move this one to the right I just subtract from here let me see here is that correct no it's from here - and let's say and let's create that and so now I have a value n that I can use to to move this entire thing and now I would just move it to the side a little bit and now in order to get another bump on the other side I can just do an absolute value again so I could just take this X here that I subtract at the end from and just make that again the absolute value so now I have to now I have four edges for the price of one basically and a lot of making shaders and making them fast has to do with finding what symmetries there are available what you can do what kind of reflection you can you can add so that you don't have to do something multiple times but you can you just you're just folding space and then only in the end after you fold with the entire space then you do your your your upper air so did you get everything for free basically so so let's do this so let's make two for the price of one here so so here I can move this left and right right so I can I can move this over okay and now if I put another absolute or over here let me just make this a little bit smaller I hope you guys can still see it then okay so now we have the second one for free basically and so now what we want is like I want these two boxes to be overlapping at the bottom and then as you go up at some point they start forking out so let's make them overlapping so let's make this a lot smaller actually I can probably do it at 0 yeah let's have it of 0 so I want this value at 0 and then at some point the value should fork out to let's say mmm that's too much well let's say point 1 okay so from 0 to point 1 and so how can I do that well I can use another smooth step for that so because I could say well that's it's smooth step and and this time what I'm gonna put the the y coordinate into the smooth step so I reduced uuv dot y and then I could say okay so my my my y coordinate now goes from minus 0.5 to 0.5 and so 0 is at the middle so I could say from 0 to 0.5 that's where you should start forking out right so I could save 0 here and then 0.5 over here and I let's see what that looks like okay so now now it Forks out there now it Forks out way too much because this smooth step returns the value between 0 & 1 and and we just decided that point 2 was the value that we wanted so well you could just multiply it by point 2 and then you have something like that now similarly I also want these these like these ends of the tongue and actually maybe this is still too much let's do point one I want these ends of the tongue to also get narrower as you get to the end of the tongue right and so how do I make this narrower well that is this this value over here right if I make this value smaller then the whole thing gets narrower so well I could use another smooth step for that but in this case that's like it's exactly the same I want that to happen in exactly the same position is where I want it the the the fork to happen namely this smooth step over here so let's just take this out let's cut this out of control X and let's call this fork and then over here I say float fork float fork equals that okay and now I can just I could just multiply that over here by fork okay and that is exactly the opposite of what I want so if you if you have the opposite then you could just do one minus so one minus that okay and then it goes all the way to two zero now it could be that you want more control over this so maybe for instance maybe I don't want this to go all the way to zero well I get again so this 4 goes from zero to one therefore this entire thing goes from one to zero but if I if I don't want it to go all the way to zero then I could just make it that this fork only goes to zero point eight let's say by multiplying it by 0.8 and then it doesn't go all the way to zero another way that you could do this where if you want to control the output of a smooth step into exactly the number that you want you can also use a mix for that so so what I could do is I could just get rid of this entire thing and say mix and then put a fork in there so a mix mix function returns one number if if if the last number is zero and returns another number if the last number is one milani wish you'll see it here so let's say point zero five and then and then where it's completely forked I want it to be point zero three okay so now if if Fork is zero it will return zero point zero five if Fork is one that will return point zero three and anywhere in between we'll do a linear interpolation okay so let's see okay so that is that so now I could also make it that it goes thicker in the end okay so yeah so that is kind of how a smooth step works I I made another video about linear interpolation and exactly how to derive this this formula over here if that interest you you can check it out over here or also in the description below yeah so this this video perhaps wasn't you know about some super cool effect but trust me like all of the things that I do would they use this function a lot and it's it's good that you understand how it works inside out and so I hope you liked it if you did please click like click subscribe leave a comment post something on a Facebook group maybe even become a patron on that week that would be great or share this with your friends that would be awesome you [Music] [Music]

Channel: The Art of Code

Views: 30,791

Keywords: ShaderToy, Shader, Shaders, Shader Programming, Shader Coding, Shader Live Coding, Live Coding, glsl, webgl, The Art of Code, shader tutorial, smoothstep, smooth step, desmos, computer graphics coding tutorial

Id: 60VoL-F-jIQ

Length: 23min 55sec (1435 seconds)

Published: Fri Apr 03 2020

Reddit Comments

[u/ToyDingo]

This was fascinating. And I typically hate math. Thanks for posting.

[u/aoxkrigan]

Would you use something like this for accelerating objects as well perhaps?

[u/fortunacio]

Wow! I rlly enjoyed the vídeo, thx so much!

[u/sol_hsa]

See also: smootherstep