1
00:00:04,931 --> 00:00:06,854
Hi, welcome to this new video.

2
00:00:06,854 --> 00:00:12,614
In this lesson, we're going to continue
learning about Perlin noise and

3
00:00:12,614 --> 00:00:18,862
how we can actually use Perlin noise
a bit more precisely to design with it.

4
00:00:18,862 --> 00:00:22,150
So let's look at the function
that we're going to write today.

5
00:00:22,150 --> 00:00:24,494
It's actually a rather simple function.

6
00:00:24,494 --> 00:00:29,230
We are going to be able to clamp
the noise, meaning that we're going to

7
00:00:29,230 --> 00:00:34,624
just differentiate between two conditions,
black or white.

8
00:00:34,624 --> 00:00:39,587
So as we know, the noise is a value
that kind of gradiently moves

9
00:00:39,587 --> 00:00:44,557
between these peaks and valleys,
let's say the -1 and 1.

10
00:00:44,557 --> 00:00:46,199
And it creates gradients in between,
right?

11
00:00:46,199 --> 00:00:48,632
So it would always be like
a gray condition in between.

12
00:00:48,632 --> 00:00:52,268
But we could create
an arbitrary threshold,

13
00:00:52,268 --> 00:00:57,253
a threshold that would determine
if a pixel is white or black.

14
00:00:57,253 --> 00:01:00,239
We're going to just do it for
a segment of those two conditions.

15
00:01:00,239 --> 00:01:04,114
But you're free to consider maybe
you want to create ranges and

16
00:01:04,114 --> 00:01:09,257
maybe between this and these values of
the noise, it's a color, or maybe between

17
00:01:09,257 --> 00:01:14,197
these other values of the noise,
it's a different color or pattern, right?

18
00:01:14,197 --> 00:01:18,965
So segmenting this Perlin noise is
actually achieved rather simply with,

19
00:01:18,965 --> 00:01:21,840
as we're going to see,
with an if statement.

20
00:01:21,840 --> 00:01:25,664
So let's look at the code example
that we have here on the left.

21
00:01:25,664 --> 00:01:29,095
We're going to be writing a function
that we're going to call threshold.

22
00:01:29,095 --> 00:01:31,580
What is the cutoff point for

23
00:01:31,580 --> 00:01:37,209
this value of the noise to either
be white or be black, right?

24
00:01:37,209 --> 00:01:41,624
We're going to see how to write that
in a very kind of short if statement.

25
00:01:41,624 --> 00:01:47,179
So let's jump into processing and see what
you can see this interactively as well.

26
00:01:47,179 --> 00:01:51,854
So we're going to
continue writing based on

27
00:01:51,854 --> 00:01:56,133
the example from last video, right?

28
00:01:56,133 --> 00:01:58,444
Let me just remind you where we at.

29
00:01:58,444 --> 00:02:02,233
We have this noise pattern that we
can actually manipulate with the x

30
00:02:02,233 --> 00:02:03,504
coordinate, right?

31
00:02:05,684 --> 00:02:11,043
So that gives us a sense of the scale.

32
00:02:11,043 --> 00:02:14,301
So let's just write our function.

33
00:02:16,784 --> 00:02:21,664
Let's make sure that our indentation
is right all the way to the back here.

34
00:02:21,664 --> 00:02:24,357
And we're going to write
the DEF threshold.

35
00:02:31,024 --> 00:02:36,084
It's going to require an argument
of a value and a cutoff, right?

36
00:02:37,624 --> 00:02:38,842
The value is going to be,

37
00:02:38,842 --> 00:02:42,249
which is the noise value that
you're providing the function.

38
00:02:42,249 --> 00:02:47,842
And the cutoff is the arbitrary point
in which we're going to cut it, right?

39
00:02:47,842 --> 00:02:52,154
Knowing that the value needs
to be coming from between.

40
00:02:55,694 --> 00:03:01,767
If it's directly coming from the noise,
it's going to be between -1 and 1.

41
00:03:01,767 --> 00:03:05,632
But if we have remapped that value,
it might be in a different range, right?

42
00:03:05,632 --> 00:03:10,468
So let's assume that it's
going to be between -1 and 1.

43
00:03:10,468 --> 00:03:11,005
Well, here's

44
00:03:11,005 --> 00:03:13,428
where I want to bring attention to
some of the math that we're doing.

45
00:03:13,428 --> 00:03:18,375
Everything that we're doing
within the noise function will

46
00:03:18,375 --> 00:03:21,996
remain still between -1 and 1, right?

47
00:03:21,996 --> 00:03:27,185
And this noise function cannot return
anything other than that, right?

48
00:03:27,185 --> 00:03:30,130
But once we multiply it times 200,

49
00:03:30,130 --> 00:03:34,832
we are changing the result to
something different, right?

50
00:03:34,832 --> 00:03:37,905
So instead of doing this 200 here,

51
00:03:37,905 --> 00:03:42,904
we're going to use the mapping
operation once more.

52
00:03:42,904 --> 00:03:51,040
But let's just do first the threshold
function, so let's return.

