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.
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.