OK.
Back with another video about Perlin noise.
So far, I've got the basics of Perlin noise,
and with this particular sketch is doing
is just tying the exposition of a circle
to Perlin noise values over time.
What I want to do in this video is show you two things.
One, is I want to add the y-axis just
to sort of see what happens if I do that.
And then also show you how to actually graph those values
over time as opposed to just seeing sort of a single value
over time, which may be useful, I think.
So let's do that briefly.
OK, so what I'm going to do is I'm going to add--
now, what's really confusing here-- ah,
is that I kind of was about to type yoff equals 0.
And that's not really a good idea,
because in the next video, I'm actually
to look at two-dimensional Perlin noise.
What does it mean for Perlin noise
to exist in two-dimensional space?
And in that sense, I'm really going
to have an x offset and a y offset.
I don't really have a y offset.
Really, what I have is I have a y value
where I want the ellipse to be.
So I could do this, right?
And then put y here.
I'm just going to add a y value, which is also mapped to noise,
and I could have that be mapped between 0 and height.
And then draw the ellipse at x and y.
So let's see what happens there.
But you can see it's just moving out along the diagonal.
Why is that?
Because the x and y values are always equal,
because I am asking for--
I think we're going to need a visual reference here.
So I'm going to really attempt to get a nice--
this is the graph of Perlin noise.
If I'm saying, hey, draw a circle at an xy-position
and have the x value be tied to this part of noise
and have the y value be tied to this part of noise,
x and y are going to be equal, meaning in the canvas
if x or y are equal, it's somewhere along this diagonal.
So what I want to do is I want to have x and y
both be Perlin noise values but not be equal.
So I could have an entirely other Perlin noise
space, one-dimensional space, and get the y values from that.
Another thing I could do is I could just say, hey,
let me just get the y values from some other part,
like I'll get the x values from here,
and I'll get the y values from over there.
So in that sense, what I need are two x offsets.
Like, I want an x offset 1 that starts at 0
and an x offset 2 that starts somewhere else, like,
really far away.
How about 10,000?
And so I want the x value from one offset, the y
value from another offset, and both of these,
they move through Perlin noise space.
Eventually xoff1 is going to get all the way to 10,000.
And you're going to see repeating values.
But it's going to take so much time and xoffset2 will
be somewhere else, and you'll never notice that.
So let's look at this.
And now you can see I have this kind of Perlin--
it's almost like wandering sporadic bee
buzzing-like behavior.
It's kind of nice, actually.
I've got to move the mouse out of the way.
So this is actually, I think--
I kind of--
I think this is a good moment to--
I don't have this prepared.
[MUSIC PLAYING]
Right?
This is a visual representation of Perlin noise and music.
OK.
Ah.
[INAUDIBLE]
OK.
Anyway.
So this is the idea.
I forgot what I was doing, because I
was so excited that I had a moment to do something weird.
Anyway, so you get the idea.
Now, let's think about-- it's kind of interesting-- oh,
there's so much that I want to keep going with this.
Like, what if I put the y values a little bit behind,
you know-- but anyway, this just gives you the basic idea.
Now, let's do one more thing in this particular video.
And yes, so in the Chat, a question was asked,
and the question might be around could you
give two-dimensional arguments to noise?
And I could do that.
And I'm going to do that in a moment.
And in fact, that's how I'm really
going to deal the two-dimensional space.
But I'm showing you a kind of a way
of getting multiple kind of single values
for two different parameters using two different parts
of the noise space.
I know that's confusing, but it will all become clear
or if it doesn't become clear, then all I
have to say to you is--
[MUSIC PLAYING]
--this, because I don't--
it's like-- oh.
I have a cold so nothing is going well.
All right.
OK.
Oh, it's very hot in here.
OK.
So anyway, OK.
I'm just going to graph the values now,
because I don't know what I should be edited out
of this, this particular--
all right.
Let's graph the values, because I think
that's going to be useful.
OK.
So what I'm going to do is I'm going to comment
some of this stuff out.
And I am going to write now a little for loop.
So what I want to do is I'm going to say var x--
and I'm going write var x equals 0, x is less than width,
x plus plus.
And I want to draw a--
I'm just going to draw a point at x comma 200.
And I'm going say stroke 255.
So now I'm going to go back to the sketch,
and we see there's this line going across the middle.
Why is there a line going across the middle?
Because I have a loop for every single x value,
draw a point there.
All of the points are next to each other.
It looks like a line.
So now what I want is I want this y value to not
be Perlin noise.
I mean, I want it to be Perlin noise.
The heat, the 90-degree New York City heat.
So first, I'm going to say random height.
Now, look at this.
Now I just got a whole lot of random crazy points everywhere.
So first of all, I want to stop this animating for a second.
So there's one way I can stop it from animating,
which I could say no loop.
So now I have a bunch of totally random points.
And what I actually want to do here is I want to connect them.
So I'm going to say beginShape, noStroke, or no noStroke, 255
and noFill.
And then I'm going to say endShape.
And I'm going to draw, I'm going to say vertex.
I forgot what I was doing.
So instead of drawing them in single points,
if I say beginShape, endShape with a bunch of vertices,
it's going to connect them all.
So now I'm going to refresh this,
and you could see this is what I was trying to draw
for you on the board before.
This is now essentially a graph of random values,
a random value for each point x along the x-axis.
And by the way, if I allow it to animate again,
this is what you get, a lot of totally random values.
New random values every frame.
But I don't want to put that in.
Now, what I want to do now is change those
to Perlin noise value.
So really what's going on here is
the y value is a random value.
So instead of y being random, what I want now is to say y
equals the result of the noise function.
So first, let me just plug in one point of time like noise0.
And we could see, OK, first of all, where are all the values?
Well, remember, I get a value between 0 and 1.
So one thing I certainly need to do again is map that value.
And you know what?
I'm tired of mapping.
It's going to be simple just to like multiply this by height.
So you can see every time I refresh it,
I get one value across.
That's because, as I move from pixel to pixel,
I'm not moving through.
I'm not moving through this noise space.
I'm just staying at one point in time.
So now what I want to do is I want
to add an x offset variable, start that at 0,
get the noise value at x offset and go up by some amount,
like 0.02.
And now when I refresh that, you can see
there's my Perlin noise graph.
This is what Perlin noise looks like when I graph it.
Smooth randomness, as compared to random.
So you can really see the difference now.
I want to do a few more things with this.
There's a couple things I want to do.
One thing is, I just want to show you
what happens when I change this particular parameter.
So let me make this 0.01 instead of 0.02.
And actually, let's do something-- oh,
the other thing, let's loop it.
So you can see I'm adding the loop back, and it's animating.
But remember, the Perlin noise values are fixed.
So I'm always getting--
if x offset always starts at 0, I'm
going to get the same values.
So let me do something where I make an increment variable,
and I say that's 0.01.
So I'm going to increase by that increment variable.
And now I can do things like say what if increment is 1,
you can see what that looks like.
What if the increment is 0.001?
You can see how smooth that is.
And I could easily tie this to a slider.
That would be a nice thing to do.
And you can see how the graph changes
based on that increment value.
Now, there's another thing I could
do to this, which I think would be kind of interesting.
What if I want to kind of scan across the Perlin noise space?
What if I don't always want x offset to start at 0?
So in this case, I could say start equals 0,
x offset equals start, and then I could say the start also
changes by that increment.
Now look at this.
Now I'm sort of seeing-- and this is basically
exactly what I did.
I have a terrain generator example,
which does this in two dimensions, which I recorded
before I made this video.
So things are a little strange and out of order.
But you can go to find that if you look for YouTube Terrain
Generator Shiffman.
You could see sort of-- but this is
exactly what's happening now.
This is a one-dimensional terrain generator.
I'm moving across this space, moving across the Perlin noise
space over time.
Boy, there's so many things I want to add to this.
Let me think about it.
OK.
One thing I think I should mention here,
by the way, this kind of looks like--
it's like a waveform, right, like a sine wave?
I could easily just, by the way, change the noise function
to sine.
And notice what I get.
I get a sine wave.
Now one thing the sine wave-- unfortunately,
the sine function gives me a value between negative 1 and 1.
So what I really need to do is change the mapping,
like add height divided by 2 and multiply
by height divided by 2.
And now you could see the sine wave.
But interestingly enough, these algorithms work the same way.
They're just functions that when you
pass in a value that changes over time,
give you a new value, whether it oscillates perfectly
or it moves kind of randomly.
So there's a lot of possibilities here.
And in fact, you could add noise.
I could also, like, I could say like noise xoff times 10 plus--
oh.
No, no, no, no--
y equals-- how come that didn't work?
I want to add-- oh, no, no, no, yeah, yeah-- y is-- maybe
10 isn't enough-- times 100.
Yeah.
You can see now there's the sine wave with a lot of sort
of like randomness, a little bit of randomness thrown in,
because what I actually did-- and it's not offset very well.
Let's actually make this correct.
I'm going to show you, while I'm here, right?
Let's say I have a noise value, which is noise of x offset.
Map the noise value between 0 and 1
to between like negative 50 and 50.
And then let me take a sine value, which is map
the sine wave of x offset, which goes
between negative 1 and 1 to between 0 and height.
And then what I want to do is say
that var y equals those two values added together.
And now you can see I have the sine wave with a little bit
of noise added.
And this, by the way, if you took like letter forms,
and you wanted to make them appear a little bit
like handwriting, you could add a little bit of Perlin noise
just to the pads between those letter forms.
So you can see there's a lot of interesting possibilities here.
I could kind of do the opposite.
Like, I could say, well, let me make noise the primary thing
and make the sine wave just, like,
a little something that adjusts the noise.
And you could see now--
I don't know if-- this is harder to see,
but there's a little sine wave in there
that's kind of adjusting the noise
in a sort of perfect amount, I think, by the way
that I changed that.
So there's a lot that you could play with here.
So I'm kind of messing around, because I'm
nearing the end of the point where what I ultimately
want to do is look at then this is all
about noise in one dimension.
I'm drawing this graph in two-dimensional space,
but my values live in one dimension.
Thanks for watching this video.
I'm ready now in the next video to move
from one-dimensional Perlin noise
to two-dimensional Perlin noise, and I'll see you maybe
in that video.