Hi, welcome to this new video. In this session, we're going to start learning a little
bit about a different kind of randomness. So the notion of noise, or
in particular the notion of Perlin noise, which we're going to learn about today,
is incredibly useful for us designers in all sorts of
different occasions, right. Perlin noise is a type of gradient
noise developed by Ken Perlin in 1983. And we can use it just invoking a simple
function that is usually inbuilt within something like processing or in other
libraries, as you can see on the right, what we obtain out of calling,
apparently noise function. If we would distribute the values over
a field in a coordinate like x and y, we would start getting not just
a complete random number, but rather a random number that
it's part of a larger field. Depending on how we control some
of the parameters of this noise, we would actually get, as you can see,
in the different images, different result. So we're going to be introducing some
of the parameters of this noise and how we can control it to our advantage. And we're going to be doing
that in a pixel array or in a grid,
as we have been learning so far. So it's going to really give us resources
to be able to design and operate. Let's look at some of the variables
that this noise will actually have. So by default,
the noise value within processing just asks us to produce
a coordinate like an x and a y. But we can actually control the scale
of the noise by introducing a variable that we would
call the noise scale. That variable can be very small, and
we'll kind of learn how to increase the scale of the pattern by introducing
a variable within those coordinates. There's also the level of detail. Level of detail, will see the amount
of detail that the noise would have that's actually be
controlled with an integer. We're going to start with a default of 3,
but we can see what are the different
results that we get by changing that. And then also the way the falloff,
meaning the way in which the transitions between white and black values or
zeros and ones, in this case, often noise would actually play
out that could also be adjusted. It would feel like a sense of what
is the degree of blurriness or the degree of the detail that is actually
being perceived in this gradient noise. So understanding these variables
intuitively is something that we can spend a little bit of time doing, just creating an interactive
visualization of this noise. So let's see how we can
do that in processing. So here we are in our template
the only difference that I've done so far to this template is that I'm going
to be working in 600 by 600 canvas. I would like to work in a square
canvas to kind of visualize some of the parameters of this noise
a little bit more clearly. So let's start with a draw function. We could do this in the setup so
just as a single image. But I do want to start
introducing some variables. Actually, this is the first variable
that we're going to be working with in the noise scale,
which let's just keep that there. Let's create a simple grid first. The first thing we really want to do
is visualize some pixel information or a grid in the screen. So in range between,
let's say, 1200, right. And then, as we've done so far as well,
we're going to do a nested loop. And x, it's going to be equals to i x 5. This is going to be the coordinate. Let's create a bit of space here. The coordinate for our rectangle. The rectangle is going to be the primitive
that we're going to use to visualize this grid. But at the same time,
the color of this rectangle would be basically the noise information, right. So let's do Y = j times 5, right. This is kind of for
creating the rectangle coordinate. And we've done this before, so
hopefully you're familiar with the idea of creating a grid that covers
the whole screen, right. So we have this. Let's do something like no stroke for
the style and feel. We could say it's white
because if we have a black background, at least we
would know that we have. So if we have everything white,
it's working. We could say something like stroke 0, right, if we wanted to see the grid. As you can see, it's a very dense grid. I'm trying to create enough samples for
the noise so that we can actually see it, right. So, well, let's just create
our first noise variable. And we can simply say n =, n is going to be a variable that
will keep the noise information. You can be more descriptive here,
but we're going to keep it simple. So noise, we could be doing this in 2D. If you're thinking in 2D, there would be
a graph with ups and downs, peaks and valleys. But I think that for us in design is quite useful to start
thinking of noise patterns as well in 2D. So as this kind of pixel array. So we could just simply put x,y here,
right. And meaning that the information
that we're inputting is the coordinate of the pixel. And that's going to
return us a noise value. Notice that just by the coordinate and
using the same kind of seed, sorry, the same kind of noise information, we're going to be getting this,
a consistent noise pattern. So let's use that in the fill. So instead of using 255,
we can put here n, right. And we see that all the pixels
are currently black, right. So let's change this a little bit and let's say back to no stroke
here because I don't want the, The lines of the rectangles to
be changing the value, right. So what might be happening right now is
that the values of the noise are values that go usually between -1 and
1, if I'm correct, I believe. That's going to be basically
a value very close to 0 and that's going to look very dark. So let's start by multiplying this by 100,
right. And you see that we start seeing
a little bit of this coloration, right. So if you think that we can
actually get up to 200, we're going to be able to see it
a little bit more clearly, right. So we do have this kind of pattern,
but it's very. Yeah, it feels like, I mean,
there is some repetition. We can see sequences, but we could actually manipulate
this pattern quite a bit, right. So let's start by introducing what
I wrote up here, a noiseScale. So let's create a variable
called noiseScale and reduce the size of this,
of the noise by 0.02, right. So here we're going to use global. Let's just copy paste that, noiseScale. And then let's multiply here. Sorry, let's just be a little bit more. I always kind of forget of being
kind of pythonic in the way we write variables, right. I kind of sometimes transitions
between different standards, right. So we have noise scale with an underscore,
right, just to be a little bit more consistent
with the way we write variables. So x times noise scale,
y times noise scale. So both the X and the Y. Let's just increase
the window here a little bit. Both the x and the y being
multiplied by that value, right. So let's see what we get. And here we see a little bit. What you have to imagine here is that
we're actually zooming in into the noise, right? So the noise,
just by kind of shrinking these variables, we're actually kind of sampling kind
of a much smaller portion of the noise. The noise, imagine it's an infinite
field with this kind of detail. And we can zoom in or out and depending
on what section of this noise we sample, we're going to get a different result,
right. So again, you might be
interested in creating something that has some of these kind of formations. So just being able to control this,
it's incredibly useful, right. As I mentioned in some of the slides, we could include something
that is a noise detail, right. And obviously that gives us,
so noise detail. The noise detail requires one number. The first number is going to
be the level of detail, lod, and the falloff, right. And here again, the invitation is for
you to play with these variables and see what different results you get. So let's do a level of detail of three and a fall off of. Maybe the falloff will be
something like 0.5, right. And that's what we get with those values. Let's try a level of detail of 9. And it might be difficult to perceive, but we are kind of getting kind of a crisper,
more detailed noise. Just go to level of detail of one and you can see the difference between 1 and
9, right. Let's leave that at 3. But I would like to, in order just to
conclude this kind of conversation about how the information of the noise
could actually be visualized, right. I really like being able
to dynamically change the attributes of the noise so
that we can see them. So let's just do that,
the noise scale, right. And this is a technique that I invite you
to try with all the different variables. So here we could actually say that the
noise scale is going to be equal to a map. We covered the map function. If you haven't seen that video,
I invite you to look back on it. Map is going to allow us
to transform one variable. In this case,
it's going to be the mouse x coordinate. It's going to transform this variable
from one domain to another domain. We first provide the first domain. We're going to say that the mouse
x moves between zero and 600. You can use canvas width here
instead of 600, if you decide so. And we're going to transform
that range to something. We know that the noise scale, it works for
us as a very small value, right. So we're using like 0.02, right. So let's just go from 0.01 to 0,1, right. Which again,
it's probably a decent amount of increase. So we're giving some interactivity
to the system by allowing the mouse x coordinate to change
the scale on the left side. If the mouse is on the left side,
it will be closer to 0,1 and if it's on the right side,
it's going to be 0,1. So let's see. And you can see now that when the mouse
is on this side of the screen, or when it's on this other
side of the screen, we start seeing the scaling of this
Perlin noise effect change, right. That's just a kind of a quick
example of A, what is Perlin noise? And B, how we can start manipulating
it and really first calibrating it so that we actually have something
that suits our needs and something that we could use to maybe store
or differentiate data in different ways. I invite you to try. In the examples, we have a mapping
function with the mouse y coordinate that you could apply to the falloff or
lod so that you can really visualize quite dynamically the different
attributes of the noise. And we'll continue discussing
Perlin noise in the next video. I'll see you then.