Hello.
The time has come to talk about two-dimensional Perlin noise.
That is not two-dimensional Perlin noise.
Right behind me over here is a visual representation
of one-dimensional Perlin noise, a kind of graph
over time or over some sort of x-axis of Perlin noise values,
of smooth random values.
So what I want to talk about in this video, coming over here,
is what does it mean for Perlin noise
to suddenly be in two dimensions?
So let me draw for you essentially what
was happening in that sketch.
So this is a graph of Perlin noise in one dimension.
And we know that the noise function takes an input, which
I called in my previous example xoff,
meaning some sort of offset along the x-axis.
And the function will return the particular value
related to that x offset.
So now, even though this is a two-dimensional board,
and I am here with you in three dimensions,
this is a visual representation of one-dimensional value,
of values in one dimension.
So now I need a visual representation
of values in two dimensions.
So what I'm going to do here is now draw you a grid.
And right on, this marker is failing me.
Let's try the other side.
I think I need to like not have gravity in this space maybe.
And then the ink wouldn't drip to the back.
I'm trying to like hold it up like this.
I need one the those astronaut pens.
Anyway, so this is now a two-dimensional grid.
What if, instead of a particular noise value--
let me come back to this.
I am going to Staples, and I am buying
a box of fresh whiteboard markers
as soon as I finish making videos today.
Noise.
What if I say xoff comma yoff?
What I'm saying here is give me a particular noise value
at a particular x-location and y-location in this space.
So in the same way that this looks like a bumpy terrain,
but it's flattened, you could imagine
this being a bumpy terrain that's coming out towards you.
There's all of these values.
And so this particular value, this particular value
is similar to the value that comes after it
or the value that comes before it.
This particular value is similar to all the values
that surround it.
There's a difference between--
again, this is a very kind of like a difficult thing
to wrap one's head around.
There's a difference between drawing stuff
in two dimensions versus pulling values from two dimensions.
But what I'm going to do now, I think,
is try to demonstrate Perlin noise in two dimensions
by doing the most sort of like literal visual representation
of this.
So what I'm going to do is--
what I'm going to do is color every single pixel
with a grayscale value according to a Perlin noise value.
So let's make that happen.
Hopefully, that explained it somewhat.
Now I'm coming back over here.
And here we go.
So let's do some stuff here.
I'm going to keep this increment variable.
I'm going to get rid of this start variable.
And I'm going to get rid of a lot of this stuff actually,
but I'm going to keep this outer loop.
And what I'm actually going to do,
and I could do this with pixels.
Let's do it with pixels.
So what I need to say, I'm going to make the canvas 200 by 200.
And then I'm going to say low pixels here in Draw.
Now, the way that a pixel array works in p5 GS
is a little bit tricky.
And I have an entire video dedicated to just that.
So if you haven't used pixels before in p5 GS,
go find that video now and then come back.
There'll be a link to it in the description of this video.
But what I'm going to do here is I'm
going to add two loops, one for the x values,
one for the y values.
And then I don't need beginShape and endShape.
I don't need any of this stuff.
I can actually get rid of so much stuff from this example.
Then I'm going to say update pixels at the end.
And now what I need to do is I need to calculate an index,
which is x plus y time-- this is what I cover in the other
video--
x plus y times width times 4.
And then I want to say pixels that index equals 255.
And then that's the red value.
This is the green value.
This is the blue value.
And I'm going to say plus 0 just so you see.
Plus 3.
And this is the alpha value.
So if I do this, I should just see, ah OK.
So what just happened here?
Something weird just happened.
It so happens that my machine is actually
a high-density display.
It's a Mac retina screen.
And so the way high-density displays work
is they actually pack four pixels in for every pixel.
And I don't want to get lost in the discussion of that,
but I can kind of fix this issue just by saying pixel density--
I can turn off the sort of high-densitiness of the display
by just saying pixel density 1, 1 pixel per pixel.
And now you can see-- there we go.
So let's look at this now, and let's say I say random.
For each pixel, I'm going to give random.
I'm going to pick a brightness, which is a random value, rr.
What?
Adam is auto-completing me like I'm a crazy person.
OK.
So you can see, there we go.
We've got, you know, back in olden times,
when you might have used something called
a television, the telly, and you couldn't get your antenna
to connect to anything, you would see this kind
of noise, static, randomness.
That's what it looks like.
Every single pixel is a random grayscale value
between 0 and 255.
This is making me feel crazy.
So now what do I want to do?
You can see that there's no relationship between any pixel
and the pixel next to it.
And I could say no loop, just so we could
take a closer look at this.
And you could see it's zoomed in.
You could see every pixel is just
sort of a random value with no relationship.
So now, what if I want to use Perlin noise?
So let's [MUTED] one-dimensional Perlin noise for a second.
What if were just to say, I have a global--
I have a variable called xoff.
And what I'm actually going to do for every pixel
is take a noise value at xoff and multiply it by 255.
You can see now every single pixel
gets a single noise value from time
0 in one-dimensional noise.
Every single pixel now has this color.
Now what if I start marching through the one-dimensional
noise, and I were to say, OK, for every pixel change
xoff by some amount?
It's kind of interesting.
I get this sort of like weird streak.
Why do I get this weird crazy streak?
Well, let's think about it.
First of all, why is it going down?
Shouldn't it go across?
Let's look at those loops again.
The inner loop is the y loop.
So actually, for every x, I'm doing all the y pixels.
Let me move y to the outer loop.
Look.
Those streaks are going across.
What's happening here is that-- and we can kind of
zoom in here for a second.
Every pixel is changing ever so slightly,
according to Perlin noise.
White to gray to gray, and then when it gets to the end,
look at the color that's over here.
It's hard for you to see, but the color that is over
here just comes right back and picks up in the next row.
So in the grid, if I have one-dimensional Perlin noise
values, I'm getting a variety of continuously smooth numbers,
but then the one that is here, it's
similar not to what's above it, it's
this one is similar to what's before and after,
but has no relationship to what's below.
So what I actually want to do is also give Perlin noise.
This is where I want to have the values.
I don't want to visualize in two dimensions,
one-dimensional Perlin noise, I want
to visualize two-dimensional Perlin noise.
So if I come over here now, and I
were to say let me also have a y offset,
now, this is a little bit strange.
Now, where do I initialize these?
So the y offset, right, if I'm looping like this, x offset
is going up, up, up, up, up up.
Then x offset should reset and y offset should go up by 1.
Up, up, up, up, up, up, up, x offset reset, y offset
goes up by 1.
So what I actually need to do is x offset needs
to be initialized here, because for every single row,
I want to restart x offset back at 0.
And then I want noised then I want noise of x offset,
y offset and then after every single row,
after every single inner loop, I want the y offset to go up.
And I forgot I have a variable called increment.
So let me just add that in here.
And I'm going to run this again.
And now look what I've got here.
I've got something that appears rather cloudy.
Why?
Because pixels are similar to the pixels around it.
It's very much like blurring an image.
Actually, if I took that random snow, that random static
and blurred it over and over, blur, blur, blur, blur, blur,
that's like that cosine interpolation
function that I referred to all the way back about how the
Perlin noise algorithm was generated in the first place.
So a blur, the sort of blur convolution--
I can't believe I'm using a technical jargon--
this blur convolution meaning a way
of like mixing pixels together.
But this blur thing is very similar to sort of smoothing
out that randomness.
Averaging.
So I could do things, by the way,
to like increment just 0.1.
Oh, and it's not looping.
So let me turn loop back on.
And let me make the increment bigger.
You could see what that looks like with a bigger increment.
There's more changes.
I could make the increment be something even smaller.
And you can see how this sort of noise, this noise field
appears.
So this is a literal visualization
of the two-dimensional Perlin noise values.
And as you might imagine, you could take those values
and map them to lots of other things like bumpy terrain
or a flow field, which is a thing that I'm ultimately
going to get to in the next particular video.
So hopefully this helps you understand
a bit more about how the Perlin noise
two-dimensional noise works.
And I'm going to do some more of it in the next video
to make a flow field.