Welcome to a new multipart
series about Perlin noise and creating a 2D Perlin
noise field, which you can visualize in a variety of ways. Eventually maybe we'll make
a nice rainbow colored one. So ultimately at the end
of this video series, which is going to be two or
three short videos, I want to show you how to
make this particular project. But before I can
get there, I just want to answer the question
in this video, what is Perlin noise, and do a quick
p5.js JavaScript sketch that shows you the basics of it. So let me come over here
and make a little diagram. So there are two functions
in the p5.js library. This is also in
processing as well. There are more
than two functions. But there's two functions
that I'm thinking of right now that are relevant
to this discussion. One function is called random. Another function
is called noise. Now, this is a
little bit confusing, because in truth, the
word "noise" really just means random. If you think about audio
noise, the [STATIC] sound. It's kind of like
random audio gibberish. But the noise function in
both processing and p5.js refers to a particular kind
of noise called Perlin noise. Now, Perlin noise is named
for a computer scientist named Ken Perlin who was
developing algorithms and has been developing
algorithms for many years, but in particular, in the
1980s for a film called Tron. Now, I'm not
referring to whatever that recent one was called. I don't even know if
it's recent anymore-- Tron Legacy, I think--
the original Tron from sometime in the 1980s. And one of the things that
you might have noticed in computer-generated things
that you experience is, maybe there is a-- in
the scene, there's-- does this show my
horrific artistic talent? There is a vase
sitting on a table. And at one point in computer
graphics, there's this-- OK, so this is [INAUDIBLE]. There's this idea of a texture-- I should re-record this. But I'm going to keep going. There's this idea
of a texture, which is this stuff that is painted
onto that three-dimensional form. Now, at one point,
computer animators had to hand-make these
textures if you wanted the vase to appear like-- look
like wood or marble. I don't know why you'd want
a wood vase, but whatever. The point is, Perlin
noise was originally developed for procedural
textures of objects, meaning, how do I create-- I could-- as an
artist, I could render some sort of wood-like texture
just with my pencil and paper, and scan it, or use some fancy
Photoshop Illustrator program. Or I could have
an algorithm that generates all the pixels to
make that kind of texture. So that's what Perlin noise
was originally developed for, procedural textures for
three-dimensional objects in computer graphics. Now, Ken Perlin actually won
an Academy Award for that. I don't know why-- that's my terrible
drawing of an Oscar that looks nothing like an
Oscar for technical achievement. So that's a little
bit about back story. Now, circling back, I
mentioned there is a noise function and a random function. The noise function gives
you Perlin noise values. So hold off on the idea
of procedural textures. I have an eraser here. I'm going to come
back to that in part 2 when I look at
two-dimensional Perlin noise. But in this particular
video, I am just going to talk about
one-dimensional Perlin noise. So what do I mean
by one dimensional? Let's think about numbers
over in a single dimension. Let's just pretend for a moment
that that dimension is time. It's a useful way of
thinking about it. So this is the axis
of time-- getting very deep into philosophy here. This is an x-axis of time. Let's think about
the random function. So let's say every two-- at 60 frames per second,
like an animation, like a p5.js or
processing sketch, I'm calling the random function. I'm going to get a
random value over time-- random, random, random, random,
random, random, random, random, random. OK, I can't pick random numbers,
because I'm a human being. But you can imagine, I might
be getting random numbers between 0 and 1 over time. So that's all right. And this will look if
I were to graph it, like some kind of big mess. Now, Perlin noise
in one dimension has the same sort of idea. Let's say I want to
get random numbers. This pen is terrible. I don't even know if
you can read this. Time out. Back with a new marker. This isn't so great, but
let's see how this does. So I'm going to draw now
the x-axis of time in blue. I wish I had a pink
one or a purple one. Those are my favorite colors,
in case you were wondering. But I don't. And I want now-- instead
of random values, I want Perlin noise
values over time. So I'm going to draw you in a
visual approximation of what it might look like,
something like this. So the idea here--
and the idea here is that ultimately at its
core, Perlin noise gives you smooth, random numbers. What do I mean by smooth? I mean that a random
number that you might pick at any
point in time is related to the random
number you might pick later, a moment later, or
the random number you picked a moment before. Whereas in-- so this is random. This is noise, Perlin
noise, that is. In the core random algorithm,
the actual random algorithm itself, those numbers
aren't related at all. You pick-- I'm picking random
numbers between 0 and 10-- 9, 2, 7, 6, 1, 9,
4, 8, 9, 2, 1, 3. I pick 9 a lot apparently. But with Perlin noise, I
might pick numbers like this-- 2, 3, 4, 3, 4, 5, 6, 5, 4, 5,
6, 7, 5, 6, 7, 5, 6, 7, 8, 9, 8, 7, 6. Boy, this is like Perlin
noise performance art. I won't do it again. But that's what that was like. I'm going to do a whole separate
video, which is me reading aloud Perlin noise values. I'm sure people
want to watch that. Maybe I'll even sing them. Anyway, so you get the idea. That's the core difference. Now that's how it works. Now, there's two more pieces
I really want to get to here. One is, OK, I get it. I get the difference
conceptually. How are these values generated? Well, actually,
they're generated-- just ultimately,
Perlin noise is just a lot of math on top of the
actual random function itself. So let's look at this. And I'm going to grab
a paper towel here. And I'm going to
explain to you-- I put my best effort how the
actual Perlin noise algorithm works underneath the hood. Now, Ken Perlin has revised
the algorithm several times over the years-- I don't know, several one or two
times, three times, who knows. And you can kind of-- I'll try to post some links
to different versions. There's update-- But
I'm going to give you the basic gist of it. So let's say-- so let's
go back to random. Let's say I'm going to pick
random values over time to start with. And what I'm going
to do is actually say I'm going to pick them
every 10 units of time-- 10, 20, 30, 40. So I'm going to
pick-- and I'm going to pick those random
values with some amplitude between something
like 0 and 100. These are all made-up values. So I pick a random number here. Then I pick a
random number here. Then I pick a
random number here. And then I pick a
random number here. Now, the next thing
I want to do is do an interpolation function. What is an
interpolation function? Well, here are some numbers. Here's me interpolating
between them. That's like linear
interpolation, I think. I just draw a line
between the values. But maybe I want to do
something a little nicer. And a one possibility, a
one kind of interpolation, is called cosine interpolation,
or sine interpolation probably, which means, let me draw a nice
curve between these values. So here is the start of
my Perlin noise function. And let's just
pretend I also had to pick a value at 0, which
let's say I picked this one. So now I'm going
to do that again. This time, however, I'm going
to pick those random values every five units of time-- 5, 10, 15, 20, 25, 30, 35-- I don't know why I'm writing-- 40. And instead of picking
between 0 and 100, I'm just going to
pick between 0 and 50. So let me pick random values. And now, just using
a random function, now I'm going to do this. Now let me do that
one more time. And I'm going to pick them
every two and 1/2 units of time. And I'm just going to
go between 0 and 25. And now I'm going to just-- and it's going to be
something like this. Now, what if I were to do this
possibly eight times, 16 times, 25 times, however
many times I want, and each time I'm having
essentially the amount of time that passes before I
pick a new random number and I'm also having
that amplitude? Having-- is that a-- I'm having it. I'm having it for lunch. But I'm halfing it-- having it. I'm dividing it
by half, whatever. What then if I take all of
these and add them together? Now, I'm going to lose
my mind here really trying to do this
visually accurately. But let me just-- let's just say for right now
I'm going to take this graph and add it with this graph. I'm going to get something
that looks like this. It has the essential-- I'm adding these values
together with these values. It has this same basic quality. It looks kind of like
that original shape. But there's lots of
little variations based on these little
tiny variations. And this is essentially how
Perlin noise is calculated. And these, by the way,
are known as octaves. So Perlin noise is calculated
over a number of octaves. And essentially it's a
bunch of random waveforms. And those waveforms, their
period and their amplitude change over those octaves
and get added together. And in that sense, it has
a fractal-like quality. You might have to go back
and find some of my videos about fractals if that concept
doesn't make sense to you. But fractal is this idea
of self-similar shape, meaning at any zoom level,
it's the same thing. And because we're getting
finer and finer detail as we go through these
different octaves, if we were to zoom in
here and blow that up, we might see something that
looks something like this, almost like that original one. So Perlin noise, this is
really how it's calculated. OK. I'm glad I'm almost
done with this video, because in the next
video, I'm just going to dive in and write
code to sort of visualize how it works. But let's just make
one more point here. Actually, you know what? I'm done with this video. This is the end of
this first video, which is just explaining
the history of Perlin noise and how the algorithm works. The next video I
need to look at-- OK, well, if this is how
I'm getting the Perlin noise values, how does that tie
into the noise function? How do I call it? And how do I get
those values back? And how I use them in code? OK, this concludes
this particular video, which may or may not have
a variety of mistakes and confusing aspects to them. And you, the internet,
will let me know. Thank you for watching.