53
00:03:51,040 --> 00:03:55,416
So once we call this threshold
function with a value,

54
00:03:55,416 --> 00:04:00,973
let's imagine that we provide a value of,
let's say, -0.5.

55
00:04:00,973 --> 00:04:10,972
We will return, We're going to return 255.

56
00:04:10,972 --> 00:04:12,116
That's going to be our default.

57
00:04:12,116 --> 00:04:15,544
Return 255 is going to
be our white condition.

58
00:04:18,724 --> 00:04:22,514
But if the value,

59
00:04:24,459 --> 00:04:30,859
It's bigger or equal than the cutoff,

60
00:04:30,859 --> 00:04:34,784
Else zero, right?

61
00:04:36,444 --> 00:04:40,876
So this is a way of saying, look,
this is going to be our condition.

62
00:04:40,876 --> 00:04:45,224
The condition is going to be 255.

63
00:04:46,804 --> 00:04:51,464
If the value remains above the cutoff
else, it's going to be 0, right?

64
00:04:52,644 --> 00:04:57,522
And we can actually include all
these into our return function.

65
00:04:57,522 --> 00:05:02,614
Once the function gets executed,
it will return this equation,

66
00:05:02,614 --> 00:05:06,514
right, which in fact is an if statement,
right?

67
00:05:06,514 --> 00:05:08,202
So kind of a simple function.

68
00:05:08,202 --> 00:05:10,518
It's just a one line function.

69
00:05:10,518 --> 00:05:12,817
And let's figure out here where to use it,
right?

70
00:05:12,817 --> 00:05:16,337
Because we will actually have to define
the cutoff and the value, right?

71
00:05:16,337 --> 00:05:19,594
So first, I would like to have control.

72
00:05:19,594 --> 00:05:23,214
Let's just remove this 200 now.

73
00:05:23,214 --> 00:05:28,319
And we know that our noise,
right, I'm going to call

74
00:05:28,319 --> 00:05:34,814
it n_mapped just to differentiate
it from the noise itself.

75
00:05:34,814 --> 00:05:38,789
It's going to be a map version of n.

76
00:05:38,789 --> 00:05:47,311
So we're going to take the noise value
that goes between -1 and 1, right?

77
00:05:47,311 --> 00:05:53,068
And we are going to map it to 0,
255, right?

78
00:05:53,068 --> 00:05:56,966
And this is better than multiplying by
200 because what we were trying to do is

79
00:05:56,966 --> 00:06:00,978
kind of convert it into something that
would be recognizable as a color, right?

80
00:06:00,978 --> 00:06:06,581
So we were actually missing out on some
of the upper ranges of the color, right?

81
00:06:06,581 --> 00:06:11,576
So let's just say that
the fill is going to be

82
00:06:11,576 --> 00:06:16,581
the mapped version of the noise, right?

83
00:06:16,581 --> 00:06:18,634
Let's just see how that works.

84
00:06:20,534 --> 00:06:22,066
We're getting it quite bright.

85
00:06:22,066 --> 00:06:24,550
Maybe I actually got this incorrectly.

86
00:06:24,550 --> 00:06:29,302
Maybe the value of the noise goes
between 0 and 1 as opposed to -1.

87
00:06:29,302 --> 00:06:30,726
Let's double check that.

88
00:06:30,726 --> 00:06:31,998
Yeah, so that's more correct.

89
00:06:31,998 --> 00:06:35,796
I think that this is
a kind of a small mistake.

90
00:06:35,796 --> 00:06:40,227
I had the impression that the noise
was actually operating between -1 and

91
00:06:40,227 --> 00:06:42,768
one is actually between 0 and 1, right?

92
00:06:42,768 --> 00:06:47,314
So that's clear now,
by defining the parameters,

93
00:06:47,314 --> 00:06:50,346
the domain of the value, right?

94
00:06:50,346 --> 00:06:57,450
So the noise operation,
it's returning something between 0 and 1.

95
00:06:57,450 --> 00:07:02,134
And we are remapping it to
a value between 0 and 255, right?

96
00:07:03,374 --> 00:07:08,341
And we get kind of a nice crisp
range between blacks and whites,

97
00:07:08,341 --> 00:07:12,290
right, at different scales,
that's perfect.

98
00:07:12,290 --> 00:07:14,461
But we're not using
the threshold value yet, right?

99
00:07:14,461 --> 00:07:16,385
So let's incorporate this.

100
00:07:16,385 --> 00:07:21,700
If we're going to incorporate
the value of threshold somewhere here,

101
00:07:21,700 --> 00:07:27,394
now we know that the range before
the mapped function is between 0 and 1.

102
00:07:28,894 --> 00:07:30,630
Let's just include it here.

103
00:07:30,630 --> 00:07:38,051
So we could say threshold,
the threshold of n or n.

104
00:07:38,051 --> 00:07:43,255
Now it's going to be the threshold of n,

105
00:07:43,255 --> 00:07:46,580
let's just do 0.5.

106
00:07:46,580 --> 00:07:51,084
So 0.5 is going to be
halfway through 0 and 1.

107
00:07:51,084 --> 00:07:54,596
So we're going to be saying,
now n can only be two things.

