Smoothstep: The most useful function

[@Jhat]

I came to this channel to learn shader programming, and over several videos, you have fundamentally changed the way I look at math. I cannot thank you enough!

[@paracelsus_rose6934]

Thank you for saying exactly what I felt.

[@ralofpatel470]

Same story with me. Thank you The Art of Code

[@Tarnith]

Same! This channel is amazing

[@imagineabout4153]

Same here. Love this guy

[@8-P]

That was exceptionally well put together. I wish we had such tools back in school, would have helped alot to visualize functions in the early years. This video would be a must-see if I were a teacher.

[@ashastra123]

I suggest you put the name (Smoothstep function) in the title because I know a lot of people are interested in this, and it'll be easier to find.

[@TheArtofCodeIsCool]

I guess you are right. Done!

[@trygvij1604]

@@TheArtofCodeIsCool your video will also show up more often in search results or youtube algorithm if your video title is the same as the subject matter, or so I've been told.

[@yyBoByy]

@@TheArtofCodeIsCool Can confirm. I came here from searching for an explanation of smoothstep, and was pleasantly surprised to find this gem of a video. Your channel looks really cool (and helpful), so I look forward to watching more of your videos!

[@halian.vilela]

Man, this demonstration in the beginning is probably what lacks in almost all math classes that I've seen out there... really, really amazing!

[@TheMastersArmoury]

Literally the most underrated shader programming teacher on the internet. Always digging up these dusty old articles on shaders and it feels like such a huge undertaking. I'm as interested in shaders as this guy is and I had nowhere to output that fascination and craving to learn and now that I found this channel I can fully apply myself by listening to what you have to say. This guy is a must for visual learners. Most shader teachers on youtube are just showing you their work and calling it a tutorial, this guy is the science teacher of shaders. KEEP doing it. The shader community is WAY TOO SILENT and mass respect for making this knowledge free. Mass respect. Stay save man.

[@TheArtofCodeIsCool]

Thanks for the nice words. I do agree most people show the end-result and gloss over the nuts and bolts.

[@varomix]

I wish this was the way math was thought when I was at school, I hope this is how is thought today, great video, more subjects like this would be great to understand the basics, thank you

[@realcygnus]

Bud its ALL priceless, especially the nitty gritty math details imo. Superb content as always !

[@braveitor]

Super interesting. You make difficult concepts very easy to understand. If I had had a teacher like you back in my high school days, I'd have enjoyed maths much more. Thanks!

[@monx]

this channel is an absolute diamond in the rough

[@RichardBaileyrichoncode]

Watched a second time and followed along step by step. Great video.

[@ppscvalentin]

Beautifully explained! Thank you! I spend quite a number of hours trying to wrap my head around what smoothstep, mix and clamp *actually* do, but I couldn't understand - I couldn't find a mental model. Then I found your video 👍

[@E1nherj]

Great and easy to follow explanation of the function. Thank you.

[@betterbelikeme]

I find this generally usefull not only for shader artists. You are great. Thanks a bunch

[@erfansh1925]

Your explanations are so easy to understand

[@LudwigvanBeethoven2]

I came to learn about smoothstep but I learned much more. Thank you

[@4.0.4]

Some people use tools, other people build tools, and you're certainly the one who's teaching those that will build tools. It's hard to even trace all the subtle positive long-term effects your teaching has and will have on the world, but rest assured you're inspiring thousands of people into thinking about math in a way they didn't before, and thus building the foundations to a smarter tomorrow.

[@TheArtofCodeIsCool]

Aww thanks man!

[@00031849]

Many came here with already knowing shaders a bit and ended up learning the math behind it. I came as someone who knows math and ended up learning a lot about shaders and also maybe something even more important: a way to teach math to other people with an interesting approach. As someone who is just getting into game developing as a hobby but also sometimes teach people some math (also as a hobby, but I also worked as a math teacher for a bit) I should say, THANK YOU. Your channel is a diamond I found here on youtube since most of the shaders tutorials I found are very surface level in the way of how they work, so many things look like "magical" things where if I don't know previously what pipeline to use for a shader then I could only find it with trial and error (and luck) but now I feel like I can understand a shader better just by looking at it and breaking down the math behind it's effects, and maybe one day I can look at an effect and know how to make it happen with my own custom shader, and that will be thanks to you. Thank you, thank you, THANK YOU!!

