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_rose69344 жыл бұрын
Thank you for saying exactly what I felt.
@ralofpatel4704 жыл бұрын
Same story with me. Thank you The Art of Code
@Tarnith4 жыл бұрын
Same! This channel is amazing
@imagineabout41539 ай бұрын
Same here. Love this guy
@8-P4 жыл бұрын
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.
@ashastra1234 жыл бұрын
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.
@TheArtofCodeIsCool4 жыл бұрын
I guess you are right. Done!
@trygvij16044 жыл бұрын
@@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.
@yyBoByy3 жыл бұрын
@@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.vilela4 жыл бұрын
Man, this demonstration in the beginning is probably what lacks in almost all math classes that I've seen out there... really, really amazing!
@TheMastersArmoury3 жыл бұрын
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.
@TheArtofCodeIsCool3 жыл бұрын
Thanks for the nice words. I do agree most people show the end-result and gloss over the nuts and bolts.
@varomix2 жыл бұрын
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
@realcygnus4 жыл бұрын
Bud its ALL priceless, especially the nitty gritty math details imo. Superb content as always !
@braveitor4 жыл бұрын
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!
@monx2 жыл бұрын
this channel is an absolute diamond in the rough
@RichardBaileyrichoncode3 ай бұрын
Watched a second time and followed along step by step. Great video.
@ppscvalentin2 жыл бұрын
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 👍
@E1nherj4 жыл бұрын
Great and easy to follow explanation of the function. Thank you.
@betterbelikeme4 жыл бұрын
I find this generally usefull not only for shader artists. You are great. Thanks a bunch
@erfansh19254 жыл бұрын
Your explanations are so easy to understand
@LudwigvanBeethoven23 жыл бұрын
I came to learn about smoothstep but I learned much more. Thank you
@4.0.44 жыл бұрын
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.
@TheArtofCodeIsCool4 жыл бұрын
Aww thanks man!
@000318494 жыл бұрын
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!!
@TheArtofCodeIsCool4 жыл бұрын
Aww thanks! And thanks for watching!
@Roxor1283 жыл бұрын
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_rose69344 жыл бұрын
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.
@TheArtofCodeIsCool4 жыл бұрын
Aww thanks! That just made my day :)
@gehtsiegarnixan2 жыл бұрын
Amazing guide, really well showcased where all the math comes from. Thanks a lot.
@arildboes4 жыл бұрын
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!
@shire79492 жыл бұрын
Wow, didn't understand it all probably but it helped so much, thanks.
@abel55454 жыл бұрын
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
@bengalinsky43002 жыл бұрын
Just discovered this channel. Can’t thank you enough for this great content, i’m learning a lot from these tutorials🤘
@TheArtofCodeIsCool2 жыл бұрын
That's great to hear. Thanks for watching!
@TankorSmash4 жыл бұрын
Great episode dude, love how at the end you showed more complex examples of its use, that was key.
@dr.noodles48684 жыл бұрын
Fantastic resource! I followed along and ended up playing around in desmos/shadertoy making lots of cool functions
@TheArtofCodeIsCool4 жыл бұрын
Yeah! Thats what its all about!
@caogaoting37154 жыл бұрын
Your video is mazing. You explained smoothstep very clearly, thank you!
@TheArtofCodeIsCool4 жыл бұрын
Glad you think so!
@obszczymucha13372 жыл бұрын
Fantastic explanation! Thank you.
@Julian-bh7rh4 жыл бұрын
Thanks Martijn, another awesome video!! your explanations are always really clear:)
@whythosenames4 жыл бұрын
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)
@TheArtofCodeIsCool4 жыл бұрын
Very nice! There is often more than one way to accomplish the same thing. ;)
@ralofpatel4704 жыл бұрын
smoothstep of smoothstep of smoothstep. Just amazing.
@milanstevic84243 жыл бұрын
smoothsteption
@Moonz974 жыл бұрын
Extremely eye opening. Thanks!!
@jugibur21174 жыл бұрын
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 ;-)
@TheArtofCodeIsCool4 жыл бұрын
I suggest just playing around with it on Desmos and ShaderToy. It becomes clearer after a while.
@phatbuihong40145 ай бұрын
Thank you so much, it's very helpful.
@Veptis2 жыл бұрын
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
@TheArtofCodeIsCool2 жыл бұрын
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.
@stefanguiton2 жыл бұрын
Excellent video!
@danivicario3 жыл бұрын
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-nr1bv4 жыл бұрын
Awesome tutorial!!! Could you please explain how we get combination of a and b functions?
@TheArtofCodeIsCool4 жыл бұрын
Check out my 'interpolation for dummies' video to see how the linear interpolation function works.
@feishiko70382 жыл бұрын
Thank you for the video!
@PLUkraine4 жыл бұрын
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
@remmo1234 жыл бұрын
absolutely brilliant explanation. Thanks for teaching!
@hascheidl4 жыл бұрын
excellent video! definitely super cool stuff :) we appreciate you taking the time to teach the "basics" as well.
@MrNixaboo4 жыл бұрын
Wonderful work! Thank you so much!
@NexysStormcloud4 жыл бұрын
very usefull and easy to understand, as always. Thank you.
@vinciardovangoughci77754 жыл бұрын
Great content as always
@tommyp11244 жыл бұрын
Well explained. As always.
@milanstevic84243 жыл бұрын
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;
@juanrey73184 жыл бұрын
This is awesome, thank you very much! What a usefull function, gonna use it everywhere ^^
@TheArtofCodeIsCool4 жыл бұрын
Yess :)
@harrynnebank83214 жыл бұрын
man you are a god, with extreme superpowers, actually if there is one god at all that will be Math
@TheArtofCodeIsCool4 жыл бұрын
Math underlies all of reality for sure :)
@igorgulyaev60014 жыл бұрын
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!!
@TheArtofCodeIsCool4 жыл бұрын
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!
@quanghong39224 жыл бұрын
very useful, thank you
@antonnosoname34692 жыл бұрын
Amazing Thanks a lot
@willnutter11944 жыл бұрын
Great Video! Thank you
@_Garm_4 жыл бұрын
a smooth tutorial :P :D
@rokolczuk4 жыл бұрын
great stuff! Thanks!
@lifedesugar71382 жыл бұрын
awesome!
@ian.ambrose Жыл бұрын
Most beautiful man on earth.
@icaroamorim31234 жыл бұрын
I like the expression tool belt;
@zsenkrad4 жыл бұрын
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..
@TheArtofCodeIsCool4 жыл бұрын
Those are all great suggestions.... for me to learn about first ;)
@shenghongify4 жыл бұрын
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.
@TheArtofCodeIsCool4 жыл бұрын
Check out Inigo Quilez's website and youtube channel.
@learningforever9572 жыл бұрын
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!
@TheArtofCodeIsCool2 жыл бұрын
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!
@MrKristian2523 жыл бұрын
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...)
@TheArtofCodeIsCool3 жыл бұрын
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!
@switch32 жыл бұрын
How do we get the a(1-x)+bx linear function?
@rtcwkillz4 жыл бұрын
You are probably the better teacher in glsl
@ralofpatel4704 жыл бұрын
You can also use fooplot.com for plotting curves of mathematical functions or visualize vertices in Cartesian plane
@Minefortress214 жыл бұрын
Succh a good video! Thank you
@Pavel-wj7gy Жыл бұрын
I never thought Bill Burr is so good at trigonometry!
@summerWTFE4 жыл бұрын
Thanks for doing this one. Really wish I’d have same talent to manipulate numbers like that. 😑
@TheArtofCodeIsCool4 жыл бұрын
Its like anything else: Practice ;)
@_nimrod922 жыл бұрын
Fun Fact this is what Soft Clipping is in Music Production
@ziyunsong5624 жыл бұрын
thank you for your lesson,it really helps! I will donation if you have alipay
@TheArtofCodeIsCool4 жыл бұрын
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 :)
@TigraPolosatiy4 жыл бұрын
*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!
@TheArtofCodeIsCool4 жыл бұрын
Hmm yeah that could be a good video. I'll think about it.
@robertaguilar9192 жыл бұрын
Is he using C or C++? Could you use any Programming Language with this? So fascinating
@dandandu94184 жыл бұрын
Thank online video websites where I can get such awesome tutorials for free..
@АндрейКлок-о7ж4 жыл бұрын
Can someone explain where the function a(1-x) + bx came from in 3:54 ?
@TheArtofCodeIsCool4 жыл бұрын
It's the linear interpolation function. Check out my video interpolation for dummies for an explanation.
@moonhowler6677 ай бұрын
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.
@gower19734 жыл бұрын
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?
@TheArtofCodeIsCool4 жыл бұрын
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)
@pyronucleic19643 жыл бұрын
Why not use sin/cosine? Those functions seem a bit smoother.
@TheArtofCodeIsCool3 жыл бұрын
You could. This one just mimics the built-in smoothstep function.
@ralvarezb784 ай бұрын
What about (1+tanh(k*x))/2 ?
@TheArtofCodeIsCool4 ай бұрын
That function looks nice but it is asymtotic, which makes it that you never get to 0, or 1, which is not ideal.
@krezkort3 жыл бұрын
My brain hurts, how is everything a float: including the 2d coordinates and the gradients? I must be thinking about these backwards somehow
@Vityaf3 жыл бұрын
Why I'm watching this at 3 A.M.?
@pterois59142 жыл бұрын
🤯
@jinmingzhang73373 жыл бұрын
anyone understand how does substract t1 makes the second threshold stays..... ;o?
@TheArtofCodeIsCool3 жыл бұрын
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.
@jinmingzhang73373 жыл бұрын
@@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!
@telotawa4 жыл бұрын
why not just use a sigmoid curve
@TheArtofCodeIsCool4 жыл бұрын
It's a good question. A sigmoid curve is asymtotic, which wouldn't work here.