1 00:00:05,876 --> 00:00:07,870 So in this first video, 2 00:00:07,870 --> 00:00:14,214 we're going to learn how to construct a grid using a flat list, right? 3 00:00:14,214 --> 00:00:17,033 And this is going to be important because we're going to learn how to do it in two 4 00:00:17,033 --> 00:00:17,750 different ways. 5 00:00:17,750 --> 00:00:22,351 The first one is just going to basically pick a list and 6 00:00:22,351 --> 00:00:25,350 organize that list spatially. 7 00:00:25,350 --> 00:00:30,248 So let's see how a grid would actually work. 8 00:00:30,248 --> 00:00:33,698 We have a list, in this case a flat list, 9 00:00:33,698 --> 00:00:37,704 meaning that there's no lists within lists. 10 00:00:37,704 --> 00:00:41,152 There's no kind of additional data structures to it. 11 00:00:41,152 --> 00:00:43,835 And we can start organizing a string of numbers. 12 00:00:43,835 --> 00:00:46,836 As you can see here, we're kind of trying to represent these numbers a little bit 13 00:00:46,836 --> 00:00:48,791 like how they would actually operate within a list. 14 00:00:48,791 --> 00:00:51,475 But this is just one long string of numbers. 15 00:00:51,475 --> 00:00:57,834 There's nothing that is suggesting that they're in a spatial configuration. 16 00:00:57,834 --> 00:01:00,132 But if we start thinking of them in a grid, 17 00:01:00,132 --> 00:01:03,494 we might start kind of placing them in this fashion, right? 18 00:01:04,554 --> 00:01:09,641 The index of the list would be, we would have to assume that if they're 19 00:01:09,641 --> 00:01:15,438 going to be operating within a grid, they would be organized in this way, right? 20 00:01:15,438 --> 00:01:19,894 So the blue here, you can see the data and the index. 21 00:01:19,894 --> 00:01:21,571 If we move further, 22 00:01:21,571 --> 00:01:27,494 we can actually think that we can do a grid also with a for loop. 23 00:01:27,494 --> 00:01:33,822 We've done this before, which is just multiplying columns and rows. 24 00:01:33,822 --> 00:01:35,518 That's the number of entities that we're going to have. 25 00:01:35,518 --> 00:01:38,620 We're going to have four, in this case, columns, 26 00:01:38,620 --> 00:01:43,211 four rows, and that's the total number of entities that we have in the list. 27 00:01:43,211 --> 00:01:46,905 And we can populate that with a random integer, in this case, 28 00:01:46,905 --> 00:01:48,636 something that is random. 29 00:01:48,636 --> 00:01:53,385 This is not really working as code, but it's just giving us a hint that 30 00:01:53,385 --> 00:01:57,344 we're creating a random value within that list, right? 31 00:01:58,964 --> 00:02:03,827 But we could also, as we've done before, we can make a grid of colors. 32 00:02:03,827 --> 00:02:05,954 And this is how pixels really work, right? 33 00:02:05,954 --> 00:02:11,524 If you think of pixels in screen, this is a grid arrangement that contains, 34 00:02:11,524 --> 00:02:15,439 in each one of its indexes, in indices of the pixels, 35 00:02:15,439 --> 00:02:20,399 a grid will contain a particular color, in this case, a RGB color, 36 00:02:20,399 --> 00:02:25,036 right, or a hectadecimal color, as we've seen in past week. 37 00:02:25,036 --> 00:02:28,066 But in this point, we're not so concerned about the color information. 38 00:02:28,066 --> 00:02:35,287 Let's just think that a pixel arrangement is an arrangement of pixels in a screen. 39 00:02:35,287 --> 00:02:42,838 So let's learn how to build one of these grids from scratch in processing, right? 40 00:02:42,838 --> 00:02:45,450 So we're here in processing. 41 00:02:45,450 --> 00:02:50,065 Important things, as usual, 42 00:02:50,065 --> 00:02:56,099 we're going to create our image_size_x 43 00:02:56,099 --> 00:03:03,514 = 1200, 600 for x and y. 44 00:03:03,514 --> 00:03:05,298 I like this canvas size. 45 00:03:05,298 --> 00:03:07,297 I'm going to use the variable, 46 00:03:07,297 --> 00:03:11,194 I mean we want to keep track of what are the variables of a list. 47 00:03:11,194 --> 00:03:18,658 We want to have columns, we can use them calls or we can actually think of. 48 00:03:18,658 --> 00:03:24,514 The columns could be thought as the resolution of the grid in x, right? 49 00:03:24,514 --> 00:03:28,806 So I'm going to use something that represents, I like thinking of resolution 50 00:03:28,806 --> 00:03:32,512 because sometimes you want to increase the resolution of the grid or 51 00:03:32,512 --> 00:03:35,763 reduce the resolution of the grid and it makes more sense for 52 00:03:35,763 --> 00:03:37,762 me to think of resolution, right? 53 00:03:37,762 --> 00:03:41,202 But that's my way of thinking of the variable columns, right? 54 00:03:41,202 --> 00:03:43,162 The columns of the grid, the rows of the grid. 55 00:03:43,162 --> 00:03:48,008 So I'm going to call it resolution in x, 56 00:03:48,008 --> 00:03:52,578 reso_x, and that's going to be 10. 57 00:03:52,578 --> 00:03:56,714 And reso_y, it's 10 as well, right? 58 00:03:56,714 --> 00:04:02,894 So let's start with just the same number of columns and rows. 59 00:04:04,074 --> 00:04:07,050 And here we're going to start our empty list. 60 00:04:07,050 --> 00:04:09,316 So let's just store colors. 61 00:04:09,316 --> 00:04:17,234 So my_color_list = [], right? 62 00:04:17,234 --> 00:04:24,074 So so far we've declared a few variables, one that has to do with the window size. 63 00:04:24,074 --> 00:04:27,574 Let's just actually use those for our setup, our window. 64 00:04:29,674 --> 00:04:33,878 And we can, let's start with a background, a black background as we do. 65 00:04:37,234 --> 00:04:41,568 And then also the size of 66 00:04:41,568 --> 00:04:46,985 the window will be determined 67 00:04:46,985 --> 00:04:51,540 by the size of the image. 68 00:04:51,540 --> 00:04:52,814 So that's kind of pretty standard. 69 00:04:54,164 --> 00:04:56,264 We will be constructing our list here. 70 00:04:58,204 --> 00:05:00,972 The way we will construct the list will be with a for loop, right? 71 00:05:00,972 --> 00:05:04,764 So let's just first start with that for loop. 72 00:05:04,764 --> 00:05:10,744 And we're going to say, well, for i in range, 73 00:05:15,004 --> 00:05:19,124 The range will be from 0 to the maximum resolution. 74 00:05:19,124 --> 00:05:24,152 So how do we calculate the total number of entities that we have in that grid? 75 00:05:24,152 --> 00:05:29,472 Well, we can use the reso_x * reso_y, right? 76 00:05:29,472 --> 00:05:33,544 Because we know that that number, if we multiply the number of columns and 77 00:05:33,544 --> 00:05:37,550 the number of rows, that will give us the total number of entities that we 78 00:05:37,550 --> 00:05:39,404 want to have in this list, right? 79 00:05:40,584 --> 00:05:46,360 So that is going to be our Q for the size of the list. 80 00:05:46,360 --> 00:05:48,208 So what do we want to include here? 81 00:05:48,208 --> 00:05:52,854 Let's just start thinking that we want to populate in the list. 82 00:05:52,854 --> 00:05:58,469 So my list dot append, something like, 83 00:05:58,469 --> 00:06:02,574 we could append the value. 84 00:06:02,574 --> 00:06:05,554 We're going to add color to this list. 85 00:06:06,654 --> 00:06:12,454 So we could think of it this way, maybe like RGB, right? 86 00:06:12,454 --> 00:06:19,868 Or for now we could just say, hey, let's just add the same color information, 87 00:06:19,868 --> 00:06:23,864 something like 255, 0, 0, right? 88 00:06:25,524 --> 00:06:30,624 So something like this, a tuple that represents the color red. 89 00:06:33,764 --> 00:06:36,864 So we're adding that to that list at this point. 90 00:06:38,284 --> 00:06:40,652 Let's just make sure that this is actually running. 91 00:06:40,652 --> 00:06:41,636 Nothing should happen. 92 00:06:41,636 --> 00:06:43,671 We're not displaying anything yet, but 93 00:06:43,671 --> 00:06:46,764 I just want to make sure we're not running into errors, right? 94 00:06:50,464 --> 00:06:54,404 That's the way we actually have populated data to the list. 95 00:06:56,864 --> 00:07:02,472 The challenge right now has to do with visualizing what we have. 96 00:07:02,472 --> 00:07:04,989 Basically, we're going to replace this placeholder for 97 00:07:04,989 --> 00:07:06,924 something that is a random color, right? 98 00:07:08,304 --> 00:07:10,112 So maybe we could start with that. 99 00:07:10,112 --> 00:07:15,792 We could say, hey, well, why don't we just do c_red? 100 00:07:15,792 --> 00:07:20,183 That could be a random color, 101 00:07:23,736 --> 00:07:29,790 randrange between 0 and 255, right? 102 00:07:29,790 --> 00:07:35,790 So we're going to copy this line three times for 103 00:07:35,790 --> 00:07:40,740 red, green, and blue, and all of them 104 00:07:40,740 --> 00:07:46,168 will have the same random range, right? 105 00:07:46,168 --> 00:07:51,674 So instead of storing or appending red on every frame, 106 00:07:51,674 --> 00:07:57,248 let's just append the red, green, and blue colors. 107 00:07:57,248 --> 00:07:59,704 Let's see if we are there. 108 00:08:01,749 --> 00:08:02,683 So we have this, right? 109 00:08:02,683 --> 00:08:07,327 So within the loop, we're basically storing this 110 00:08:07,327 --> 00:08:10,931 information as in a flat list, right? 111 00:08:10,931 --> 00:08:15,092 There's nothing, again, that that list is saying, I am spatial. 112 00:08:15,092 --> 00:08:19,260 But we do have variables that we use to create that list that 113 00:08:19,260 --> 00:08:23,051 signify that we will be using this as a grid, right? 114 00:08:23,051 --> 00:08:28,351 So the size of the list is in relation to the number of columns and 115 00:08:28,351 --> 00:08:32,593 number of rows that we currently have. 116 00:08:32,593 --> 00:08:37,501 So at this point, what we want to start considering is how 117 00:08:37,501 --> 00:08:40,313 do we draw a rectangle, right? 118 00:08:40,313 --> 00:08:45,130 Let's think that we want to draw that color just to represent the grid in some 119 00:08:45,130 --> 00:08:45,819 fashion. 120 00:08:45,819 --> 00:08:47,893 So let's imagine that we want to do a rectangle. 121 00:08:49,793 --> 00:08:53,289 We know that we need a position, a position in X, a position in Y. 122 00:08:53,289 --> 00:08:54,853 We need a size as well. 123 00:08:56,323 --> 00:09:03,006 And we want that to follow the random color in each one case, 124 00:09:03,006 --> 00:09:06,890 but also the grid configuration. 125 00:09:06,890 --> 00:09:10,211 So let's put some values here as a placeholder. 126 00:09:10,211 --> 00:09:16,052 Let's say 50, 50 and 20, 20, all right? 127 00:09:16,052 --> 00:09:18,203 So it's going to be a square. 128 00:09:18,203 --> 00:09:21,558 Every frame that we go through this is going to be the same square in 129 00:09:21,558 --> 00:09:22,595 the same place. 130 00:09:22,595 --> 00:09:27,187 We want to change that so that the position in X and 131 00:09:27,187 --> 00:09:33,893 the position in Y keeps changing in a way that we can convey a grid. 132 00:09:33,893 --> 00:09:39,873 So let's just create some variables that would allow us to do that, right? 133 00:09:41,253 --> 00:09:47,606 So let's create a variable called the current x. 134 00:09:47,606 --> 00:09:53,777 Or I'm going to specify it's going to be an integer current x. 135 00:09:53,777 --> 00:09:55,945 We're going to start with zero, right? 136 00:09:55,945 --> 00:10:02,633 So integer current Y equals zero. 137 00:10:02,633 --> 00:10:05,321 And. Why am I saying current, right? 138 00:10:05,321 --> 00:10:07,017 Why don't we just use X and Y? 139 00:10:07,017 --> 00:10:09,009 Well, I like to kind of specify here. 140 00:10:09,009 --> 00:10:10,257 Here, it's going to be an integer. 141 00:10:10,257 --> 00:10:11,961 So it's not going to be a 0,1. 142 00:10:11,961 --> 00:10:15,537 It's going to be an integer number and it's going to start in zero. 143 00:10:15,537 --> 00:10:20,315 And we are going to increase that number progressively over time, right? 144 00:10:20,315 --> 00:10:26,145 So we could say that this rectangle is going to use the current X and 145 00:10:26,145 --> 00:10:29,483 Y as its x and y coordinate. 146 00:10:29,483 --> 00:10:34,409 But every time that we do one rectangle, we finish doing one of 147 00:10:34,409 --> 00:10:39,433 these rectangles, we basically start creating one of them and 148 00:10:39,433 --> 00:10:42,811 we start moving a little bit to the right. 149 00:10:42,811 --> 00:10:46,856 So let's just say current y plus equals, 150 00:10:46,856 --> 00:10:51,173 let's say something like 50 for now. 151 00:10:51,173 --> 00:10:56,513 Understand that every time that we create this rectangle, 152 00:10:56,513 --> 00:10:59,833 we will move 50 units in x, right. 153 00:11:00,893 --> 00:11:05,381 We might want to make sure that the color of this rectangle is displayed correctly 154 00:11:05,381 --> 00:11:05,941 as well. 155 00:11:05,941 --> 00:11:11,416 So we can use the fill and we could use, in this case, 156 00:11:11,416 --> 00:11:16,957 this list entry or basically the same color coding. 157 00:11:16,957 --> 00:11:21,382 Let's just use basically this information here. 158 00:11:21,382 --> 00:11:25,021 It's the color that that rectangle should have, right? 159 00:11:25,021 --> 00:11:31,437 So we will do a rectangle which has those random colors. 160 00:11:31,437 --> 00:11:37,093 We want to make sure that we start visualizing what we are doing here. 161 00:11:37,093 --> 00:11:38,413 So what do we have here? 162 00:11:38,413 --> 00:11:40,645 We don't see anything at all. 163 00:11:40,645 --> 00:11:43,293 Let's see what's wrong here. 164 00:11:43,293 --> 00:11:47,193 So the current x and current y, at this point, 165 00:11:47,193 --> 00:11:53,237 we're trying to run this, but it seems to be having an error, right? 166 00:11:53,237 --> 00:11:54,833 Something missing. 167 00:11:56,333 --> 00:11:58,365 We're using a kind of big font, so 168 00:11:58,365 --> 00:12:02,584 I forgot here all the way to the top to import the random module, right? 169 00:12:02,584 --> 00:12:08,544 If we don't import random, all this functionality will not really work, right? 170 00:12:08,544 --> 00:12:11,178 So let's import the random module and 171 00:12:11,178 --> 00:12:15,171 see if we could actually get this to run well, all right? 172 00:12:15,171 --> 00:12:19,903 So we're still having some issue here. 173 00:12:20,963 --> 00:12:24,582 What I like doing often when I run into an error, right, 174 00:12:24,582 --> 00:12:27,825 I start kind of commenting out some code, right? 175 00:12:27,825 --> 00:12:35,635 So we could see, would this script run with that? 176 00:12:35,635 --> 00:12:38,462 We're still having some issues. 177 00:12:38,462 --> 00:12:39,459 Let's see here. 178 00:12:39,459 --> 00:12:45,603 Okay, so there's something in this particular line that is causing a problem. 179 00:12:45,603 --> 00:12:50,463 We are creating these rectangles moving in this direction, right? 180 00:12:51,803 --> 00:12:52,899 That's exactly what we wanted. 181 00:12:52,899 --> 00:13:00,736 We wanted to create rectangles that's starting to skip basically infinitely. 182 00:13:00,736 --> 00:13:02,757 We're starting to build a grid, but in this case, 183 00:13:02,757 --> 00:13:04,803 we're starting with a line, right? 184 00:13:04,803 --> 00:13:09,011 So let's try to bring up some of those lines and see what's the problem here. 185 00:13:09,011 --> 00:13:12,463 What is like that doesn't seem to have a problem. 186 00:13:13,523 --> 00:13:14,982 That doesn't solve. 187 00:13:14,982 --> 00:13:17,915 Here, we are seeing some issue here. 188 00:13:17,915 --> 00:13:22,801 So let's see why, 189 00:13:25,189 --> 00:13:28,613 This is, in fact, not working, right? 190 00:13:31,473 --> 00:13:40,977 So we will append, That tuple, there we go. 191 00:13:40,977 --> 00:13:47,153 So we couldn't just append three entries, right? 192 00:13:47,153 --> 00:13:50,017 We needed them to be a data structure in itself. 193 00:13:50,017 --> 00:13:53,188 So we are using, in this case, a tuple. 194 00:13:53,188 --> 00:13:56,140 We could have used a list as well. 195 00:13:56,140 --> 00:13:58,201 So that's kind of a common error here. 196 00:13:58,201 --> 00:14:01,961 Just making sure that we are appending just three things, right? 197 00:14:01,961 --> 00:14:05,489 The append command doesn't allow us to append three things, but rather one. 198 00:14:05,489 --> 00:14:11,649 The fill command does allow us to provide three entries independently, right, RGB. 199 00:14:11,649 --> 00:14:15,473 So I think this one should be fine. 200 00:14:15,473 --> 00:14:20,569 As you can see, we can actually create that first 201 00:14:20,569 --> 00:14:27,241 line of squares in random colors without any issues, right? 202 00:14:27,241 --> 00:14:28,521 So what are we missing here? 203 00:14:28,521 --> 00:14:31,705 We are actually, first of all, these squares are not really matching. 204 00:14:31,705 --> 00:14:33,545 They're kind of an arbitrary size. 205 00:14:33,545 --> 00:14:37,153 They are 20 units in x and 20 units in y. 206 00:14:37,153 --> 00:14:41,241 We definitely want to have what we described as a cell size, right? 207 00:14:41,241 --> 00:14:44,345 Just for them to match the entirety of the screen. 208 00:14:44,345 --> 00:14:51,373 So let's call cell_size_x. 209 00:14:51,373 --> 00:14:53,797 Let's start with zero, right? 210 00:14:53,797 --> 00:14:58,662 Or we could actually already incorporate the equation, 211 00:14:58,662 --> 00:15:03,625 right, that would be defining the cell size before we were 212 00:15:03,625 --> 00:15:07,069 using an arbitrary number like 20. 213 00:15:07,069 --> 00:15:11,099 But if we think about it, the cell size should be a division of the totality 214 00:15:11,099 --> 00:15:14,085 of the screen, which is described by the image size. 215 00:15:14,085 --> 00:15:16,705 So image size, that's 1200. 216 00:15:16,705 --> 00:15:21,649 Let's divide that by the resolution in x, right? 217 00:15:21,649 --> 00:15:26,607 So the cell will be a division between the entirety of the screen by 218 00:15:26,607 --> 00:15:31,129 the resolution, the number of columns we want, right? 219 00:15:31,129 --> 00:15:34,073 And that should give us a cell size. 220 00:15:34,073 --> 00:15:38,723 If we do this same equation, we're going to copy paste that and 221 00:15:38,723 --> 00:15:40,373 switch it from x to y. 222 00:15:41,693 --> 00:15:46,295 We will have a way of defining a cell that 223 00:15:46,295 --> 00:15:50,789 occupies the entirety of the screen. 224 00:15:50,789 --> 00:15:52,613 So let's try that. 225 00:15:52,613 --> 00:15:55,311 Cell x is going to be used here. 226 00:15:55,311 --> 00:16:00,120 Instead of the 20, we're going to be using the size of the cell in x. 227 00:16:00,120 --> 00:16:01,886 >> And the size of the cell in Y. 228 00:16:01,886 --> 00:16:05,318 So let's see if this is actually working as intended. 229 00:16:05,318 --> 00:16:11,520 So what we see here is that the rectangles changed in proportion, 230 00:16:11,520 --> 00:16:16,446 and now they're actually of equal size, right? 231 00:16:16,446 --> 00:16:19,878 But we are actually reaching the end of the screen. 232 00:16:19,878 --> 00:16:23,846 And what is actually happening is that these rectangles keep going in that 233 00:16:23,846 --> 00:16:24,878 direction in X. 234 00:16:24,878 --> 00:16:28,023 There's nothing telling them that they are actually aligned in a grid or 235 00:16:28,023 --> 00:16:30,710 they're actually thinking of a grid structure, right? 236 00:16:30,710 --> 00:16:36,670 So let's just add some logic for the construction of this grid. 237 00:16:36,670 --> 00:16:43,070 And because we are working within a single for loop or working in a flat list, 238 00:16:43,070 --> 00:16:47,674 we're doing this in a bit of a manual way, if you want. 239 00:16:48,814 --> 00:16:56,435 So we are going to say, Actually, 240 00:16:56,435 --> 00:17:01,295 this plus 50, you could say it's incorrect, right? 241 00:17:01,295 --> 00:17:05,516 Because the movement that we want in x 242 00:17:05,516 --> 00:17:10,424 should be equals to the cell size, right? 243 00:17:11,564 --> 00:17:14,276 Let's see if that's actually more like it. 244 00:17:14,276 --> 00:17:18,438 So before, what we were seeing is that these rectangles were overlapping with 245 00:17:18,438 --> 00:17:19,212 each other. 246 00:17:19,212 --> 00:17:22,004 And because we had enough of them, they were covering the screen. 247 00:17:22,004 --> 00:17:26,851 But if we think about it, the cell size, in order to have ten, one, two, 248 00:17:26,851 --> 00:17:31,776 three, four, five, six, seven, eight, nine, ten, we needed them to 249 00:17:31,776 --> 00:17:36,764 be displacing the next one by the size of the cell as well, right? 250 00:17:36,764 --> 00:17:41,196 So the current increment is in Y. 251 00:17:41,196 --> 00:17:45,996 So how do we actually do some logic that will determine that? 252 00:17:45,996 --> 00:17:51,582 We go to the next row, right, we transition to the next row in the grid. 253 00:17:51,582 --> 00:17:52,942 So let's do an if statement. 254 00:17:52,942 --> 00:17:54,302 We're going to do something like a typewriter. 255 00:17:54,302 --> 00:17:55,286 If you think. 256 00:17:55,286 --> 00:17:59,580 If you're familiar with typewriters, you write one line, 257 00:17:59,580 --> 00:18:03,113 you move back to square one on the second line, but 258 00:18:03,113 --> 00:18:08,294 you shift down a little bit for that next line to start, right? 259 00:18:08,294 --> 00:18:15,846 So we're going to say, well, if current x is bigger or equal. 260 00:18:15,846 --> 00:18:16,746 Bigger or equal. 261 00:18:16,746 --> 00:18:18,298 That's an if statement, right? 262 00:18:18,298 --> 00:18:22,542 One of the Boolean symbols that we currently have. 263 00:18:22,542 --> 00:18:23,917 Bigger or equal than what? 264 00:18:23,917 --> 00:18:24,703 The resolution, right? 265 00:18:24,703 --> 00:18:26,654 The resolution is what? 266 00:18:29,114 --> 00:18:32,370 The maximum number of entities that we can have in x. 267 00:18:32,370 --> 00:18:38,754 So if we reach ten in this case, or the resolution's maximum number, what happens? 268 00:18:38,754 --> 00:18:45,222 Well, we reset our current index in X will return to zero. 269 00:18:45,222 --> 00:18:51,174 So we go back all the way to zero and we increment the y. 270 00:18:51,174 --> 00:18:55,470 So, The y, 271 00:18:59,349 --> 00:19:03,979 We could say plus equals how much? 272 00:19:03,979 --> 00:19:09,554 The amount that we go down should be determined by the cell size in y, right? 273 00:19:10,934 --> 00:19:12,216 So in this way, 274 00:19:12,216 --> 00:19:17,918 the current x keeps incrementing always by the size of the cell in x. 275 00:19:17,918 --> 00:19:21,698 But then once we reach ten units, we flip, 276 00:19:21,698 --> 00:19:26,358 we return to zero and we increase y by the cell size. 277 00:19:26,358 --> 00:19:30,348 One way that you might want to do this slightly 278 00:19:30,348 --> 00:19:34,867 different is always counting by the number of one. 279 00:19:34,867 --> 00:19:37,753 So you're saying current x is one, two, three. 280 00:19:37,753 --> 00:19:42,184 And every time we move down, we know that we're in the second row. 281 00:19:42,184 --> 00:19:47,746 And then instead of using the current x and y directly here, 282 00:19:47,746 --> 00:19:52,428 you could actually use a variable like position. 283 00:19:52,428 --> 00:19:55,656 But take in consideration, then we can create an equation. 284 00:19:55,656 --> 00:19:59,504 We could actually do that method here as well to kind of clarify. 285 00:19:59,504 --> 00:20:00,544 How would that look? 286 00:20:00,544 --> 00:20:03,863 That might give you more information, like the current x and 287 00:20:03,863 --> 00:20:07,836 current y might represent the current row and column we're working in, 288 00:20:07,836 --> 00:20:11,004 as opposed to the actual values of the cell. 289 00:20:11,004 --> 00:20:14,131 But in this case, this small amount of logic here, 290 00:20:14,131 --> 00:20:17,380 it starts determining that we are transitioning. 291 00:20:17,380 --> 00:20:23,092 After we finish a column, sorry, a row, we move to the next, and so forth, right? 292 00:20:23,092 --> 00:20:26,004 Let's see what we're getting from this. 293 00:20:26,004 --> 00:20:33,028 So something is not really working still. 294 00:20:33,028 --> 00:20:39,271 We end up with these columns all together, right? 295 00:20:39,271 --> 00:20:43,896 Let's just check how our logic is somehow still missing something, right? 296 00:20:43,896 --> 00:20:47,404 So we are increasing in x. 297 00:20:53,684 --> 00:20:58,540 So here's the problem that I see. 298 00:20:58,540 --> 00:21:03,218 So because we are incrementing the cell size constantly by 299 00:21:03,218 --> 00:21:07,932 this large amount, the cell size, we should not do this. 300 00:21:07,932 --> 00:21:09,764 We should actually just put a one here. 301 00:21:09,764 --> 00:21:15,242 So every time we increment in x, we add a one, because we are actually counting 302 00:21:15,242 --> 00:21:20,832 in which column are we and which row are we, not the cell information, right? 303 00:21:20,832 --> 00:21:26,816 And whenever we want to increase y, we also do a one. 304 00:21:26,816 --> 00:21:31,548 That means that the current x and current y are not representative of 305 00:21:31,548 --> 00:21:36,033 the actual position of the rectangle, but they're, in fact, 306 00:21:36,033 --> 00:21:41,128 representative of the index of the current column and the current row. 307 00:21:41,128 --> 00:21:45,478 So let's just create a couple of variables, 308 00:21:45,478 --> 00:21:49,369 which will be position x and position y, 309 00:21:49,369 --> 00:21:55,132 which will take in consideration this new definition of x. 310 00:21:55,132 --> 00:21:58,596 So what would be position x here? 311 00:21:58,596 --> 00:22:04,156 Well, it would have to take in consideration the current index, 312 00:22:04,156 --> 00:22:10,438 which could be zero, one, two, up to ten, and then return back to zero. 313 00:22:10,438 --> 00:22:15,310 Times, right, let's just make a parenthesis here to make sure that 314 00:22:15,310 --> 00:22:18,464 this is fine, times the cell size, right? 315 00:22:18,464 --> 00:22:22,646 So what we're doing here, let's imagine that this index, 316 00:22:22,646 --> 00:22:25,576 the current x, represents zero column. 317 00:22:25,576 --> 00:22:29,224 Then column number zero times the cell size. 318 00:22:29,224 --> 00:22:32,704 Then that will give us the actual position of the rectangle. 319 00:22:32,704 --> 00:22:37,848 And if we do exactly the same thing for y, 320 00:22:37,848 --> 00:22:42,437 The position of the rectangle will be using 321 00:22:42,437 --> 00:22:47,033 the current count in x times the cell size. 322 00:22:47,033 --> 00:22:54,907 And I think that if we actually replace these two variables here. 323 00:22:54,907 --> 00:22:57,512 This could fix the problem that we were having, right? 324 00:22:57,512 --> 00:22:58,520 Let's see. 325 00:22:58,520 --> 00:23:01,200 Okay, so here we go. 326 00:23:01,200 --> 00:23:06,332 We actually have this grid that is using random colors, 327 00:23:06,332 --> 00:23:10,024 but it's not just a grid graphically. 328 00:23:10,024 --> 00:23:14,544 It's also containing an associated data structure, 329 00:23:14,544 --> 00:23:18,569 in this case, a list, which, as we discussed, 330 00:23:18,569 --> 00:23:22,936 doesn't have anything inherently special to it. 331 00:23:22,936 --> 00:23:27,577 But we are having enough data, enough information, in this case, the columns and 332 00:23:27,577 --> 00:23:29,792 rows that will allow us to retrieve. 333 00:23:29,792 --> 00:23:32,420 Let's say if we test the position of the mouse, 334 00:23:32,420 --> 00:23:35,640 we can identify that the position of the mouse spatially, 335 00:23:35,640 --> 00:23:39,274 it's in a region of that grid with disassociated color, right? 336 00:23:40,374 --> 00:23:45,768 So this is one of the interesting ways in which we could start thinking 337 00:23:45,768 --> 00:23:51,069 of grids as a way of building spatial structures that contain data, 338 00:23:51,069 --> 00:23:57,950 not only as a data structure, but also how that data structure is organized in space. 339 00:23:57,950 --> 00:24:00,848 The good thing about a script like this, as you already probably know, 340 00:24:00,848 --> 00:24:03,334 is that you can increase the resolution. 341 00:24:03,334 --> 00:24:04,554 Let's try that. 342 00:24:06,254 --> 00:24:11,314 It might be a bit slow, but you could still see that we 343 00:24:11,314 --> 00:24:18,518 created a pretty dense grid of 100 by 100, and that seems to scale. 344 00:24:18,518 --> 00:24:20,702 You can actually try it with different numbers. 345 00:24:20,702 --> 00:24:25,378 I wouldn't recommend to go too high if you don't want to 346 00:24:25,378 --> 00:24:30,054 melt your computer, but you can certainly see what if we 347 00:24:30,054 --> 00:24:35,030 actually have a much higher resolution in one direction and 348 00:24:35,030 --> 00:24:41,154 another one, we can actually end up with different patterns. 349 00:24:41,154 --> 00:24:45,514 So the spatial organization, this grid can certainly change resolution more intense 350 00:24:45,514 --> 00:24:47,374 on one direction than the other one. 351 00:24:48,954 --> 00:24:51,146 So we're going to leave this one here. 352 00:24:51,146 --> 00:24:55,198 This is a construction of a grid using a single list or 353 00:24:55,198 --> 00:24:57,698 a list that is in a flat format. 354 00:24:57,698 --> 00:25:01,668 We're going to learn how to use a nested list to construct a different kind 355 00:25:01,668 --> 00:25:02,290 of grid. 356 00:25:02,290 --> 00:25:03,114 I'll see you in the next video.