Introducing Noise

[00:00:00]
>> Mathew DesLauriers: What I wanted to do now is just to, along this sort of path, is to try and bring back some of the concepts we were talking about earlier around noise and bring those into our shader. That will be a nice sort of way of introducing modular shaders.

[00:00:21]
And it will also be a nice way of introducing some cool functions to make our art a bit more interesting. So what I'm gonna do is I'm gonna just sort of clean this up a little bit cuz I've been just like tweaking code as I go. Maybe I'll just comment all of this out for now.

[00:00:41]
>> Mathew DesLauriers: And maybe we'll come back to that and start again from a gradient. Just I like to start from a gradient cuz it just makes me sure that the code is running properly.
>> Mathew DesLauriers: And what we're gonna do is we're going to install a module, except instead of requiring the module up here and installing it like this, we're gonna install it and require it inside of our actual shader code.

[00:01:11]
And to do that we're going to go ahead and install a module called glsl-noise. And if you Google NPM glsl-noise, just like I'm doing here.
>> Mathew DesLauriers: You'll see this NPM module,
>> Mathew DesLauriers: And it includes a few examples here, and this is the noise function just like we were doing earlier in the day, this noise function is the same sort of idea.

[00:01:44]
It's using 2D or 3D or 4D noise except instead of being JavaScript. It's actually all written in glsl. So I'm going to go back to my canvas,
>> Mathew DesLauriers: And to install it we just have to use the same command we've been using before to install modules. So we do NPM install glsl-noise.

[00:02:07]
And so actually, although it is GLSL, it's still published on NPM, which is kind of neat and cool. Bit of a hack, but it's kind of interesting. And it's installed so now we can require it. But remember we're not requiring it up here. We're requiring it inside of our string.

[00:02:23]
Inside of our shader string. So before our main function, we have to write this sort of syntax. It's kind of weird and funky. We do pound. Pragma glslify, colon, and then this just says, okay, this next command that we're gonna put here in our shader code is an import.

[00:02:50]
Because this is a bit of a hack, it's a bit of a custom feature. It doesn't exist in WebGL and it doesn't exist in GLSL. In GLSL, if you wanted to use a noise function you'd have to copy and paste like hundreds of lines of code into your shader.

[00:03:06]
And the way we're doing this is just going to make it a bit easier so that we don't have to copy and paste hundreds and hundreds of lines of code. And this is gonna allow us to be just a bit more modular. But again, it's not a built-in feature of GLSL and the reason it's gonna work is because we're combining it with this thing up here which we haven't used yet, GLSL file.

[00:03:26]
And so we just have to write the syntax like this, and then we can say, noise is equal to require glsl-noise/simplex/3d. And it's a little bit like the require syntax that we have above. It's not that dissimilar, and then we're actually requiring a specific package within this noise package cuz it has a whole bunch of different types of noise.

[00:03:52]
And we won't get into those, but it has different types like prolane or simplex kind of differences, and they just produce different values. And a 3D, meaning we're gonna do this three dimensional noise. And so far we've just used 2D noise, but now we're gonna sorta take it up a notch and add a new dimension.

[00:04:10]
And so that's how that looks. And if you save, it should just work. So you shouldn't have an error. And if you have an error maybe just check the error. See what's up. But that's how that looks. And now we can use this noise function. And this noise function is very much like what we had earlier where we pass in an xyz coordinate and we get back a number.

[00:04:36]
So let's do that. So we're gonna do noise and instead of using just coordinates, we actually have to pass in a vec3. So let's do what we are doing this morning. The U and the V or the XY of the UV coordinate and then time. So what's happening here is we have our noise function we're giving in three coordinates cuz it's a three dimensional noise function.

[00:05:04]
We're giving it the UV coordinate of our surface and we're giving it the time parameter in seconds. And then we get back a floating point number between negative one and one. And with that floating point number we can just put that in here.
>> Mathew DesLauriers: And, all of a sudden, we're going to see something very similar to what we have in some of the earlier slides.

[00:05:33]
>> Mathew DesLauriers: So just wait a second, so you guys can catch up there. And, just another reminder in case you run into errors when you're typing out numbers. I said it earlier, but for decimal numbers you have to have a period. So instead of just doing 1, you should do 1.0.

[00:05:49]
That's just a reminder in case you run into that. And so just like in the earlier part of today, we were changing the frequency of the noise, we were making it scale in and out. You can do the same thing here. Just by multiplying XY by some number.

[00:06:09]
>> Mathew DesLauriers: But let's keep it at something low like two, or even one. Or two. And then if you have this code here that I commented above. Remember how we did some aspect ratio stuff. And so actually you might notice with the noise function, if you squeeze your browser like this, the noise function's no longer going to look very square-like, it's going to look a little bit squashed.

[00:06:32]
And it's the same problem we ran into before. So what we're actually going to do is we are going to, we can use the same center value here. So I'm just gonna uncomment that and pass this coordinate in as our 2D coordinate instead. And basically it's just a vec2 that has its x axis squashed by the aspect ratio.

[00:06:58]
It doesn't need to have this negative 0.5 but it doesn't really matter.
>> Mathew DesLauriers: That's a small fix. I'm gonna make it a bit more frequent just by multiplying it by some number.