Hi, welcome to this new video,
this is going to be the third and final video on our
subsection of Perlin noise. We're really going to use it to
create kind of an animation, yeah, just some kind of design decisions. So we're not necessarily going to
introduce new ideas, but certainly we're going to try to practice with those and
see what else can we do, right? So let's jump into processing and
I'll show you the ideas that I have regarding what we
can do with this system, right? So we're going to continue with
the example that we left from last video. If you remember, we have this,
in the x axis of the mouse, we can actually control the noise scale,
on the y axis of the mouse, we can control the noise cutoff, right? So we're going to remove this
cutoff system that we have, I think this was a good idea,
but let's just get rid of that, it's a good way of visualizing it. But I think that we could actually do
something slightly different here. So the noise scale,
we can keep it for now, I think that it's going to give some
kind of different legibility, but what I would like to do is,
introduce a different kind of cutoff. Instead of thinking of breaking
the whole system into two conditions, what if we would like to kind
of select an outline, or a line, or a region in a way that
represents the cutoff point, right? So how we can actually delineate
this cutoff condition, right? So let's write a slightly
different cutoff, right, that it would include two cutoff points,
right? So one cutoff point will be the start and
then will be the end, right, let's see if this makes
sense as we draw it, so, threshold, Let's call it threshold_range, just to differentiate it from
the other threshold function, so, value and cutoff, 1, And cutoff2, right, so
what do we want to return? So let's return exactly the same
thing that we had before, we can even copy paste that, right? So this would be if the value, it's bigger than the cutoff1 and the value is smaller or equal than the cutoff2. So what is this saying again,
again, running out of space, so what this is saying is that,
we're going to only return white if the value is in between the cutoff1 and
cutoff 2. So before we were using a 0.5 value,
let's imagine that we're going to do a 0.4 as a lower threshold or
cutoff1 and then 0.6. So everything between 0.4 and 0.6,
it's going to be considered white, so we're going to be selecting
that kind of segment, right? So let's see if this actually works,
first of all, so we're going to maybe comment
out that first version. So now we're going to use the threshold
range where we're going to do n, and as we said, say 0.45 and 0.55, so we do a kind of a small range, right? So notice that before we were determining
the cutoff point between black and white, now, we're actually creating
a little bit of a range of values. Anything between these two values is
going to be painted white in theory, let's see,
let's see what we get from this. So what you can see is,
yeah, it is working, right, but the thickness of this line,
if you want, is actually something that is
determined by that range, right? How many, let's say, how much distance
do we have between 0.5 and 0.55, right. So another way of writing
this would be to say, well, let's give that a name, a variable, could be something like range_width,
all right? And the range width, we could say, it's equal to 0.05, or right now we have it, 0.1, right, the difference between these two is 0.1,
but we might want to do it slightly smaller, 0.05, right? And instead of doing
these values like this, we could say cutoff1 is going to be, It's going to be our, let's say target, before was 0.5,
could be 0.5 minus the cutoff or the range_width, right,
and then the cutoff2, It's going to be 0.5 + the width, right, we're creating a series of variables,
but again, what I'm trying to get is a point
where we could actually have control. And we're getting to the point in
which this 0.5 value point would be, again, the point where we cut off. But instead of cutting off and
creating either black or white, we actually create kind of a line in
between, so let's just use cutoff1 here, And cutoff2 over here, oops, There we go, and in this case,
we have the range control, let's see how this is looking,
so the cutoff range, now it's a little bit smaller,
let's do it even smaller. So you see, if you go very small,
it starts looking like pixelated, but if you actually go to somewhere here, you start getting this kind of nice
kind of line, maybe marbling formation. So some of these techniques actually are
used to create procedural textures, right? So maybe we want the noise
to even be bigger, right, so if you remember, we were controlling the noise
size with the mouse x. So we could say here, well, I want it to
be a lot smaller, right, between 0.001. And then I know I don't care
about this upper range, so I'm going to say between 0.1, 0.03, so we're starting off very close. But you could see we have a lot more
control now over maybe this pattern, right? So we have control over the line
thickness, right, through the range width value, and now we have control
over the pattern of the noise as well, so I mean,
you can decide at which point you like it. The only final thing I want to
do to this composition is, to animate it in a way we can
actually create something like a global variable which is
going to be our offset in x, and that's going to start at 0,
And offsetting x, we're going to also include
it here as a global, we can actually pass it on to
the x coordinate of the noise, right, so whenever we multiply this, we could also say + offset_x, right? And the interesting thing here now, just create a little bit more room, is that if we decide
that the offset_x += 0.1, let's just do 0.1 for now. So what we're saying is that every frame, the variable offset_x shifts a little bit,
right? Okay, let's just make sure that this
is actually written correctly, okay, so I was running into a mistake really
getting these kind of patterns right, and if this is happening to you,
this is not as intended. I wanted to have a very
controlled movement, right, so I realized that this offset in
x condition that we have here, is actually being done within our for
loop. So we actually not just increasing
a little bit of x, reframe, we're actually doing it many, many,
many times, right, 20 times, 120 times. So let's just cut this offset_x,
let's put it all the way to the top, outside the loop. So what we're saying is
only once per frame, let's move a little bit the offset
in x in this direction, right? So if you keep the mouse steady now,
you can see that the noise is, in fact, moving gently, right?. I really like to first get to an area
of control, maybe you really like, kind of, maybe more glitch-like and
like fast moving graphics, and that's certainly fine, and that's great. But I like learning first by actually
getting to a point of control where we actually see the mouse and
the noise kind of, in this case, animated. And this could be used for
a series of different things, right. It could even just be a mask that we're
animating for something else, right, something that we're letting white pixels
be visible versus blue pixels maybe being a color or something like that. So again, there's a lot of room for
these compositions to kind of continue evolving and
as you're kind of playing with them. Not only calibrating the values, but also
kind of giving them some interactivity or animation, as we have been
seeing with these techniques. So we're going to leave this video here,
and I'll see you in the next one.