GLSL Noise

[00:00:00]
>> So I'll just take a bit of a breather to explain what I just did there. Because a lot of stuff just happened. We just introduced noise and you're probably like, what is going on? What is noise? This might be a refresher if you've already, learned about noise maybe in another course or something.

[00:00:19]
But I'll just quickly go over what noise is and the basics of it. So inside of the course repo in the primer, the digital interactive book. There's bit of a section on noise, and how this kinda works. And so if we think of a wave, like a sine wave.

[00:00:41]
This is a function that we, we call the function pass in some coordinate, some value, in this case x. And then we get back a value that's generally between -1 and 1. That's what the sine function gives us. It's always a value between -1 and 1. And so if we pass in different values here, we're gonna get different outputs for the y axis.

[00:01:02]
That's what's happening. And so if we pass in just the coordinate. Let's just say we'll make it really simple, y=Math.sine. And that's gonna create this value that slowly undulates from down here -y all the way up to +y. If we were to multiply this by Math.pi. We'll see this like kind of perfect wave that starts here, goes down, up and then back to the center line.

[00:01:32]
Can multiply it by some higher number, 2. And now we're beginning to compress the wave. The higher this number goes, the more we're going to be compressing this wave and creating a big sort of change in frequency here. This concept is called frequency. So I just hooked up this slider here just by saying x times frequency.

[00:01:52]
And you'll see how multiplying the input coordinate into the wave is gonna stretch. Either make it so that this sine wave is stretched outwards. Or compressed into many, sort of, up and down waves. The other concept is amplitude. So this is the thing that we scale after we get back the value that is between -1 and 1.

[00:02:18]
So if we multiply the output of sine by this amplitude value. We can stretch the wave to be larger or less dramatic. So closer to a flatline, that's amplitude. This other concept of phase is just offsetting the coordinate. So translating or adding the coordinate. And you'll see how just adding that is just gonna move or translate the wave left to right.

[00:02:46]
So this is a sign wave. And a wave function is a good way of understanding noise. Because noise, in this next page here, is basically a wave function. It's something that we have a function, we pass in a coordinate. And it gives us back a value. Except instead of it being always perfectly undulating from 0 and then up to 1 and then down to -1 and then back up to 0 and past 0.

[00:03:10]
It's not this smooth back and forth thing, it's much more random. And so each time we click this graph, you're gonna see it's producing a different random function. This is the output of this input here. And so you can see how changing the frequency does the same thing.

[00:03:28]
It just compresses the wave. This random noise wave. Changing the amplitude, changes the sort of drasticness of this wave, how high it goes or how low it goes. And then changing the phase just again, just translates the wave left or right. So this is noise. This is one dimensional noise in the sense that we just have one coordinate.

[00:03:51]
1D, as in, one coordinate going into it. Two dimensional noise has two coordinates going into it. So here for example is an x and z coordinate. So we can rotate around this scene here. We can see that by changing the frequency, just like in this 1D, changing the frequency we compress everything.

[00:04:13]
Like a good way to imagine it is you have a Slinky, and you pull the Slinky outwards and it starts to get more and more flat. But if you push the Slinky back together it starts to get more and more rapidly changing. That's what we're doing here by compressing this.

[00:04:29]
And it's the same thing with the frequency in 2D. We're just compressing this down or scaling it, stretching it up. And then we have amplitude which is how high these waves go basically. And so, you can really think of it like waves in an ocean, almost. And the coordinates that go in.

[00:04:47]
So here we have x, where we also have z, which is the other horizontal coordinate in this 3D coordinate system. So y would be up and down. That's defining how high to make these vertices, or how low to make these vertices. And then x and z is defining where in this sort of floor plane, where the coordinate would be.

[00:05:10]
And so if we introduce a third coordinate into this noise function. I mean, maybe we only have x,y,z. So we already have y here which is gonna be the how high this point is. We have x and z, which is where the coordinate lies within this floor plane.

[00:05:27]
But let's say we wanna introduce a third parameter, which is time. Now, when we modulate time, it's not gonna just change the frequency or amplitude, or anything like that. It's gonna change the way it undulates. And it's as if, this how I sort of imagine it, it's as if you have a big rug, or like a fabric.

[00:05:43]
And you're just pulling it on one end and just shaking it up and down. You're creating, like, undulations throughout. You're introducing this third dimension of time and making it pass through. And so that's kind of why we like to use these noise functions. Because, all of a sudden we have this value y which is going from -1 to 1.

[00:06:04]
But it's undulating, depending on the coordinates, in this really interesting way. And so here's just another little bonus demo. This would be creating a noisy sphere. So, this is using 3D noise in a slightly different way. Which is inputting the coordinates of a sphere and then multiplying that by the normal of a sphere.

[00:06:30]
Which is a bit more of an advanced demo. Maybe we'll come back to this at some point, but maybe not. Anyways, that's noise. And so what we're doing in our shader here, is we're saying let's create an input value that's gonna be the coordinate of each of these circles.

[00:06:49]
And the reason we floor it is because we just wanna get the sort of center point, or the the corner point, of these circles. We want the noise just to act on each of these circles independently. And so without this floor you're gonna end up with this kind of wavy input.

[00:07:08]
And that's because this noise is being applied to every single pixel within this region of the circle. But if we floor it, it’ll just give us the sort of size of scale of each individual circle here. And so you also have to make sure that this value here, this q * 10 matches.

[00:07:31]
You could even pull this out, outside of the functions. And just make it q*10 up here. That should work as well.