[@TheArtofCodeIsCool]

Aww thanks! And thanks for watching!

[@Roxor128]

Might be a good idea to make a video covering when smoothstep _doesn't_ work and you need something more demanding like the degree-5 smootherstep, or when smoothstep is overkill and you can get away with just using clamp(). As I recall, the original implementation of Perlin Noise used smoothstep, but it didn't work that well for higher dimensions, producing artefacts in rendering, so Ken Perlin did some tweaking and found that using a fifth-degree polynomial fixed the issues. Said polynomial has since been named "smootherstep", and there's a 7th-degree relative called "smootheststep", but I don't know if it's gotten any use.

[@Nick-kb2jc]

Wow! this was actually mind blowing. Thinking of smoothstep as an on/off function is very cool. And after watching this video, it makes complete sense. Thank you so much.

[@paracelsus_rose6934]

I can't thank you enough for helping me learn at 30 what I never got around to in high school or community college. Hard to describe how much you have changed my perspective on math and beauty.

[@TheArtofCodeIsCool]

Aww thanks! That just made my day :)

[@gehtsiegarnixan]

Amazing guide, really well showcased where all the math comes from. Thanks a lot.

[@arildboes]

This channel is amazing. You are a great teacher, and the stuff you are doing is very interesting. I love math, but have a hard time grappling with it. The way you are building a specific function step by step really opened my eyes. I love that you share the process so openly. Being able to follow along in code is the greatest way to learn for me. I know there is a lot of love for this channel, and it is deserved!. Thank you very much for teaching us!

[@shire7949]

Wow, didn't understand it all probably but it helped so much, thanks.

[@abel5545]

1k likes and 0 dislikes ! This is an amazing video

[@kirillholt2329]

this was very useful, thank you for making this

[@rammrras9683]

This is beautiful. I use something similar in simulating automation utilities going on/off

[@bengalinsky4300]

Just discovered this channel. Can’t thank you enough for this great content, i’m learning a lot from these tutorials🤘

[@TheArtofCodeIsCool]

That's great to hear. Thanks for watching!

[@TankorSmash]

Great episode dude, love how at the end you showed more complex examples of its use, that was key.

[@dr.noodles4868]

Fantastic resource! I followed along and ended up playing around in desmos/shadertoy making lots of cool functions

[@TheArtofCodeIsCool]

Yeah! Thats what its all about!

[@caogaoting3715]

Your video is mazing. You explained smoothstep very clearly, thank you!

[@TheArtofCodeIsCool]

Glad you think so!

[@obszczymucha1337]

Fantastic explanation! Thank you.

[@Julian-bh7rh]

Thanks Martijn, another awesome video!! your explanations are always really clear:)

[@whythosenames]

I just watched a bit of the video, you probably also did this, but it is just for me: We want 4 conditions for f: f(0) = 0, f'(0) = 0, f(1) = 1, f'(1) = 0. So we need a function of degree 3: f(x) = ax^3+bx^2+cx+d With the first 2 conditions we get c=d=0. Condition 3 implies a+b=1, condition 4 implies 3a+2b=0. So in the end we get a = -2 and b = 3 so the smoothstep is s(t) = -2t^3+3t^2 = t^2(3-2t)

[@TheArtofCodeIsCool]

Very nice! There is often more than one way to accomplish the same thing. ;)

[@ralofpatel470]

smoothstep of smoothstep of smoothstep. Just amazing.

[@milanstevic8424]

smoothsteption

[@Moonz97]

Extremely eye opening. Thanks!!

[@jugibur2117]

For me such formulas were always a mystery, since I am not very talented mathematically. Your video helped me to understand some things better, even if in the end it is somehow magical what you can create with these formulas ;-)

[@TheArtofCodeIsCool]

I suggest just playing around with it on Desmos and ShaderToy. It becomes clearer after a while.

[@phatbuihong4014]

Thank you so much, it's very helpful.

[@Veptis]

This reminds me of all the different activation functions used in deep learning. While it's usually a Sigmoid, there is also tanh or ReLU. The idea is that you want something differentiable for backpropagation. So the min/max operations are a bit troubling

[@TheArtofCodeIsCool]

I'm not very familiar with training neural nets. I thought ReLU are also non-smooth? Either way, I just use smoothstep to turn things on or off.

