Noise

[00:00:00]
>> Mathew DesLauriers: I wanna go back to this image that we're trying to create. We're trying to create these things. And we're not quite there yet, and that's because we don't have this rotation, we don't have this text, and we don't have this sort of undulating wavy-like pattern. And the way we're gonna achieve that is using noise.

[00:00:20]
So this is a new topic, here we go. So noise function is a specific type of function that you don't really need to know what's under the hood. You don't really need to know the black box that goes on inside this function. You just need to understand the way that noise functions work.

[00:00:38]
Is that you pass in a coordinate, which is gonna be either a 2D coordinate like xy or a 3D xyz, or a 4D xyzw. And with that coordinate, you get back a value for that coordinate, so you get back a value, which is v here, and this value's between -1 and 1.

[00:00:57]
And this value is gonna be slowly varying between -1 and 1 based on the coordinate you pass in. So if you pass in 0.5, 0.5 as your coordinate, you're always gonna get back the same value. Maybe it's a -0.325 or something like that, and it's just some pseudo-random looking value.

[00:01:18]
But if you pass in a coordinate that's very close to the other coordinate, you're gonna end up with a value that's also very close to the random value you had before. And so, what that's gonna allow us to do is, it's gonna allow us to create this sort of undulating range of different numbers, cuz right now, our random functions, they're all just using either Gaussian randomness or uniform randomness, and you end up, every time you call that function, you get a different value.

[00:01:42]
Sometimes it's like 0.9, sometimes it;s like 0.1. And so, those two different values are so different that if you place two different out of brush strokes or two different items next to each other, they're gonna end up looking wildly different. What we wanna do is make it so that they slowly undulate from one value to another.

[00:02:00]
And so a noise value can sort of be visualized like this grid. And the way you would actually visualize a grid like that, or an image like that, is by using the noise function, where you have the x and y coordinate. So in the case of this image, it's actually just like a grid, like what we were doing before, except instead of a grid of 5x5 or 10x10, it's a grid of 100 pixels or 200 pixels wide by 150 pixels high, so it's actually just a grid of pixels.

[00:02:31]
And so, you pass in the x and y coordinate for that grid item, you get back a value between -1 and 1, and you map that value from -1 and 1 into a 0 to 1 range. And this is a pattern that I like to use a lot, is to change a value that goes between -1 and 1 into a 0 to 1 range, you use this.

[00:02:52]
And then, we turn that into a percentage, we floor it so we get like a 98 or a 32, and we just pass that into a CSS color string. And that's what produces an image like this. You can also, you might be wondering why is this useful so far, but one of the nice things is the way you can manipulate the coordinates.

[00:03:12]
And so, by scaling the coordinates that are going into this noise function, you can end up with a very different image. So this is multiplying the coordinates by some large number, you end up with a lot more variation and a lot more frequent changes in the way that the image is going from black to white or from -1 to 1.

[00:03:32]
And this kind of, if you imagine you're on a helicopter looking down like a mountain terrain or something like that. Imagine the helicopter moves very far up, the mountains look much smaller. Or if the helicopter goes right down to the hill, it looks much bigger. And that's exactly what happens when you multiply the frequency by something smaller than 1, you end up not really seeing the mountains anymore, you just see like a big hill.

[00:03:57]
It's almost like you're standing on a hill. That's how I visualize these noise functions. You can also think of it as like a signal, like an electromagnetic signal, or a wave like a sound wave or something like that, and the sound wave is going up and down. And by changing the frequency of the sound wave by like stretching it or putting it closer, you end up with different frequency of the image.

[00:04:20]
And so, we're gonna use the same thing, except instead of randomly choosing a size, instead of just using random.value or random.gaussian, we're gonna say, for each coordinate in our grid, what's the noise value? And then, we're gonna use that noise value to change the size of the brush stroke or the circle, or whatever the image is that we're drawing, and then also change the rotation.

[00:04:42]
And that's gonna be, it's not very useful yet because if you try and rotate a circle, you can't see anything different, but when we start to draw a text, that will become more important.