1 00:00:05,922 --> 00:00:10,905 Hi, welcome to this new and final video 2 00:00:10,905 --> 00:00:15,586 of at least code wise of this course. 3 00:00:15,586 --> 00:00:20,543 And we're going to conclude with looking at a form of dynamic grid 4 00:00:20,543 --> 00:00:24,951 by doing a process of resampling of this image, right? 5 00:00:24,951 --> 00:00:27,509 So let's see what I mean by that. 6 00:00:27,509 --> 00:00:32,702 If we are able to sample the color of an image, we could reconstruct 7 00:00:32,702 --> 00:00:38,292 that image using our own version of pixels, a rectangle, if you want. 8 00:00:38,292 --> 00:00:43,881 And we could reconstruct pixels at any size, right? 9 00:00:43,881 --> 00:00:48,921 This would require that we create a rather dynamic loop, 10 00:00:48,921 --> 00:00:53,131 one that is changing the number of iterations. 11 00:00:53,131 --> 00:00:58,609 It does in x and in y to achieve the right resolution of the image, right? 12 00:00:58,609 --> 00:01:03,834 But at the core is the idea of accessing a pixel first and 13 00:01:03,834 --> 00:01:07,026 getting the color of that pixel. 14 00:01:07,026 --> 00:01:09,504 So we're going to do that with the get function, right? 15 00:01:09,504 --> 00:01:12,921 An image in processing we have the get function, and 16 00:01:12,921 --> 00:01:17,750 the get function asks us to provide as an argument the x and y coordinates. 17 00:01:17,750 --> 00:01:18,536 In this case, 18 00:01:18,536 --> 00:01:23,004 we're going to use the coordinates of the mouse to get started and see how it works. 19 00:01:23,004 --> 00:01:27,211 And in that way, we'd actually display the color. 20 00:01:27,211 --> 00:01:31,644 But then we can reconstruct many pixels using this technique, right? 21 00:01:31,644 --> 00:01:35,240 So let's jump into processing and see how to implement this. 22 00:01:35,240 --> 00:01:40,403 Okay, so we are here, I have a little bit of a boilerplate to get started. 23 00:01:40,403 --> 00:01:44,892 This is a very simple code that we've covered already, 24 00:01:44,892 --> 00:01:51,018 how we load an image and how do we display that image in the draw loop, right? 25 00:01:51,018 --> 00:01:57,425 So we are going to start by understanding the get function, right? 26 00:01:57,425 --> 00:02:04,107 So let's create a color that is going to be img.get. 27 00:02:04,107 --> 00:02:12,658 And here we can use something like mouse X and mouse Y. 28 00:02:12,658 --> 00:02:17,672 And let's create a rectangle that is 29 00:02:17,672 --> 00:02:22,522 going to be also in mouse X and mouse Y, 30 00:02:22,522 --> 00:02:26,738 40 and 40 pixels, right? 31 00:02:26,738 --> 00:02:33,287 And we can define that the stroke of that rectangle is going to be white and 32 00:02:33,287 --> 00:02:40,620 the, sorry, the fill is going to be the color that we just constructed, right? 33 00:02:40,620 --> 00:02:42,932 So what is this get function doing? 34 00:02:42,932 --> 00:02:45,998 Let's see, first this is running. 35 00:02:45,998 --> 00:02:46,677 There we go. 36 00:02:46,677 --> 00:02:51,675 So the get function is going to return the value of the color that 37 00:02:51,675 --> 00:02:54,029 we are evaluating, right? 38 00:02:54,029 --> 00:02:58,682 So as we kind of use this pointer, we can actually determine 39 00:02:58,682 --> 00:03:02,787 different colors and we can use those for fill here. 40 00:03:02,787 --> 00:03:06,898 So this is kind of like a color picker kind of tool. 41 00:03:06,898 --> 00:03:11,000 And that seems to work pretty well, if you can extend it, 42 00:03:11,000 --> 00:03:15,271 if you want to also display with a font, maybe the rgb color or 43 00:03:15,271 --> 00:03:20,496 maybe even hexadecimal color, which we're going to cover in course two. 44 00:03:20,496 --> 00:03:25,585 But again, very useful tool to have a color picker if you need that. 45 00:03:25,585 --> 00:03:31,166 But let's just use this idea of the get function. 46 00:03:31,166 --> 00:03:34,220 So that many rectangles can use a get function and 47 00:03:34,220 --> 00:03:37,288 paint themselves basically on the right color. 48 00:03:37,288 --> 00:03:39,088 So we're going to reconstruct the image and 49 00:03:39,088 --> 00:03:41,360 resample that image in a kind of a lower resolution. 50 00:03:41,360 --> 00:03:46,039 Let's just start by defining a resolution. 51 00:03:46,039 --> 00:03:52,015 So the resolution in x, it's going to be, 52 00:03:52,015 --> 00:03:55,833 sorry, canvas width, and 53 00:03:55,833 --> 00:04:02,477 the resolution y is going to be the canvas height. 54 00:04:02,477 --> 00:04:04,168 But if you think about it, right? 55 00:04:04,168 --> 00:04:06,980 We want to reduce the resolution. 56 00:04:06,980 --> 00:04:08,570 We cannot increase the resolution. 57 00:04:08,570 --> 00:04:12,421 We don't have more pixels to work with, but we can decrease the resolution. 58 00:04:12,421 --> 00:04:15,559 So we're going to multiply that amount. 59 00:04:15,559 --> 00:04:17,829 Let's say we want half the canvas, right? 60 00:04:17,829 --> 00:04:21,970 So we can actually create a variable called pixel scale, 61 00:04:21,970 --> 00:04:25,777 which is going to be something like 0.1, right? 62 00:04:25,777 --> 00:04:31,049 And let's imagine that we multiply the canvas width and 63 00:04:31,049 --> 00:04:35,773 the canvas height times the pixel scale, right? 64 00:04:35,773 --> 00:04:39,379 So this variable now will continue if we want to do half resolution, 65 00:04:39,379 --> 00:04:40,978 we would say 0.5, right? 66 00:04:40,978 --> 00:04:44,100 Maybe start half of the resolution, right? 67 00:04:44,100 --> 00:04:46,447 So that's all good. 68 00:04:46,447 --> 00:04:48,997 Finally, we also will determine, 69 00:04:48,997 --> 00:04:53,588 based on the information we have, what would be the pixel size. 70 00:04:53,588 --> 00:04:59,332 So the pixel size we can derive it from, 71 00:04:59,332 --> 00:05:05,079 it's going to be the canvas width divided 72 00:05:05,079 --> 00:05:09,792 by the resolution in x, right? 73 00:05:09,792 --> 00:05:15,331 So we could do, because we're doing a rectangular grid or 74 00:05:15,331 --> 00:05:20,428 our square, our pixel size is going to be rectangular. 75 00:05:20,428 --> 00:05:25,998 We can use either x or y. 76 00:05:25,998 --> 00:05:29,290 But basically what we're doing is saying, whatever, 77 00:05:29,290 --> 00:05:32,663 how big is the canvas let's divide it by the resolution. 78 00:05:32,663 --> 00:05:36,470 So if we're kind of deciding a resolution of 200 pixels, 79 00:05:36,470 --> 00:05:39,317 we divide the canvas width by 200 pixels. 80 00:05:39,317 --> 00:05:42,605 Then we're going to end up how big the pixel should be, all right? 81 00:05:42,605 --> 00:05:47,519 So we're creating some variables that would actually make our 82 00:05:47,519 --> 00:05:52,626 life allow everything to be interconnected in a way, all right? 83 00:05:52,626 --> 00:05:53,707 So here we go. 84 00:05:53,707 --> 00:05:56,574 So now everything that we did with the mouse, 85 00:05:56,574 --> 00:05:58,992 we want to do it within a loop, right? 86 00:05:58,992 --> 00:06:04,432 So for i in range, here, 87 00:06:04,432 --> 00:06:11,435 we're going to use resolution x. 88 00:06:11,435 --> 00:06:16,740 But notice that out of this equation, the canvas width and 89 00:06:16,740 --> 00:06:20,418 pixel scale, which is a decimal place, 90 00:06:20,418 --> 00:06:25,412 we might end up getting floating point value, right? 91 00:06:25,412 --> 00:06:29,320 So let's make sure that the resolution, because we're using it in a loop. 92 00:06:29,320 --> 00:06:32,182 Let's make sure that we use an integer. 93 00:06:32,182 --> 00:06:36,849 So we declare that that's going to be an integer of whatever we're getting here. 94 00:06:36,849 --> 00:06:42,366 We can copy paste this now and do a second version. 95 00:06:42,366 --> 00:06:49,822 Let's make sure we change that for variable j and resolution y, right? 96 00:06:49,822 --> 00:06:50,545 So that's all good. 97 00:06:50,545 --> 00:06:55,657 Now, we can actually indent our lines here. 98 00:06:55,657 --> 00:06:58,962 All of them are within this nested loop. 99 00:06:58,962 --> 00:07:04,278 And we can actually define where it would be the x coordinate 100 00:07:04,278 --> 00:07:09,820 of our first rectangle, which is going to be i times pixel size. 101 00:07:09,820 --> 00:07:13,884 We've done this before with an arbitrary 20, I think, or something like that. 102 00:07:13,884 --> 00:07:16,141 Many times we reconstructed a grid. 103 00:07:16,141 --> 00:07:20,872 So, hopefully you're familiar already with some of these ideas. 104 00:07:20,872 --> 00:07:24,631 We're trying to really tie all the variables with each other this time. 105 00:07:24,631 --> 00:07:30,218 So we're doing x and y is i times pixel size, 106 00:07:30,218 --> 00:07:34,305 y is j times pixel size, right? 107 00:07:34,305 --> 00:07:37,659 So now we're actually evaluating the color, 108 00:07:37,659 --> 00:07:42,475 but instead of using the mouse coordinate, we're going to use the, 109 00:07:42,475 --> 00:07:45,921 let's evaluate the x coordinate, all right? 110 00:07:45,921 --> 00:07:48,677 And here we can evaluate the y coordinate, all right? 111 00:07:48,677 --> 00:07:51,059 So, because we're going to be doing this in a loop, 112 00:07:51,059 --> 00:07:54,546 we're going to do it for each one of the rectangles that we're going to draw. 113 00:07:54,546 --> 00:08:02,097 And each one of the rectangles should also be located in x and y, all right? 114 00:08:02,097 --> 00:08:08,787 So we basically have, let's just comment out. 115 00:08:08,787 --> 00:08:11,020 Well, let's just leave it as it is right now. 116 00:08:11,020 --> 00:08:13,749 Let's see what we're getting. 117 00:08:13,749 --> 00:08:16,089 We have a loop. 118 00:08:16,089 --> 00:08:20,323 So we're running into an error. 119 00:08:20,323 --> 00:08:25,837 What could be an error? 120 00:08:25,837 --> 00:08:32,467 This division could also end up resulting in some decimal. 121 00:08:32,467 --> 00:08:37,485 So let's just make sure that we do 122 00:08:37,485 --> 00:08:42,875 an integer wrapper for x and y here. 123 00:08:42,875 --> 00:08:46,798 Let's double check that. 124 00:08:46,798 --> 00:08:50,184 So, okay, that seems to be working. 125 00:08:50,184 --> 00:08:53,184 But we see a lot of white. 126 00:08:53,184 --> 00:09:00,554 So I think that what we're seeing here, let's just comment out for a moment. 127 00:09:00,554 --> 00:09:03,765 The stroke value to change it for a noStroke, 128 00:09:03,765 --> 00:09:08,341 because I feel like that might be interfering in our visualization. 129 00:09:08,341 --> 00:09:14,056 So we're getting that, but we don't see much of a difference. 130 00:09:14,056 --> 00:09:15,478 Maybe we see a little bit of pixelation. 131 00:09:15,478 --> 00:09:21,890 Let's see if we can actually reduce the value of the pixel scale. 132 00:09:21,890 --> 00:09:27,430 So now we can actually have the pixel scale controlling 133 00:09:27,430 --> 00:09:31,652 the pixelation that we have, all right? 134 00:09:31,652 --> 00:09:35,642 So this is 0, 1. 135 00:09:35,642 --> 00:09:40,259 And here we actually make it. 136 00:09:40,259 --> 00:09:44,123 We broke the system somehow, so 137 00:09:44,123 --> 00:09:49,858 we'll have to figure out what's wrong there. 138 00:09:49,858 --> 00:09:52,737 Let's just take it up again. 139 00:09:52,737 --> 00:09:57,974 What about zero point? 140 00:09:57,974 --> 00:10:02,704 Okay, so it seems to be working within certain ranges, and certain ranges break. 141 00:10:02,704 --> 00:10:08,276 So, why don't we make what we've done before map this variable. 142 00:10:08,276 --> 00:10:09,203 Let's make it dynamic, right? 143 00:10:09,203 --> 00:10:14,405 So let's map it from the mouse x coordinate 144 00:10:14,405 --> 00:10:21,210 that we know that goes between zero to the canvas width. 145 00:10:21,210 --> 00:10:24,570 That's the first domain of the mouse x variable. 146 00:10:24,570 --> 00:10:29,682 And then the second domain, we want to achieve something 147 00:10:29,682 --> 00:10:34,168 between 0.01 and let's say 0.3, right? 148 00:10:34,168 --> 00:10:36,820 It could be higher, it could be 0.5. 149 00:10:36,820 --> 00:10:40,595 But maybe this is a good place to start, right? 150 00:10:40,595 --> 00:10:42,812 Let's just double check this now. 151 00:10:42,812 --> 00:10:50,178 So it seems that the pixelation effect is kind of working, right? 152 00:10:50,178 --> 00:10:53,215 As we kind of move further down, 153 00:10:53,215 --> 00:10:58,281 we can see the pixelation effect working quite well. 154 00:10:58,281 --> 00:11:03,922 I think at some point, we start breaking it, and we can see what's happening here. 155 00:11:03,922 --> 00:11:06,250 At some point, the separation, 156 00:11:06,250 --> 00:11:10,501 this pixel starts separating from each other and breaking. 157 00:11:10,501 --> 00:11:14,704 So that's quite interesting. 158 00:11:14,704 --> 00:11:17,632 Let's just see what is the error there. 159 00:11:17,632 --> 00:11:19,111 Okay, I see the problem. 160 00:11:19,111 --> 00:11:24,249 So, we are using a kind of an arbitrary size of pixel, all right? 161 00:11:24,249 --> 00:11:25,627 Which is 40. 162 00:11:25,627 --> 00:11:33,015 And that value doesn't cut it when it has to be bigger, right? 163 00:11:33,015 --> 00:11:37,303 It actually was not really working very well when it was higher because it was 164 00:11:37,303 --> 00:11:38,578 kind of overlapping. 165 00:11:38,578 --> 00:11:39,763 So let's see what we get now. 166 00:11:39,763 --> 00:11:44,170 So, now we actually get a much cleaner 167 00:11:44,170 --> 00:11:49,281 version of this where we can get all the way. 168 00:11:49,281 --> 00:11:50,617 So, if you think about it, 169 00:11:50,617 --> 00:11:53,654 what we're doing now is kind of quite a dynamic loop, right? 170 00:11:53,654 --> 00:11:59,956 The loop is changing how many x like or how many iterations it does in I and 171 00:11:59,956 --> 00:12:04,377 in J, depending on how we move the mouse, right? 172 00:12:04,377 --> 00:12:08,661 But we're making sure that through the kind of association between variables, 173 00:12:08,661 --> 00:12:11,566 that we're keeping all the variables still working. 174 00:12:11,566 --> 00:12:16,266 One of the things that I've noticed here is that this loop, 175 00:12:16,266 --> 00:12:20,969 especially if you, let's bring back the stroke, right? 176 00:12:20,969 --> 00:12:26,991 So, here in the stroke value, 255 is maybe too strong. 177 00:12:26,991 --> 00:12:33,368 Let's just give it some transparency, so we can see a faint line. 178 00:12:33,368 --> 00:12:36,939 I don't know you can see it, but 179 00:12:36,939 --> 00:12:41,052 maybe we need a little bit stronger. 180 00:12:41,052 --> 00:12:42,429 That's a little bit more visible. 181 00:12:42,429 --> 00:12:48,613 But again, on the bottom and the left side of this grid, 182 00:12:48,613 --> 00:12:54,545 there seems sometimes to be a pixel missing, right? 183 00:12:54,545 --> 00:13:00,112 So what we could do is actually increase the size of this pixel or 184 00:13:00,112 --> 00:13:02,853 loop to whatever it is plus 1. 185 00:13:02,853 --> 00:13:07,613 Just let's make sure that we get one extra 186 00:13:07,613 --> 00:13:12,107 iteration no matter what, all right? 187 00:13:12,107 --> 00:13:19,170 So that we can make sure that we cover the last row of pixels, all right? 188 00:13:19,170 --> 00:13:20,654 In both x and y. 189 00:13:20,654 --> 00:13:24,576 So here we have a really well calibrated every time. 190 00:13:24,576 --> 00:13:27,740 If you think about how can we pixelate this image, I mean, 191 00:13:27,740 --> 00:13:31,115 you can obviously take it into Photoshop and change the size. 192 00:13:31,115 --> 00:13:35,953 But here, we're kind of sampling each pixel to what would 193 00:13:35,953 --> 00:13:38,330 be their coordinate color. 194 00:13:38,330 --> 00:13:42,036 Again, it could be like an interesting effect if you start mixing some of 195 00:13:42,036 --> 00:13:43,876 the things that we've been doing. 196 00:13:43,876 --> 00:13:45,961 If you mix the previous session, 197 00:13:45,961 --> 00:13:50,588 you could create a color palette of 3,4,5 colors and then pixelate. 198 00:13:50,588 --> 00:13:56,631 You might be able to get some form of pixel art achieved with this technique. 199 00:13:56,631 --> 00:13:58,755 So, again, the invitation is to really mix and 200 00:13:58,755 --> 00:14:01,313 match some of the techniques that we've been learning. 201 00:14:01,313 --> 00:14:05,258 So with this, a very kind of dynamic, associative, 202 00:14:05,258 --> 00:14:11,322 nested loop of resampling and pixelection, we're going to conclude this course. 203 00:14:11,322 --> 00:14:15,200 I hope that you really enjoy the content that we have offered here, 204 00:14:15,200 --> 00:14:18,118 and that you can really use that for your own work. 205 00:14:18,118 --> 00:14:21,302 And I invite you to check course two. 206 00:14:21,302 --> 00:14:25,405 We're going to do a quick recap in the next session and 207 00:14:25,405 --> 00:14:29,611 also share with you what we're going to be doing next. 208 00:14:29,611 --> 00:14:30,484 So I'll see you in the next video.