[@stefanguiton]

Excellent video!

[@danivicario]

Excellent stuff.

[@CarbsCode]

Great video! This explanation and visualization is amazing and so helpful. I also agree with everyone else this is super intresting stuff. You can do so much with math and I do quite enjoy that haha

[@Max-nr1bv]

Awesome tutorial!!! Could you please explain how we get combination of a and b functions?

[@TheArtofCodeIsCool]

Check out my 'interpolation for dummies' video to see how the linear interpolation function works.

[@feishiko7038]

Thank you for the video!

[@PLUkraine]

This video is super useful. Please keep up explaining basics of shading, there are far too many advanced stuff and far too little basic tutorials

[@remmo123]

absolutely brilliant explanation. Thanks for teaching!

[@hascheidl]

excellent video! definitely super cool stuff :) we appreciate you taking the time to teach the "basics" as well.

[@MrNixaboo]

Wonderful work! Thank you so much!

[@NexysStormcloud]

very usefull and easy to understand, as always. Thank you.

[@vinciardovangoughci7775]

Great content as always

[@tommyp1124]

Well explained. As always.

[@milanstevic8424]

btw that first part (at 8:25) is basically inverse lerp if you rename t1 and t2 with min and max, this is how inverse lerp functions so Smoothstep (C#) implementation is practically float Smoothstep(float min, float max, float lerp) { float t = clamp(inverseLerp(min, max, lerp)); return t * t * (3f - 2f * t); } float InverseLerp(float min, float max, float lerp) => (lerp - min) / (max - min); though I like to check for zero divisions float InverseLerp(float min, float max, float lerp) { float denom = max - min; if(denom.IsZero()) return min; return (lerp - min) / denom; } with an extension for evaluating floating point zero within a tolerance static public bool IsZero(this float val) => Abs(val) < 1E-6f;

[@juanrey7318]

This is awesome, thank you very much! What a usefull function, gonna use it everywhere ^^

[@TheArtofCodeIsCool]

Yess :)

[@harrynnebank8321]

man you are a god, with extreme superpowers, actually if there is one god at all that will be Math

[@TheArtofCodeIsCool]

Math underlies all of reality for sure :)

[@igorgulyaev6001]

Great Video Martijn!! Could you please make a video on how to apply a realistic glow to images in ShaderToy? Maybe with exponential falloff(or some other realistic falloff)? Thank you so much, I learned a lot from your videos!!

[@TheArtofCodeIsCool]

Thanks! I already covered how to create realistic point lights, check the starfield tut. For other types of glow, I guess I'll have to do this in a future video!

[@gmanster_ster]

so cool. thanks!

[@quanghong3922]

very useful, thank you

[@antonnosoname3469]

Amazing Thanks a lot

[@willnutter1194]

Great Video! Thank you

[@_Garm_]

a smooth tutorial :P :D

[@rokolczuk]

great stuff! Thanks!

[@lifedesugar7138]

awesome!

[@ian.ambrose]

Most beautiful man on earth.

[@icaroamorim3123]

I like the expression tool belt;

[@zsenkrad]

as always super interesting and useful thanks! could you maybe explain topics like Hilbert Index / R-tree and how to generate blue noise and other noise functions..

[@TheArtofCodeIsCool]

Those are all great suggestions.... for me to learn about first ;)

[@shenghongify]

I just started to learn shader. Started to read "the book of shader" a few days ago. This channel definitely helps. I was wondering is there any other resources you would recommend? Thank you.

[@TheArtofCodeIsCool]

Check out Inigo Quilez's website and youtube channel.

[@learningforever957]

your mind must be beautiful! I whish I could have the same dexterity as you to perfectly recreate with numbers anything I imagine. Do you have any tip or video to learn/train more about visualizing maths? Thank you so much for the video. Some parts where difficult to follow, but overall you made it very easy!

[@TheArtofCodeIsCool]

You just gotta play with stuff. Desmos and Shadertoy are great for that. I suggest starting at my video 'ShaderToy for absolute beginners' and work your way up from there. Thanks for watching!

[@MrKristian252]

Isn't there 1 more threshold you can set? The sharpness / smoothness of the curve itself? So for example 0 is basically not smooth at all, and 1 is going to be 2 curves at the angle of a circle (in y=0.5, the tangent is 90 degrees, in y=[0.25, 0.75], the tangent is 45 degrees etc...)