108
00:07:54,596 --> 00:08:00,688
Could be white or black if it's closer
to below 0.5, or if it's above 0.5.

109
00:08:00,688 --> 00:08:06,244
And then we can do again the remapping to
a value that we can see in the screen.

110
00:08:08,264 --> 00:08:13,971
And as you can see, the same
principle of the noise now applies.

111
00:08:13,971 --> 00:08:18,247
But actually, we're just
clamping the noise value, right?

112
00:08:18,247 --> 00:08:23,475
So just to conclude, and just to give
you a sense of the dynamism that

113
00:08:23,475 --> 00:08:28,521
we could actually use this for,
a lot of people use this sometimes

114
00:08:28,521 --> 00:08:33,494
in procedurally generated cave
formations or like terrains.

115
00:08:33,494 --> 00:08:38,888
You could use that when we eventually
learned 3D, we could actually

116
00:08:38,888 --> 00:08:43,917
see it how we could affect the height
field of a surface, right?

117
00:08:43,917 --> 00:08:50,228
But let's just do the same operation that
we did up here with the mouse, right?

118
00:08:50,228 --> 00:08:56,006
So we can use the second axis of
the mouse to affect the cutoff, right?

119
00:08:56,006 --> 00:08:58,794
Right now, we don't have a variable for
the cutoff, but let's create one.

120
00:08:58,794 --> 00:09:00,045
So let's say cutoff.

121
00:09:02,554 --> 00:09:09,181
It's going to be a map
version of the mouse in y,

122
00:09:09,181 --> 00:09:17,038
knowing that the mouse
will go between 0 and 600.

123
00:09:17,038 --> 00:09:21,434
Let's say the cutoff, we now know
that we want to go between 0 and 1.

124
00:09:21,434 --> 00:09:24,590
So let's do 0, 1, right?

125
00:09:24,590 --> 00:09:29,385
So 0.5 would be somewhere in the middle
of the screen, up would be 0,

126
00:09:29,385 --> 00:09:31,198
lower would be 1, right?

127
00:09:31,198 --> 00:09:36,715
So we could actually see how
we're kind of slicing through

128
00:09:36,715 --> 00:09:41,677
the noise as we move with
the mouse y-axis, right?

129
00:09:41,677 --> 00:09:46,598
So falloff now, this variable,
we can replace it for this 0.5 here,

130
00:09:46,598 --> 00:09:49,262
which was an arbitrary cutoff value and

131
00:09:49,262 --> 00:09:53,154
see how we can actually achieve
an interactive version.

132
00:09:54,294 --> 00:09:59,464
So we still have in this axis the scale,
but now we have,

133
00:09:59,464 --> 00:10:04,194
if we move up,
we could actually get, you see, and

134
00:10:04,194 --> 00:10:08,704
you could imagine something
like a simulation of

135
00:10:08,704 --> 00:10:13,862
a water level rising or
something along those lines.

136
00:10:13,862 --> 00:10:18,509
We can create a lot of control
over the result of this

137
00:10:18,509 --> 00:10:24,164
variable just by moving the mouse up or
down, right?

138
00:10:24,164 --> 00:10:27,333
So obviously, some of the most interesting
moments are maybe somewhere in between.

139
00:10:27,333 --> 00:10:32,151
But what I would invite you to try
is potentially print the value of

140
00:10:32,151 --> 00:10:35,004
the mouse at a position that you like.

141
00:10:35,004 --> 00:10:38,017
So you create this little
interactive condition, right?

142
00:10:38,017 --> 00:10:41,387
And then you think, well,
maybe I like this moment, right?

143
00:10:41,387 --> 00:10:43,096
And that's a very calibrated moment.

144
00:10:43,096 --> 00:10:48,473
And if you would have the console
printing the mouse position x and

145
00:10:48,473 --> 00:10:52,402
y, you would know what are the values,
right?

146
00:10:52,402 --> 00:10:57,125
Or you can be printing out directly
the cutoff value and the scale value,

147
00:10:57,125 --> 00:11:02,564
which are the two variables that are being
manipulated to get this result, right?

148
00:11:02,564 --> 00:11:04,024
So again, it's a very powerful tool.

149
00:11:04,024 --> 00:11:08,706
You'll see a lot of different designers
using Perlin noise somewhere,

150
00:11:08,706 --> 00:11:13,847
not very visible, but sometimes in between
the code, allowing for some of this

151
00:11:13,847 --> 00:11:19,512
noise to really create some gradient
differentiation in the composition, right?

152
00:11:19,512 --> 00:11:22,749
So this is kind of a big
upgrade of just using random,

153
00:11:22,749 --> 00:11:27,064
which doesn't really create
any kind of pattern, right?

154
00:11:27,064 --> 00:11:30,913
We could actually start using a kind of
form of noise that does create this kind

155
00:11:30,913 --> 00:11:31,720
of pattern.

156
00:11:31,720 --> 00:11:36,819
So we'll continue talking about pixel
arrays in this fashion in the next video.

157
00:11:36,819 --> 00:11:38,215
So I'll see you then.