1 00:00:06,039 --> 00:00:10,614 Hi, welcome to this new video, this is going to be the third and 2 00:00:10,614 --> 00:00:14,226 final video on our subsection of Perlin noise. 3 00:00:14,226 --> 00:00:18,738 We're really going to use it to create kind of an animation, 4 00:00:18,738 --> 00:00:22,154 yeah, just some kind of design decisions. 5 00:00:22,154 --> 00:00:26,250 So we're not necessarily going to introduce new ideas, but certainly we're 6 00:00:26,250 --> 00:00:29,905 going to try to practice with those and see what else can we do, right? 7 00:00:29,905 --> 00:00:34,631 So let's jump into processing and I'll show you the ideas 8 00:00:34,631 --> 00:00:39,660 that I have regarding what we can do with this system, right? 9 00:00:39,660 --> 00:00:44,454 So we're going to continue with the example that we left from last video. 10 00:00:44,454 --> 00:00:49,071 If you remember, we have this, in the x axis of the mouse, 11 00:00:49,071 --> 00:00:54,446 we can actually control the noise scale, on the y axis of the mouse, 12 00:00:54,446 --> 00:00:57,769 we can control the noise cutoff, right? 13 00:00:57,769 --> 00:01:03,328 So we're going to remove this cutoff system that we have, 14 00:01:03,328 --> 00:01:09,359 I think this was a good idea, but let's just get rid of that, 15 00:01:09,359 --> 00:01:12,950 it's a good way of visualizing it. 16 00:01:12,950 --> 00:01:16,150 But I think that we could actually do something slightly different here. 17 00:01:16,150 --> 00:01:19,988 So the noise scale, we can keep it for now, 18 00:01:19,988 --> 00:01:26,174 I think that it's going to give some kind of different legibility, but 19 00:01:26,174 --> 00:01:32,058 what I would like to do is, introduce a different kind of cutoff. 20 00:01:32,058 --> 00:01:38,185 Instead of thinking of breaking the whole system into two conditions, 21 00:01:38,185 --> 00:01:43,390 what if we would like to kind of select an outline, or a line, 22 00:01:43,390 --> 00:01:48,721 or a region in a way that represents the cutoff point, right? 23 00:01:48,721 --> 00:01:53,744 So how we can actually delineate this cutoff condition, right? 24 00:01:53,744 --> 00:01:58,746 So let's write a slightly different cutoff, right, 25 00:01:58,746 --> 00:02:03,984 that it would include two cutoff points, right? 26 00:02:03,984 --> 00:02:09,096 So one cutoff point will be the start and then will be the end, 27 00:02:09,096 --> 00:02:13,904 right, let's see if this makes sense as we draw it, so, 28 00:02:13,904 --> 00:02:21,001 threshold, Let's call it threshold_range, 29 00:02:21,001 --> 00:02:27,675 just to differentiate it from the other threshold function, so, 30 00:02:27,675 --> 00:02:33,307 value and cutoff, 1, 31 00:02:36,252 --> 00:02:39,586 And cutoff2, right, so what do we want to return? 32 00:02:39,586 --> 00:02:44,209 So let's return exactly the same thing that we had before, 33 00:02:44,209 --> 00:02:47,384 we can even copy paste that, right? 34 00:02:47,384 --> 00:02:52,034 So this would be if the value, 35 00:02:52,034 --> 00:02:57,430 it's bigger than the cutoff1 and 36 00:02:57,430 --> 00:03:00,965 the value is smaller or 37 00:03:00,965 --> 00:03:05,248 equal than the cutoff2. 38 00:03:05,248 --> 00:03:10,003 So what is this saying again, again, running out of space, so 39 00:03:10,003 --> 00:03:14,670 what this is saying is that, we're going to only return white if 40 00:03:14,670 --> 00:03:18,634 the value is in between the cutoff1 and cutoff 2. 41 00:03:18,634 --> 00:03:24,188 So before we were using a 0.5 value, let's imagine that we're 42 00:03:24,188 --> 00:03:29,834 going to do a 0.4 as a lower threshold or cutoff1 and then 0.6. 43 00:03:29,834 --> 00:03:35,018 So everything between 0.4 and 0.6, it's going to be considered white, 44 00:03:35,018 --> 00:03:39,017 so we're going to be selecting that kind of segment, right? 45 00:03:39,017 --> 00:03:43,695 So let's see if this actually works, first of all, so 46 00:03:43,695 --> 00:03:48,184 we're going to maybe comment out that first version. 47 00:03:49,724 --> 00:03:57,718 So now we're going to use the threshold range where we're going to do n, 48 00:03:57,718 --> 00:04:02,908 and as we said, say 0.45 and 0.55, 49 00:04:02,908 --> 00:04:07,728 so we do a kind of a small range, right? 50 00:04:07,728 --> 00:04:12,562 So notice that before we were determining the cutoff point between black and white, 51 00:04:12,562 --> 00:04:16,392 now, we're actually creating a little bit of a range of values. 52 00:04:16,392 --> 00:04:21,072 Anything between these two values is going to be painted white in theory, 53 00:04:21,072 --> 00:04:24,124 let's see, let's see what we get from this. 54 00:04:25,664 --> 00:04:30,743 So what you can see is, yeah, it is working, 55 00:04:30,743 --> 00:04:36,760 right, but the thickness of this line, if you want, 56 00:04:36,760 --> 00:04:44,155 is actually something that is determined by that range, right? 57 00:04:44,155 --> 00:04:52,581 How many, let's say, how much distance do we have between 0.5 and 0.55, right. 58 00:04:52,581 --> 00:04:57,556 So another way of writing this would be to say, 59 00:04:57,556 --> 00:05:02,402 well, let's give that a name, a variable, 60 00:05:02,402 --> 00:05:08,142 could be something like range_width, all right? 61 00:05:08,142 --> 00:05:13,047 And the range width, we could say, 62 00:05:13,047 --> 00:05:16,973 it's equal to 0.05, or 63 00:05:16,973 --> 00:05:22,369 right now we have it, 0.1, right, 64 00:05:22,369 --> 00:05:29,073 the difference between these two is 0.1, but 65 00:05:29,073 --> 00:05:34,471 we might want to do it slightly smaller, 66 00:05:34,471 --> 00:05:37,654 0.05, right? 67 00:05:37,654 --> 00:05:43,979 And instead of doing these values like this, 68 00:05:43,979 --> 00:05:48,814 we could say cutoff1 is going to be, 69 00:05:53,566 --> 00:05:57,875 It's going to be our, let's say target, 70 00:05:57,875 --> 00:06:03,706 before was 0.5, could be 0.5 minus the cutoff or 71 00:06:03,706 --> 00:06:09,300 the range_width, right, and then the cutoff2, 72 00:06:16,497 --> 00:06:21,105 It's going to be 0.5 + the width, right, 73 00:06:21,105 --> 00:06:26,584 we're creating a series of variables, but again, 74 00:06:26,584 --> 00:06:34,074 what I'm trying to get is a point where we could actually have control. 75 00:06:36,654 --> 00:06:41,685 And we're getting to the point in which this 0.5 value point would be, 76 00:06:41,685 --> 00:06:44,228 again, the point where we cut off. 77 00:06:44,228 --> 00:06:49,264 But instead of cutting off and creating either black or white, 78 00:06:49,264 --> 00:06:55,643 we actually create kind of a line in between, so let's just use cutoff1 here, 79 00:06:57,404 --> 00:07:02,132 And cutoff2 over here, oops, 80 00:07:04,615 --> 00:07:10,272 There we go, and in this case, we have the range control, 81 00:07:10,272 --> 00:07:15,467 let's see how this is looking, so the cutoff range, 82 00:07:15,467 --> 00:07:21,251 now it's a little bit smaller, let's do it even smaller. 83 00:07:25,607 --> 00:07:30,796 So you see, if you go very small, it starts looking like pixelated, 84 00:07:30,796 --> 00:07:33,928 but if you actually go to somewhere here, 85 00:07:33,928 --> 00:07:39,758 you start getting this kind of nice kind of line, maybe marbling formation. 86 00:07:39,758 --> 00:07:45,554 So some of these techniques actually are used to create procedural textures, right? 87 00:07:46,654 --> 00:07:51,485 So maybe we want the noise to even be bigger, 88 00:07:51,485 --> 00:07:54,619 right, so if you remember, 89 00:07:54,619 --> 00:08:00,400 we were controlling the noise size with the mouse x. 90 00:08:00,400 --> 00:08:06,528 So we could say here, well, I want it to be a lot smaller, right, between 0.001. 91 00:08:06,528 --> 00:08:12,776 And then I know I don't care about this upper range, 92 00:08:12,776 --> 00:08:18,316 so I'm going to say between 0.1, 0.03, 93 00:08:18,316 --> 00:08:22,768 so we're starting off very close. 94 00:08:22,768 --> 00:08:28,613 But you could see we have a lot more control now over maybe this pattern, 95 00:08:28,613 --> 00:08:29,304 right? 96 00:08:31,324 --> 00:08:36,398 So we have control over the line thickness, right, through the range 97 00:08:36,398 --> 00:08:41,816 width value, and now we have control over the pattern of the noise as well, 98 00:08:41,816 --> 00:08:45,644 so I mean, you can decide at which point you like it. 99 00:08:45,644 --> 00:08:50,713 The only final thing I want to do to this composition is, 100 00:08:50,713 --> 00:08:56,115 to animate it in a way we can actually create something like 101 00:08:56,115 --> 00:09:01,185 a global variable which is going to be our offset in x, and 102 00:09:01,185 --> 00:09:07,702 that's going to start at 0, And offsetting x, 103 00:09:07,702 --> 00:09:12,918 we're going to also include it here as a global, 104 00:09:12,918 --> 00:09:19,468 we can actually pass it on to the x coordinate of the noise, 105 00:09:19,468 --> 00:09:23,880 right, so whenever we multiply this, 106 00:09:23,880 --> 00:09:28,754 we could also say + offset_x, right? 107 00:09:28,754 --> 00:09:32,830 And the interesting thing here now, 108 00:09:32,830 --> 00:09:36,774 just create a little bit more room, 109 00:09:36,774 --> 00:09:42,560 is that if we decide that the offset_x += 0.1, 110 00:09:42,560 --> 00:09:46,114 let's just do 0.1 for now. 111 00:09:46,114 --> 00:09:51,283 So what we're saying is that every frame, 112 00:09:51,283 --> 00:09:58,094 the variable offset_x shifts a little bit, right? 113 00:09:58,094 --> 00:10:03,016 Okay, let's just make sure that this is actually written correctly, okay, 114 00:10:03,016 --> 00:10:08,015 so I was running into a mistake really getting these kind of patterns right, and 115 00:10:08,015 --> 00:10:11,774 if this is happening to you, this is not as intended. 116 00:10:11,774 --> 00:10:15,351 I wanted to have a very controlled movement, right, so 117 00:10:15,351 --> 00:10:19,231 I realized that this offset in x condition that we have here, 118 00:10:19,231 --> 00:10:22,104 is actually being done within our for loop. 119 00:10:22,104 --> 00:10:26,739 So we actually not just increasing a little bit of x, reframe, 120 00:10:26,739 --> 00:10:33,448 we're actually doing it many, many, many times, right, 20 times, 120 times. 121 00:10:33,448 --> 00:10:37,544 So let's just cut this offset_x, let's put it all the way to the top, 122 00:10:37,544 --> 00:10:38,816 outside the loop. 123 00:10:38,816 --> 00:10:42,315 So what we're saying is only once per frame, 124 00:10:42,315 --> 00:10:47,564 let's move a little bit the offset in x in this direction, right? 125 00:10:47,564 --> 00:10:52,737 So if you keep the mouse steady now, you can see that the noise is, 126 00:10:52,737 --> 00:10:55,836 in fact, moving gently, right?. 127 00:10:55,836 --> 00:11:00,550 I really like to first get to an area of control, maybe you really like, 128 00:11:00,550 --> 00:11:05,187 kind of, maybe more glitch-like and like fast moving graphics, and 129 00:11:05,187 --> 00:11:08,396 that's certainly fine, and that's great. 130 00:11:08,396 --> 00:11:13,472 But I like learning first by actually getting to a point of control where 131 00:11:13,472 --> 00:11:18,734 we actually see the mouse and the noise kind of, in this case, animated. 132 00:11:19,794 --> 00:11:23,642 And this could be used for a series of different things, right. 133 00:11:23,642 --> 00:11:27,816 It could even just be a mask that we're animating for something else, right, 134 00:11:27,816 --> 00:11:32,372 something that we're letting white pixels be visible versus blue pixels maybe being 135 00:11:32,372 --> 00:11:34,884 a color or something like that. 136 00:11:34,884 --> 00:11:38,742 So again, there's a lot of room for these compositions to kind of continue 137 00:11:38,742 --> 00:11:41,429 evolving and as you're kind of playing with them. 138 00:11:41,429 --> 00:11:45,357 Not only calibrating the values, but also kind of giving them some interactivity or 139 00:11:45,357 --> 00:11:48,252 animation, as we have been seeing with these techniques. 140 00:11:48,252 --> 00:11:51,204 So we're going to leave this video here, and I'll see you in the next one.