[@TheArtofCodeIsCool]

Yeah you could do that. The easiest way would be to nest smoothstep calls. E.g. smoothstep(0,1,smoothstep(0,1,x))

[@prietjepruck]

Great!

[@switch3]

How do we get the a(1-x)+bx linear function?

[@rtcwkillz]

You are probably the better teacher in glsl

[@ralofpatel470]

You can also use fooplot.com for plotting curves of mathematical functions or visualize vertices in Cartesian plane

[@Minefortress21]

Succh a good video! Thank you

[@Pavel-wj7gy]

I never thought Bill Burr is so good at trigonometry!

[@summerWTFE]

Thanks for doing this one. Really wish I’d have same talent to manipulate numbers like that. 😑

[@TheArtofCodeIsCool]

Its like anything else: Practice ;)

[@_nimrod92]

Fun Fact this is what Soft Clipping is in Music Production

[@ziyunsong562]

thank you for your lesson,it really helps! I will donation if you have alipay

[@TheArtofCodeIsCool]

Thanks! I'm glad you are getting something out of it. I don't have AliPay yet. If you want to help, you can share this video and channel with your friends :)

[@TigraPolosatiy]

*The Art of Code,* very interesting lesson! Can you make another __ video with an explanation of how to convert complex shaders that use Channel0(1,2,3)? Thanks!

[@TheArtofCodeIsCool]

Hmm yeah that could be a good video. I'll think about it.

[@robertaguilar919]

Is he using C or C++? Could you use any Programming Language with this? So fascinating

[@dandandu9418]

Thank online video websites where I can get such awesome tutorials for free..

[@АндрейКлок-о7ж]

Can someone explain where the function a(1-x) + bx came from in 3:54 ?

[@TheArtofCodeIsCool]

It's the linear interpolation function. Check out my video interpolation for dummies for an explanation.

[@moonhowler667]

Since sin/cos algorithms have been optimized to Agrippa and back, wouldn't it be better to just lerp over a cos? You've essentially built an offset quarter cycle cosine, though not incredibly accurate for that purpose. If this were in any way faster than current sin/cos algos, it'd have been adapted into one by now. The upshot is, even if a given cos function is less efficient than this, you'd actually get a proper *smooth* step.

[@gower1973]

This is literally how to draw when you havent got a pencil and paper using only math. Is the smoothstep function the same as a gradient or colour ramp in other software?

[@TheArtofCodeIsCool]

I suppose you could use it to drive a gradient or color ramp though you could also use the 'linear step' (just the 'k' part)

[@pyronucleic1964]

Why not use sin/cosine? Those functions seem a bit smoother.

[@TheArtofCodeIsCool]

You could. This one just mimics the built-in smoothstep function.

[@ralvarezb78]

What about (1+tanh(k*x))/2 ?

[@TheArtofCodeIsCool]

That function looks nice but it is asymtotic, which makes it that you never get to 0, or 1, which is not ideal.

[@krezkort]

My brain hurts, how is everything a float: including the 2d coordinates and the gradients? I must be thinking about these backwards somehow

[@Vityaf]

Why I'm watching this at 3 A.M.?

[@pterois5914]

🤯

[@jinmingzhang7337]

anyone understand how does substract t1 makes the second threshold stays..... ;o?

[@TheArtofCodeIsCool]

Perhaps it helps to look at some examples. If t1 == 0 & t2==1 then we just divide by t2 which makes the line go through t2. If t1==0.5 & t2==1 then we only have half the distance to get to t2 so the line needs to be 2x as steep. Dividing by t2-t1 == 1-0.5 == 0.5 does that. Since dividing by 0.5 is the same as multiplying by 2. Lastly if t1 and t2 are on top of each other, we would need an infinitely steep line. Here again dividing by t2-t1 does that. You can actually divide by 0 but you can see that in the limit this works. I hope that helps give some intuition.

[@jinmingzhang7337]

@@TheArtofCodeIsCool It definitely helps! I realized it makes the function always goes through (t2,1) when x = t2, so no matter what value t1 is the graph is just rotating around (t2,1) :p Thank you!

[@telotawa]

why not just use a sigmoid curve

[@TheArtofCodeIsCool]

It's a good question. A sigmoid curve is asymtotic, which wouldn't work here.