1 00:00:04,985 --> 00:00:06,726 Hi, welcome to this new video. 2 00:00:06,726 --> 00:00:07,806 In this session, 3 00:00:07,806 --> 00:00:13,414 we're going to start learning a little bit about a different kind of randomness. 4 00:00:13,414 --> 00:00:17,562 So the notion of noise, or in particular the notion of Perlin noise, 5 00:00:17,562 --> 00:00:21,569 which we're going to learn about today, is incredibly useful for 6 00:00:21,569 --> 00:00:25,270 us designers in all sorts of different occasions, right. 7 00:00:25,270 --> 00:00:30,114 Perlin noise is a type of gradient noise developed by Ken Perlin in 1983. 8 00:00:31,214 --> 00:00:36,249 And we can use it just invoking a simple function that is usually inbuilt within 9 00:00:36,249 --> 00:00:41,281 something like processing or in other libraries, as you can see on the right, 10 00:00:41,281 --> 00:00:45,614 what we obtain out of calling, apparently noise function. 11 00:00:45,614 --> 00:00:50,478 If we would distribute the values over a field in a coordinate like x and 12 00:00:50,478 --> 00:00:55,013 y, we would start getting not just a complete random number, but 13 00:00:55,013 --> 00:00:59,394 rather a random number that it's part of a larger field. 14 00:00:59,394 --> 00:01:02,374 Depending on how we control some of the parameters of this noise, 15 00:01:02,374 --> 00:01:06,294 we would actually get, as you can see, in the different images, different result. 16 00:01:07,434 --> 00:01:11,287 So we're going to be introducing some of the parameters of this noise and 17 00:01:11,287 --> 00:01:14,154 how we can control it to our advantage. 18 00:01:14,154 --> 00:01:17,594 And we're going to be doing that in a pixel array or 19 00:01:17,594 --> 00:01:20,746 in a grid, as we have been learning so far. 20 00:01:20,746 --> 00:01:25,738 So it's going to really give us resources to be able to design and operate. 21 00:01:25,738 --> 00:01:28,970 Let's look at some of the variables that this noise will actually have. 22 00:01:28,970 --> 00:01:33,684 So by default, the noise value within processing 23 00:01:33,684 --> 00:01:38,634 just asks us to produce a coordinate like an x and a y. 24 00:01:39,734 --> 00:01:44,324 But we can actually control the scale of the noise by introducing 25 00:01:44,324 --> 00:01:47,790 a variable that we would call the noise scale. 26 00:01:47,790 --> 00:01:52,975 That variable can be very small, and we'll kind of learn how to increase 27 00:01:52,975 --> 00:01:58,594 the scale of the pattern by introducing a variable within those coordinates. 28 00:01:59,654 --> 00:02:01,662 There's also the level of detail. 29 00:02:01,662 --> 00:02:06,222 Level of detail, will see the amount of detail that the noise would have 30 00:02:06,222 --> 00:02:09,622 that's actually be controlled with an integer. 31 00:02:09,622 --> 00:02:12,424 We're going to start with a default of 3, but 32 00:02:12,424 --> 00:02:17,022 we can see what are the different results that we get by changing that. 33 00:02:17,022 --> 00:02:22,534 And then also the way the falloff, meaning the way in which the transitions 34 00:02:22,534 --> 00:02:27,260 between white and black values or zeros and ones, in this case, 35 00:02:27,260 --> 00:02:32,200 often noise would actually play out that could also be adjusted. 36 00:02:32,200 --> 00:02:37,117 It would feel like a sense of what is the degree of blurriness or 37 00:02:37,117 --> 00:02:43,800 the degree of the detail that is actually being perceived in this gradient noise. 38 00:02:43,800 --> 00:02:48,511 So understanding these variables intuitively is something that we can spend 39 00:02:48,511 --> 00:02:50,177 a little bit of time doing, 40 00:02:50,177 --> 00:02:54,544 just creating an interactive visualization of this noise. 41 00:02:54,544 --> 00:02:57,224 So let's see how we can do that in processing. 42 00:02:57,224 --> 00:03:02,834 So here we are in our template the only difference that I've done so 43 00:03:02,834 --> 00:03:09,904 far to this template is that I'm going to be working in 600 by 600 canvas. 44 00:03:09,904 --> 00:03:13,934 I would like to work in a square canvas to kind of visualize some 45 00:03:13,934 --> 00:03:17,928 of the parameters of this noise a little bit more clearly. 46 00:03:17,928 --> 00:03:21,994 So let's start with a draw function. 47 00:03:21,994 --> 00:03:25,218 We could do this in the setup so just as a single image. 48 00:03:25,218 --> 00:03:30,994 But I do want to start introducing some variables. 49 00:03:30,994 --> 00:03:35,444 Actually, this is the first variable that we're going to be working with in 50 00:03:35,444 --> 00:03:38,694 the noise scale, which let's just keep that there. 51 00:03:39,714 --> 00:03:41,354 Let's create a simple grid first. 52 00:03:41,354 --> 00:03:47,470 The first thing we really want to do is visualize some pixel information or 53 00:03:47,470 --> 00:03:49,414 a grid in the screen. 54 00:03:49,414 --> 00:03:57,454 So in range between, let's say, 1200, right. 55 00:03:57,454 --> 00:04:03,185 And then, as we've done so far as well, we're going to do a nested loop. 56 00:04:09,560 --> 00:04:15,334 And x, it's going to be equals to i x 5. 57 00:04:15,334 --> 00:04:17,526 This is going to be the coordinate. 58 00:04:17,526 --> 00:04:19,438 Let's create a bit of space here. 59 00:04:19,438 --> 00:04:22,154 The coordinate for our rectangle. 60 00:04:23,734 --> 00:04:28,309 The rectangle is going to be the primitive that we're going to use to visualize 61 00:04:28,309 --> 00:04:29,094 this grid. 62 00:04:29,094 --> 00:04:33,510 But at the same time, the color of this rectangle would be 63 00:04:33,510 --> 00:04:37,734 basically the noise information, right. 64 00:04:37,734 --> 00:04:43,148 So let's do Y = j times 5, right. 65 00:04:43,148 --> 00:04:46,924 This is kind of for creating the rectangle coordinate. 66 00:04:46,924 --> 00:04:51,838 And we've done this before, so hopefully you're familiar with the idea of 67 00:04:51,838 --> 00:04:55,436 creating a grid that covers the whole screen, right. 68 00:04:55,436 --> 00:04:57,068 So we have this. 69 00:04:57,068 --> 00:05:03,544 Let's do something like no stroke for the style and feel. 70 00:05:07,124 --> 00:05:11,969 We could say it's white because if we have a black 71 00:05:11,969 --> 00:05:16,944 background, at least we would know that we have. 72 00:05:18,364 --> 00:05:22,980 So if we have everything white, it's working. 73 00:05:22,980 --> 00:05:27,290 We could say something like stroke 0, 74 00:05:27,290 --> 00:05:31,854 right, if we wanted to see the grid. 75 00:05:31,854 --> 00:05:36,574 As you can see, it's a very dense grid. 76 00:05:36,574 --> 00:05:40,547 I'm trying to create enough samples for the noise so 77 00:05:40,547 --> 00:05:43,354 that we can actually see it, right. 78 00:05:44,774 --> 00:05:49,874 So, well, let's just create our first noise variable. 79 00:05:51,454 --> 00:05:53,853 And we can simply say n =, 80 00:05:53,853 --> 00:05:59,544 n is going to be a variable that will keep the noise information. 81 00:06:00,724 --> 00:06:06,764 You can be more descriptive here, but we're going to keep it simple. 82 00:06:06,764 --> 00:06:13,484 So noise, we could be doing this in 2D. 83 00:06:13,484 --> 00:06:18,424 If you're thinking in 2D, there would be a graph with ups and downs, peaks and 84 00:06:18,424 --> 00:06:20,004 valleys. 85 00:06:20,004 --> 00:06:21,467 But I think that for 86 00:06:21,467 --> 00:06:27,552 us in design is quite useful to start thinking of noise patterns as well in 2D. 87 00:06:27,552 --> 00:06:29,408 So as this kind of pixel array. 88 00:06:29,408 --> 00:06:33,224 So we could just simply put x,y here, right. 89 00:06:33,224 --> 00:06:38,026 And meaning that the information that we're inputting is 90 00:06:38,026 --> 00:06:40,632 the coordinate of the pixel. 91 00:06:40,632 --> 00:06:43,568 And that's going to return us a noise value. 92 00:06:43,568 --> 00:06:48,758 Notice that just by the coordinate and using the same kind of seed, 93 00:06:48,758 --> 00:06:52,279 sorry, the same kind of noise information, 94 00:06:52,279 --> 00:06:57,066 we're going to be getting this, a consistent noise pattern. 95 00:06:57,066 --> 00:06:59,759 So let's use that in the fill. 96 00:06:59,759 --> 00:07:04,937 So instead of using 255, we can put here n, right. 97 00:07:09,036 --> 00:07:13,204 And we see that all the pixels are currently black, right. 98 00:07:13,204 --> 00:07:15,476 So let's change this a little bit and 99 00:07:15,476 --> 00:07:19,148 let's say back to no stroke here because I don't want the, 100 00:07:26,099 --> 00:07:33,738 The lines of the rectangles to be changing the value, right. 101 00:07:33,738 --> 00:07:38,730 So what might be happening right now is that the values of the noise are values 102 00:07:38,730 --> 00:07:43,146 that go usually between -1 and 1, if I'm correct, I believe. 103 00:07:43,146 --> 00:07:48,670 That's going to be basically a value very close to 0 and 104 00:07:48,670 --> 00:07:51,926 that's going to look very dark. 105 00:07:51,926 --> 00:07:55,194 So let's start by multiplying this by 100, right. 106 00:07:57,014 --> 00:08:02,622 And you see that we start seeing a little bit of this coloration, right. 107 00:08:02,622 --> 00:08:06,015 So if you think that we can actually get up to 200, 108 00:08:06,015 --> 00:08:10,286 we're going to be able to see it a little bit more clearly, right. 109 00:08:10,286 --> 00:08:15,294 So we do have this kind of pattern, but it's very. 110 00:08:15,294 --> 00:08:18,038 Yeah, it feels like, I mean, there is some repetition. 111 00:08:18,038 --> 00:08:19,930 We can see sequences, but 112 00:08:19,930 --> 00:08:24,718 we could actually manipulate this pattern quite a bit, right. 113 00:08:24,718 --> 00:08:32,011 So let's start by introducing what I wrote up here, a noiseScale. 114 00:08:32,011 --> 00:08:37,157 So let's create a variable called noiseScale and 115 00:08:37,157 --> 00:08:43,296 reduce the size of this, of the noise by 0.02, right. 116 00:08:43,296 --> 00:08:46,373 So here we're going to use global. 117 00:08:46,373 --> 00:08:50,828 Let's just copy paste that, noiseScale. 118 00:08:55,880 --> 00:08:57,517 And then let's multiply here. 119 00:09:00,803 --> 00:09:02,382 Sorry, let's just be a little bit more. 120 00:09:02,382 --> 00:09:07,022 I always kind of forget of being kind of pythonic in the way 121 00:09:07,022 --> 00:09:09,602 we write variables, right. 122 00:09:09,602 --> 00:09:14,962 I kind of sometimes transitions between different standards, right. 123 00:09:14,962 --> 00:09:16,885 So we have noise scale with an underscore, right, 124 00:09:16,885 --> 00:09:19,610 just to be a little bit more consistent with the way we write variables. 125 00:09:19,610 --> 00:09:24,682 So x times noise scale, y times noise scale. 126 00:09:24,682 --> 00:09:27,082 So both the X and the Y. 127 00:09:27,082 --> 00:09:29,794 Let's just increase the window here a little bit. 128 00:09:29,794 --> 00:09:34,484 Both the x and the y being multiplied by that value, right. 129 00:09:35,704 --> 00:09:37,272 So let's see what we get. 130 00:09:37,272 --> 00:09:39,560 And here we see a little bit. 131 00:09:39,560 --> 00:09:45,054 What you have to imagine here is that we're actually zooming in into the noise, 132 00:09:45,054 --> 00:09:45,688 right? 133 00:09:45,688 --> 00:09:49,474 So the noise, just by kind of shrinking these variables, 134 00:09:49,474 --> 00:09:54,568 we're actually kind of sampling kind of a much smaller portion of the noise. 135 00:09:54,568 --> 00:09:58,488 The noise, imagine it's an infinite field with this kind of detail. 136 00:09:58,488 --> 00:10:03,567 And we can zoom in or out and depending on what section of this noise we sample, 137 00:10:03,567 --> 00:10:06,822 we're going to get a different result, right. 138 00:10:06,822 --> 00:10:11,766 So again, you might be interested in creating something 139 00:10:11,766 --> 00:10:15,479 that has some of these kind of formations. 140 00:10:15,479 --> 00:10:19,769 So just being able to control this, it's incredibly useful, right. 141 00:10:19,769 --> 00:10:21,853 As I mentioned in some of the slides, 142 00:10:21,853 --> 00:10:25,227 we could include something that is a noise detail, right. 143 00:10:25,227 --> 00:10:31,580 And obviously that gives us, so noise detail. 144 00:10:31,580 --> 00:10:33,452 The noise detail requires one number. 145 00:10:33,452 --> 00:10:38,766 The first number is going to be the level of detail, 146 00:10:38,766 --> 00:10:42,277 lod, and the falloff, right. 147 00:10:42,277 --> 00:10:46,751 And here again, the invitation is for you to play with these variables and 148 00:10:46,751 --> 00:10:49,003 see what different results you get. 149 00:10:49,003 --> 00:10:54,259 So let's do a level of detail 150 00:10:54,259 --> 00:10:59,081 of three and a fall off of. 151 00:10:59,081 --> 00:11:03,330 Maybe the falloff will be something like 0.5, right. 152 00:11:06,117 --> 00:11:08,519 And that's what we get with those values. 153 00:11:08,519 --> 00:11:12,513 Let's try a level of detail of 9. 154 00:11:15,938 --> 00:11:19,117 And it might be difficult to perceive, but 155 00:11:19,117 --> 00:11:23,814 we are kind of getting kind of a crisper, more detailed noise. 156 00:11:25,234 --> 00:11:28,437 Just go to level of detail of one and 157 00:11:28,437 --> 00:11:33,414 you can see the difference between 1 and 9, right. 158 00:11:35,874 --> 00:11:37,674 Let's leave that at 3. 159 00:11:37,674 --> 00:11:42,904 But I would like to, in order just to conclude this kind of conversation about 160 00:11:42,904 --> 00:11:47,930 how the information of the noise could actually be visualized, right. 161 00:11:47,930 --> 00:11:52,152 I really like being able to dynamically change 162 00:11:52,152 --> 00:11:56,894 the attributes of the noise so that we can see them. 163 00:11:56,894 --> 00:12:01,374 So let's just do that, the noise scale, right. 164 00:12:01,374 --> 00:12:05,934 And this is a technique that I invite you to try with all the different variables. 165 00:12:05,934 --> 00:12:13,590 So here we could actually say that the noise scale is going to be equal to a map. 166 00:12:13,590 --> 00:12:15,934 We covered the map function. 167 00:12:15,934 --> 00:12:20,194 If you haven't seen that video, I invite you to look back on it. 168 00:12:21,294 --> 00:12:24,638 Map is going to allow us to transform one variable. 169 00:12:24,638 --> 00:12:27,514 In this case, it's going to be the mouse x coordinate. 170 00:12:29,774 --> 00:12:33,838 It's going to transform this variable from one domain to another domain. 171 00:12:33,838 --> 00:12:36,030 We first provide the first domain. 172 00:12:36,030 --> 00:12:40,630 We're going to say that the mouse x moves between zero and 600. 173 00:12:40,630 --> 00:12:45,384 You can use canvas width here instead of 600, if you decide so. 174 00:12:46,404 --> 00:12:50,420 And we're going to transform that range to something. 175 00:12:50,420 --> 00:12:57,668 We know that the noise scale, it works for us as a very small value, right. 176 00:12:57,668 --> 00:13:02,172 So we're using like 0.02, right. 177 00:13:02,172 --> 00:13:09,446 So let's just go from 0.01 to 0,1, right. 178 00:13:09,446 --> 00:13:14,518 Which again, it's probably a decent amount of increase. 179 00:13:14,518 --> 00:13:19,543 So we're giving some interactivity to the system by allowing 180 00:13:19,543 --> 00:13:24,438 the mouse x coordinate to change the scale on the left side. 181 00:13:24,438 --> 00:13:27,790 If the mouse is on the left side, it will be closer to 0,1 and 182 00:13:27,790 --> 00:13:30,630 if it's on the right side, it's going to be 0,1. 183 00:13:30,630 --> 00:13:31,634 So let's see. 184 00:13:33,214 --> 00:13:37,976 And you can see now that when the mouse is on this side of the screen, or 185 00:13:37,976 --> 00:13:41,016 when it's on this other side of the screen, 186 00:13:41,016 --> 00:13:46,054 we start seeing the scaling of this Perlin noise effect change, right. 187 00:13:47,754 --> 00:13:51,850 That's just a kind of a quick example of A, what is Perlin noise? 188 00:13:51,850 --> 00:13:56,817 And B, how we can start manipulating it and really first calibrating it so 189 00:13:56,817 --> 00:14:00,582 that we actually have something that suits our needs and 190 00:14:00,582 --> 00:14:07,114 something that we could use to maybe store or differentiate data in different ways. 191 00:14:07,114 --> 00:14:08,546 I invite you to try. 192 00:14:08,546 --> 00:14:13,266 In the examples, we have a mapping function with the mouse y coordinate 193 00:14:13,266 --> 00:14:18,064 that you could apply to the falloff or lod so that you can really visualize 194 00:14:18,064 --> 00:14:22,016 quite dynamically the different attributes of the noise. 195 00:14:22,016 --> 00:14:24,536 And we'll continue discussing Perlin noise in the next video. 196 00:14:24,536 --> 00:14:26,274 I'll see you then.