Welcome to part two of a multi-part series
about Perlin Noise in which I eventually
am going to build a simulation like this, which kind of looks
like a hair, lots of hair, or a river or something.
Eventually, it will be rainbow colored.
But I am talking about Perlin Noise,
ultimately how to deal with multi-dimensional Perlin Noise
and how to make some interesting pretty graphics from that.
So where I last left off previously
on Perlin Noise explained, I was making
a mess of this diagram trying to explain
how Perlin Noise is calculated over multiple octaves.
So what I next need to look at is how do I actually
call the noise function in p5.js or Processing,
and get values out of it, and make use of those values?
So one thing that is true is if you call the random function,
random you can give it a minimum and a maximum argument.
Meaning, I want a random value between 0 and 50.
If you give it just one argument,
it will always assume the minimum is zero.
Anyway, there's a variety of ways we could think about that.
But this is probably something, if you're
watching this video, that's familiar to you.
You might think that's the same thing to do with Perlin Noise,
right?
OK.
So I could get my crazy, random values
or I could get my nice smooth random values.
And when I want the crazy random values,
I want to give a minimum and maximum.
When I want the smooth values, I want
to get the minimum and maximum.
But there's a problem here.
Because of the nature of how Perlin Noise is calculated,
you can't simply--
you need to give it a different argument.
And that argument is--
in my previous discussion, I talked
about thinking about the space of one dimensional noise almost
as a graph along an x-axis.
And you could think of the x-axis as time.
But we can also now take a moment
to just think of this as x, the x-axis.
And you'll see this, a variable's named in a lot
of Perlin Noise examples as x off because what you want
to tell p5 or Processing that you're--
you want to tell those environments is
I want the particular Perlin Noise
value at this position along the x-axis.
So let's actually go and do that.
So I'm going to go look at this.
I'm going to go over here and I'm actually
going to just go over to the JavaScript console.
And I'm going to call--
first of all, I'm going to call the random function
just so we can see that.
So if I call the random function with no arguments,
I get some random value between 0 and 1.
If I call it with one argument, I'm
going to get the value between--
I'm going to get a random value between 0 and 100.
21.
Lucky 21.
Now, incidentally by the way, never mind.
I was going to show you that if you give it a-- let's do this.
If you give it an array and I say random A,
I will get a random value from that array.
Nice to see.
So let's refresh here.
Now, let's call the noise function.
Now, I got not a number.
So noise cannot be called without an argument.
So given my previous discussion, we might say, OK.
Well, what if I want a noise value between 0 and 100?
You might think to do that.
OK.
I got 0.577.
Let me call that again.
Hey, I got 0.577 again.
Let me call at 100.01.
Look at that.
I've got a very similar number, but it's a little bit
different.
See, how this number that I'm passing into noise
is really like time.
It's where am I along this x-axis?
What's my offset along this pre-calculated--
In truth, it's not like this big array it's already calculated.
There's a formula for doing it behind the scenes,
but it's this pre-existing set of values.
So if I say I want the noise value at 100,
I'm always going to get the very, very same value.
Now, you'll also notice here that the number I got
was 0.577.
Let's try saying let me get noise at zero.
How about noise at 200.
Notice the value is always a floating point value
and it doesn't seem to be greater than 1.
It also seems to be clustering around 0.5.
So noise values actually don't have a uniform distribution
between them.
By the way, the range is between 0 and 1.
They also don't have a uniform distribution.
If I were to say to you let's look at--
let's say I want to pick random values between 0 and 1
over time.
And over hours and hours, and days, and days, and days,
how often do I pick 0.5, versus I pick 0.75,
versus I pick 0.05?
I should get a uniform distribution
for pure randomness.
That's the nature of randomness.
With Perlin Noise, you'll actually
see that the values cluster around the mean or the center,
0.5.
So the distribution looks more like this,
which is like a bell curve or a normal distribution.
That's another topic for another day.
But interesting to note that or point that out.
OK, so there I am.
This is what I'm doing.
I'm getting those values.
So let's now actually make the sketch do something.
I'm going to create a variable.
I'm going to call it x and I'm going to set it equal to 0.
And I actually don't know why I'm doing that.
First thing I'm going to do is just draw a circle.
I going to use the ellipse function
and I'm going to just change the size of this to a 400 by 400.
And I'm going to draw the circle in the center of the window
and make it 24 pixel diameter.
And let's just see that I have a circle there.
There we go.
See this circle here?
Let's make that a little bit bigger.
OK.
And now, I don't know.
There's some extra nonsense here by accident.
Get rid of that.
OK.
There you go.
See that circle?
There it is.
Now, let's make a variable called
x and set that equal to 200.
There we go.
Now, let's do something different
and let's set that x equal to a random with value.
Now, you can see every moment in time
I'm getting a random value.
OK.
Now, I want to instead have noise.
So let me look at-- let me comment this
out and say var x equals noise.
And then, I'm going to say noise at time 100, something random.
We'll notice it's over here.
No matter what you do, the noise function
will always return values between 0 and 1.
So one thing that I want to do is
take that, the result of that function which
goes between 0 and 1, and map it to be zero and width.
In truth, I could just multiply by width
because multiplying a number between 0 and 1
multiplies it by width, gives me a value between 0 and width.
So now if I refresh this--
did I not hit save?
I didn't hit save.
There you go.
You can see every time.
Now, every time I refresh the page,
the sketch creates a new set of Perlin Noise values.
So even though the values are fixed for that moment,
if I say noise 100, I'm always going
to get the same value over, and over, and over again.
If I refresh the page, I'm going to get a different same value
over, and over, and over again because the Perlin Noise
space is seeded.
And p5.js is going to reseed it every time
you refresh the sketch.
And you could use the noiseSeed function to fix the seed,
but that's a little bit of an aside here.
OK.
So we're getting something, but the number isn't changing.
Why?
Because that number is the same all the time.
So what I want to do is make this, instead of a fixed
value of 100, I want to call this something like x offset.
I want a variable.
What I want to do is I want--
I don't have my graph here anymore.
But if this is my graph of Perlin Noise,
I want to move throughout the space.
I could move forward or backward.
I could move quickly.
I could move slowly.
I want to get new values every time through draw.
So here, all I can do now is say x.
I can say x offset here.
And I can say x offset plus equals 0.01.
So let me do that and refresh this.
And you can see now.
You can see how it's random, but it's smooth.
This is now the difference between this.
Now, you're looking at Perlin Noise values
over time represented as an exposition width
compared to random values over time
represented as an exposition.
So, see the difference.
I'm not looking at that graph anymore.
I'm just looking at a single value,
but I'm looking at it each moment in time.
So hopefully, this gives you the idea of Perlin Noise,
of how Perlin Noise works in it's core level.
I think what I'm going to do is I'm
going to end this particular video and the next video,
I'm actually just going to show you
how to draw a graph of those values which
might be somewhat useful.
Don't go.
Stay with me please.
[LAUGHS]
This is an addendum to this particular video,
which is that I forgot to mention something important.
Which is, I picked this number 0.01 somewhat out of a hat.
And it really-- this number really means something.
It was really a vital, crucial number
in how the values will behave.
So let's look at this sketch again
and look at how it's behaving.
Let's think about this graph up here
that probably has a lot of glare that you can't barely see.
But think about how it might be to jump ahead really quickly,
or to move really slowly.
And you can almost think about that
as the speed of this thing.
How quickly are you getting those new values?
So for example, if I were to change this to 0.001
and refresh the page, you can see
it's like moving very, very slowly because it's
taking a lot of time to slowly walk through that Perlin Noise
graph.
But if I were to change it to 0.1 and hit refresh,
you could see it's moving much more quickly.
If I were to make that number very large, like really large,
if I were to say it's like 100, this
is essentially just like randomness
now because it's moving so far ahead in that Perlin Noise
space that an idea of the values being tied
to the previous one or the next one
is almost lost because you're jumping so far ahead.
However, it does look different than random.
If I go back to this random--
because you'll notice the random values
are getting further along to the edges.
That has to do with that uniform distribution of values,
as opposed to Perlin Noise values
which tend to cluster around the center.
OK.
So I'm going to do a little bit more with you
in the next video just about one dimensional Perlin Noise
before we move on to two dimensional Perlin Noise
and looking at how you might make procedural textures
in Perlin Noise.