1 00:00:04,080 --> 00:00:06,560 Welcome to this new lesson. 2 00:00:06,560 --> 00:00:09,460 We're going to be starting to understand how do 3 00:00:09,460 --> 00:00:13,145 we access information in a grid structure. 4 00:00:13,145 --> 00:00:15,600 Let's look at this example. 5 00:00:15,600 --> 00:00:17,460 In this example, we have 6 00:00:17,460 --> 00:00:21,200 a grid that has been created using a list, 7 00:00:21,200 --> 00:00:24,020 which is a one dimensional list, 8 00:00:24,020 --> 00:00:26,100 and you can see that the distribution of 9 00:00:26,100 --> 00:00:29,680 the index numbers goes until we reach, 10 00:00:29,680 --> 00:00:31,760 in this case, three, which is the number of 11 00:00:31,760 --> 00:00:34,845 columns that we have, and then we continue. 12 00:00:34,845 --> 00:00:37,635 If we select, in this case, 13 00:00:37,635 --> 00:00:41,460 the index 5 we will get number 7. 14 00:00:41,460 --> 00:00:43,180 What we're trying to understand here 15 00:00:43,180 --> 00:00:45,280 is what is the relationship between 16 00:00:45,280 --> 00:00:47,480 the index number and how 17 00:00:47,480 --> 00:00:50,520 the index is mapped throughout the grid. 18 00:00:50,520 --> 00:00:53,700 This definitely changes depending 19 00:00:53,700 --> 00:00:55,420 on the grid structure that you're using. 20 00:00:55,420 --> 00:00:57,000 If you're using a nested structure, 21 00:00:57,000 --> 00:00:58,920 as we've seen in previous videos, 22 00:00:58,920 --> 00:01:02,260 the way in which we access that information is different. 23 00:01:02,260 --> 00:01:04,370 The one thing I want you to start considering 24 00:01:04,370 --> 00:01:07,890 is the operations that we could start doing, 25 00:01:07,890 --> 00:01:09,250 and we're going to talk more about this, 26 00:01:09,250 --> 00:01:10,950 which is neighbor operations. 27 00:01:10,950 --> 00:01:12,610 But starting to think, well, 28 00:01:12,610 --> 00:01:16,215 if the index 5 is number 7 here, 29 00:01:16,215 --> 00:01:19,950 perhaps we can start thinking that the adjacent elements 30 00:01:19,950 --> 00:01:24,250 or entities are whatever number we're considering, 31 00:01:24,250 --> 00:01:28,745 the index minus one or an index plus one. 32 00:01:28,745 --> 00:01:31,550 Here we mentioned this has exceptions 33 00:01:31,550 --> 00:01:34,270 because when you are in the number 4, 34 00:01:34,270 --> 00:01:37,250 for instance, your neighbor to the left 35 00:01:37,250 --> 00:01:41,415 will not be a minus one which would be in this case 12. 36 00:01:41,415 --> 00:01:46,430 This formula that we're starting to see here, 37 00:01:46,430 --> 00:01:49,130 that's not really apply all the time, 38 00:01:49,130 --> 00:01:50,410 especially with entities that 39 00:01:50,410 --> 00:01:52,010 might not have neighbors to the left. 40 00:01:52,010 --> 00:01:54,050 But it's important that we start 41 00:01:54,050 --> 00:01:56,810 understanding that the index of an entity, 42 00:01:56,810 --> 00:01:59,770 a piece of data, has adjacent neighbors 43 00:01:59,770 --> 00:02:01,010 because we're going to start seeing 44 00:02:01,010 --> 00:02:03,495 algorithms that use those properties. 45 00:02:03,495 --> 00:02:05,300 Let's look at an example where 46 00:02:05,300 --> 00:02:06,860 we actually have a nested list. 47 00:02:06,860 --> 00:02:09,240 In the case of a nested list, 48 00:02:09,240 --> 00:02:11,600 we actually have the index of 49 00:02:11,600 --> 00:02:15,210 the first order of the list, 50 00:02:15,210 --> 00:02:20,320 0, 1, so basically zero on the first row, 51 00:02:20,320 --> 00:02:22,525 one on the second row, and so on. 52 00:02:22,525 --> 00:02:26,675 Then we actually can see the second index, 53 00:02:26,675 --> 00:02:30,460 so we have two indices denotating 54 00:02:30,460 --> 00:02:35,050 basically the element that we're actually achieving. 55 00:02:35,050 --> 00:02:36,920 It's actually a little bit more straightforward. 56 00:02:36,920 --> 00:02:41,520 The element 1, 1 here is the entity number 7. 57 00:02:41,520 --> 00:02:45,750 You see that the index information changes 58 00:02:45,750 --> 00:02:47,170 and we need to be aware 59 00:02:47,170 --> 00:02:49,590 of what is the data structure are we using? 60 00:02:49,590 --> 00:02:51,330 How is that index information is 61 00:02:51,330 --> 00:02:53,570 being mapped to the grid in 62 00:02:53,570 --> 00:02:57,780 order to achieve and get the result that we really want. 63 00:02:57,780 --> 00:03:00,430 Similarly, neighbor operations when we're looking 64 00:03:00,430 --> 00:03:03,250 at a nested list will also change. 65 00:03:03,250 --> 00:03:04,690 We will start again. 66 00:03:04,690 --> 00:03:06,190 We have the exceptions, which is something that 67 00:03:06,190 --> 00:03:07,910 we're going to look in future videos. 68 00:03:07,910 --> 00:03:10,020 But we actually can't start looking into 69 00:03:10,020 --> 00:03:13,470 the horizontal neighbors left and 70 00:03:13,470 --> 00:03:17,080 right by considering the n+1, 71 00:03:17,080 --> 00:03:20,100 basically the index plus one or minus one. 72 00:03:20,100 --> 00:03:24,060 Let's look at some piece of data as colors. 73 00:03:24,060 --> 00:03:26,420 We've been using colors as hexadecimals, 74 00:03:26,420 --> 00:03:28,480 but we also can use colors as RGB, 75 00:03:28,480 --> 00:03:30,520 as we've been discussing. 76 00:03:30,520 --> 00:03:34,200 If you have a flat list, as we see here, 77 00:03:34,200 --> 00:03:38,240 if we want to retrieve this particular information, 78 00:03:38,240 --> 00:03:40,580 this color on this location, 79 00:03:40,580 --> 00:03:43,100 the location number 5, 80 00:03:43,100 --> 00:03:45,940 we use that in the index. 81 00:03:45,940 --> 00:03:48,200 It's important that we're aware of how 82 00:03:48,200 --> 00:03:50,500 this index information is mapped. 83 00:03:50,500 --> 00:03:52,080 Let's move into processing and 84 00:03:52,080 --> 00:03:54,660 do an example where we're going to 85 00:03:54,660 --> 00:03:59,475 start utilizing the index information for a design. 86 00:03:59,475 --> 00:04:02,680 We're going to jump into processing and we're going to 87 00:04:02,680 --> 00:04:05,600 start by creating a random grid, 88 00:04:05,600 --> 00:04:06,910 or a grid of random colors, 89 00:04:06,910 --> 00:04:08,700 and we're going to try to move quickly through 90 00:04:08,700 --> 00:04:10,900 this part of the code, 91 00:04:10,900 --> 00:04:14,620 as you probably are familiar with this material already. 92 00:04:15,290 --> 00:04:31,940 Let's create some variables 93 00:04:31,940 --> 00:04:34,545 to create the size of the Canvas. 94 00:04:34,545 --> 00:04:37,260 We're going to use image size. 95 00:04:37,260 --> 00:04:40,760 I'd like to parameterize those variables, 96 00:04:41,160 --> 00:04:44,420 meaning create variables for them, 97 00:04:44,420 --> 00:04:46,260 just because we can use that 98 00:04:46,260 --> 00:04:49,810 to identify and create the grid later. 99 00:04:51,820 --> 00:04:55,090 Let's make sure that things are running. 100 00:04:55,090 --> 00:04:57,090 Here we go. We have a black background. 101 00:04:57,090 --> 00:04:59,490 If you want to make it a different color, 102 00:04:59,490 --> 00:05:03,130 by all means, you can do so. 103 00:05:03,130 --> 00:05:05,330 What we want to do is define 104 00:05:05,330 --> 00:05:08,000 the resolution of 105 00:05:08,000 --> 00:05:09,860 the grid that we're going to be creating. 106 00:05:09,860 --> 00:05:12,800 Let's do 100 units in 107 00:05:12,800 --> 00:05:18,890 x and resolution in y we're going to do 50, 108 00:05:18,890 --> 00:05:22,025 sorry, this should have been 1,200 I wanted to have 109 00:05:22,025 --> 00:05:25,625 a relationship between 2-1 something horizontal. 110 00:05:25,625 --> 00:05:27,290 Then a similar relationship for the grade, 111 00:05:27,290 --> 00:05:30,605 so that we can actually end up with squares. 112 00:05:30,605 --> 00:05:34,985 We also are going to start a list. 113 00:05:34,985 --> 00:05:40,860 Let's do my position list. 114 00:05:41,620 --> 00:05:44,450 This is going to be an empty list. 115 00:05:44,450 --> 00:05:46,265 What are we going to store here? 116 00:05:46,265 --> 00:05:48,035 We are going to store 117 00:05:48,035 --> 00:05:51,590 positions just because we want to make a difference 118 00:05:51,590 --> 00:05:53,300 between understanding what is 119 00:05:53,300 --> 00:05:56,990 an index position and the actual position of an entity, 120 00:05:56,990 --> 00:05:58,910 a piece of data in the grid. 121 00:05:58,910 --> 00:06:04,490 I think that that's an important lesson to take home. 122 00:06:04,490 --> 00:06:08,735 Let's just start creating a grid. 123 00:06:08,735 --> 00:06:14,090 We can actually define resolution, that's 50. 124 00:06:14,090 --> 00:06:17,750 We can also define a cell size. 125 00:06:17,750 --> 00:06:22,145 The cell size is going to be a result of a calculation. 126 00:06:22,145 --> 00:06:27,740 Let's do a cell size in X, 127 00:06:27,740 --> 00:06:29,780 and we're going to start with a zero and 128 00:06:29,780 --> 00:06:32,190 so this is going to be a placeholder. 129 00:06:35,230 --> 00:06:38,915 Cell size in Y, also at zero. 130 00:06:38,915 --> 00:06:44,030 The next thing we need is calculate the cell size. 131 00:06:44,030 --> 00:06:46,190 The cell size is something that we want 132 00:06:46,190 --> 00:06:48,860 to be a division between 133 00:06:48,860 --> 00:06:51,500 the size of our grid or 134 00:06:51,500 --> 00:06:55,680 our canvas divided by the resolution. 135 00:06:56,590 --> 00:07:00,680 If you think of the size 1200/100 136 00:07:00,680 --> 00:07:03,305 that's going to give us the cell size in X. 137 00:07:03,305 --> 00:07:11,090 We can do exactly the same thing for our cell size in Y. 138 00:07:11,090 --> 00:07:14,420 Let's just divide the size of the screen by 139 00:07:14,420 --> 00:07:18,170 the resolution of the green in order 140 00:07:18,170 --> 00:07:20,990 to cover the grid 141 00:07:20,990 --> 00:07:23,240 or the screen completely with 142 00:07:23,240 --> 00:07:25,380 the entities that we're going to be drawing. 143 00:07:25,380 --> 00:07:29,890 The next step would actually be create a nested loop. 144 00:07:29,890 --> 00:07:33,680 We're going to do for I in range. 145 00:07:34,630 --> 00:07:41,190 Here we want to use zero the resolution in x. 146 00:07:43,450 --> 00:07:47,015 That's our first loop we're going to do. 147 00:07:47,015 --> 00:07:49,385 Let me just create a little bit of space here. 148 00:07:49,385 --> 00:07:51,800 Feel free to go back in the video if you want 149 00:07:51,800 --> 00:07:54,770 to backtrack into certain areas of the code that 150 00:07:54,770 --> 00:08:00,860 might not be visible for J in range, 151 00:08:00,860 --> 00:08:03,450 let's do another loop. 152 00:08:08,860 --> 00:08:13,820 We have a nested loop structure and at this point we 153 00:08:13,820 --> 00:08:18,320 could create entities within, 154 00:08:18,320 --> 00:08:20,735 or we basically can create points. 155 00:08:20,735 --> 00:08:23,960 What we're going to do is create a position in 156 00:08:23,960 --> 00:08:26,990 X that's going to define one entity of 157 00:08:26,990 --> 00:08:29,870 the grid and we're going to define that to 158 00:08:29,870 --> 00:08:33,320 be the position in X. 159 00:08:33,320 --> 00:08:34,940 We need to calculate it and it needs to 160 00:08:34,940 --> 00:08:38,900 be right, because we're counting, 161 00:08:38,900 --> 00:08:42,905 if you think about representing the rows, 162 00:08:42,905 --> 00:08:46,415 we start zero up to 100. 163 00:08:46,415 --> 00:08:49,835 We're going to use that as a coordinate in Y, 164 00:08:49,835 --> 00:08:55,685 but we also want to multiply that by the cell size. 165 00:08:55,685 --> 00:08:58,070 Which in this case has been 166 00:08:58,070 --> 00:09:02,405 a value identified by the division of the screen, 167 00:09:02,405 --> 00:09:04,025 by the resolution of the green. 168 00:09:04,025 --> 00:09:07,760 That's going to be our equation for the position in 169 00:09:07,760 --> 00:09:10,280 x and we're going 170 00:09:10,280 --> 00:09:12,395 to do the same thing for the position in Y, 171 00:09:12,395 --> 00:09:15,990 but this time we are going to do it with J. 172 00:09:18,670 --> 00:09:23,615 All right, let's just do a rectangle. 173 00:09:23,615 --> 00:09:25,100 Let's do some geometry 174 00:09:25,100 --> 00:09:26,990 that we could start visualizing this 175 00:09:26,990 --> 00:09:29,330 because it's sometimes unclear 176 00:09:29,330 --> 00:09:32,090 what we're doing until we really draw it in the screen. 177 00:09:32,090 --> 00:09:34,790 Let's do a rectangle that we use, 178 00:09:34,790 --> 00:09:39,800 these positions, position x, position y. 179 00:09:39,800 --> 00:09:42,635 Let's do a small rectangle of 10 by 10. 180 00:09:42,635 --> 00:09:46,445 Obviously, we want to use our cell size for that. 181 00:09:46,445 --> 00:09:53,610 Let's do a feel for it to be red. 182 00:09:55,930 --> 00:10:01,740 There we go. I think this could work. 183 00:10:05,220 --> 00:10:13,900 What are we missing? Okay. So we 184 00:10:13,900 --> 00:10:15,565 found this small mistake here. 185 00:10:15,565 --> 00:10:21,925 There was a typo here in cell_size_y not j. 186 00:10:21,925 --> 00:10:25,700 So let's just see what we're getting at this point. 187 00:10:27,870 --> 00:10:30,565 So we are getting a grid, 188 00:10:30,565 --> 00:10:33,955 so we have 100 units in x, 189 00:10:33,955 --> 00:10:36,670 we have 50 units in y. 190 00:10:36,670 --> 00:10:39,040 And we're creating a rectangle in 191 00:10:39,040 --> 00:10:40,975 the position x and position y. 192 00:10:40,975 --> 00:10:42,880 If you see here, 193 00:10:42,880 --> 00:10:46,360 the position is identified by the for loop that we're 194 00:10:46,360 --> 00:10:50,800 using and multiplying by the cell size. 195 00:10:50,800 --> 00:10:53,960 If we want to make 196 00:10:54,900 --> 00:11:00,445 the size exactly so that there's no gap between them, 197 00:11:00,445 --> 00:11:02,755 we will use the cell size. 198 00:11:02,755 --> 00:11:06,445 We could use cell size x and cell size y. 199 00:11:06,445 --> 00:11:08,575 All right. 200 00:11:08,575 --> 00:11:12,550 So obviously at this point we shouldn't see any gaps, 201 00:11:12,550 --> 00:11:13,870 the only thing that we're actually seeing 202 00:11:13,870 --> 00:11:18,715 is the border of the rectangle. 203 00:11:18,715 --> 00:11:21,400 So that's quite nice. 204 00:11:21,400 --> 00:11:22,645 If you want to get rid of that border, 205 00:11:22,645 --> 00:11:26,590 obviously you wouldn't just see a solid red box. 206 00:11:26,590 --> 00:11:28,390 But you could say hear like something like 207 00:11:28,390 --> 00:11:33,770 no stroke or no stroke, just like that. 208 00:11:33,930 --> 00:11:37,010 Let's just see that. 209 00:11:37,860 --> 00:11:40,330 Let's keep it like that but I 210 00:11:40,330 --> 00:11:41,935 would like to switch the color, 211 00:11:41,935 --> 00:11:49,105 the coloration of the cubes 212 00:11:49,105 --> 00:11:54,685 to be a random color. 213 00:11:54,685 --> 00:11:56,710 Let's just create some variables for that. 214 00:11:56,710 --> 00:11:59,845 And so let's do the color, 215 00:11:59,845 --> 00:12:02,800 the channel red it's going to be 216 00:12:02,800 --> 00:12:13,315 random and the range between 0-255. 217 00:12:13,315 --> 00:12:15,280 The important thing here would be if 218 00:12:15,280 --> 00:12:17,260 we're going to use the random module, 219 00:12:17,260 --> 00:12:19,180 we definitely need to go all the way to 220 00:12:19,180 --> 00:12:22,075 the top here and import random, 221 00:12:22,075 --> 00:12:27,800 because otherwise that's not going to work. 222 00:12:28,830 --> 00:12:31,030 I just wanted to make sure that we 223 00:12:31,030 --> 00:12:32,740 included the random module up 224 00:12:32,740 --> 00:12:36,400 there and we created a variable for a red channel. 225 00:12:36,400 --> 00:12:40,030 Let's create a variable for the green. 226 00:12:40,030 --> 00:12:42,505 I'm going to do three copies of that, 227 00:12:42,505 --> 00:12:48,200 so green and blue. 228 00:12:48,450 --> 00:12:53,260 And now we can use these random colors, 229 00:12:53,260 --> 00:12:59,270 random red, random green, and random blue. 230 00:13:01,800 --> 00:13:07,600 What we have right now is greed of random colors, right? 231 00:13:07,600 --> 00:13:10,675 We haven't stored anything into our list yet. 232 00:13:10,675 --> 00:13:15,430 So we could do that and we will do that at 233 00:13:15,430 --> 00:13:17,500 the very end or 234 00:13:17,500 --> 00:13:21,085 it doesn't matter in which part of this list, 235 00:13:21,085 --> 00:13:23,770 we certainly want to store a topple 236 00:13:23,770 --> 00:13:28,285 that will include the position x and position y. 237 00:13:28,285 --> 00:13:29,875 Let's just do our list. 238 00:13:29,875 --> 00:13:31,900 If you remember, the way in which we include 239 00:13:31,900 --> 00:13:35,290 something to that list is the append command. 240 00:13:35,290 --> 00:13:39,340 Append, and basically within the parentheses, 241 00:13:39,340 --> 00:13:41,500 we need to say what we want to include and 242 00:13:41,500 --> 00:13:44,365 here because we want to include a topple, 243 00:13:44,365 --> 00:13:47,350 that is the position we will include 244 00:13:47,350 --> 00:13:59,470 position x, position y. 245 00:13:59,470 --> 00:14:03,850 We can then run making sure that that is, 246 00:14:03,850 --> 00:14:06,115 well, we're having an error here. 247 00:14:06,115 --> 00:14:08,155 Let's see what are we missing. 248 00:14:08,155 --> 00:14:10,705 I'm forgetting a parentheses here. 249 00:14:10,705 --> 00:14:14,380 There we go. Everything remains the same, 250 00:14:14,380 --> 00:14:17,500 but we actually are storing everything in the list. 251 00:14:17,500 --> 00:14:20,710 Now, if we wanted to make sure we 252 00:14:20,710 --> 00:14:25,285 can here print the list, 253 00:14:25,285 --> 00:14:27,560 make sure not to print it, 254 00:14:31,260 --> 00:14:34,105 don't print it within the for loop. 255 00:14:34,105 --> 00:14:36,730 I'm trying to make sure that we outside the for 256 00:14:36,730 --> 00:14:39,850 loop to print the contents of the list. 257 00:14:39,850 --> 00:14:42,280 And you see here that we have 258 00:14:42,280 --> 00:14:48,160 stored all the coordinates of our grid. 259 00:14:48,160 --> 00:14:52,720 But here's an important first reflection in a way, 260 00:14:52,720 --> 00:14:55,330 I want to make a differentiation between 261 00:14:55,330 --> 00:14:58,990 the index coordinate and 262 00:14:58,990 --> 00:15:03,730 this entity here would be index zero, all right? 263 00:15:03,730 --> 00:15:08,170 But its actual coordinate will be 0,0 index. 264 00:15:08,170 --> 00:15:13,615 We could address entities in this list through its index, 265 00:15:13,615 --> 00:15:17,260 the position that they have in the list or through 266 00:15:17,260 --> 00:15:19,645 their actual physical coordinates 267 00:15:19,645 --> 00:15:22,450 within the world coordinates. 268 00:15:22,450 --> 00:15:25,000 That's why we're actually storing the positions. 269 00:15:25,000 --> 00:15:26,710 Those two things are different and I think 270 00:15:26,710 --> 00:15:29,215 that it's important to take note of that. 271 00:15:29,215 --> 00:15:32,830 Again, I'm going to leave 272 00:15:32,830 --> 00:15:34,900 that line there in case you want to 273 00:15:34,900 --> 00:15:38,330 just print the content of the list, you can do so. 274 00:15:39,390 --> 00:15:41,530 What are we going to do next? 275 00:15:41,530 --> 00:15:42,760 We're going to move 276 00:15:42,760 --> 00:15:48,400 to start deleting entities of the list. 277 00:15:48,400 --> 00:15:50,020 Now we created the list, 278 00:15:50,020 --> 00:15:54,055 we have the perfectly randomized grid array. 279 00:15:54,055 --> 00:15:56,590 You can certainly play with the resolution size. 280 00:15:56,590 --> 00:15:58,450 You can change those numbers here if you want to 281 00:15:58,450 --> 00:16:02,305 have something less dense. 282 00:16:02,305 --> 00:16:05,560 It's very flexible this code 283 00:16:05,560 --> 00:16:07,885 to allow for different variations, 284 00:16:07,885 --> 00:16:09,385 but I'm going to keep the 100, 285 00:16:09,385 --> 00:16:11,910 which I think works pretty well. 286 00:16:11,910 --> 00:16:15,165 Let's just go into our draw function 287 00:16:15,165 --> 00:16:16,890 so that we can gradually, 288 00:16:16,890 --> 00:16:19,245 over time, maybe every so many frames, 289 00:16:19,245 --> 00:16:23,140 we delete an entity from the list. 290 00:16:26,210 --> 00:16:30,520 We're going to do a draw function. 291 00:16:32,460 --> 00:16:36,925 Here let's just first of all 292 00:16:36,925 --> 00:16:44,000 draw a rectangle or basically an entity such as, 293 00:16:44,760 --> 00:16:48,760 let's do a circle or an ellipse or a rectangle that 294 00:16:48,760 --> 00:16:51,790 would be positioned on top of some entities in the list. 295 00:16:51,790 --> 00:16:54,430 We can just maybe move it around and understand how do 296 00:16:54,430 --> 00:16:57,700 we access that information. 297 00:16:57,700 --> 00:17:01,390 Let's do a new position x. 298 00:17:01,390 --> 00:17:03,970 This is going to be a variable that we will 299 00:17:03,970 --> 00:17:08,005 use to access an entity, 300 00:17:08,005 --> 00:17:11,890 so let's use the list to access and we're going 301 00:17:11,890 --> 00:17:18,565 to access the array information. 302 00:17:18,565 --> 00:17:19,840 Here we could say if we want to 303 00:17:19,840 --> 00:17:21,940 access the first element of 304 00:17:21,940 --> 00:17:28,850 the list that would give us a coordinate x and y. 305 00:17:30,060 --> 00:17:38,725 If we want to access the x component of that position, 306 00:17:38,725 --> 00:17:45,115 we will use the index zero, 307 00:17:45,115 --> 00:17:48,140 which represents the first entity. 308 00:17:51,900 --> 00:17:56,335 The x coordinate of the first piece of data that we have. 309 00:17:56,335 --> 00:18:01,940 Let's do the same thing for position y. 310 00:18:02,400 --> 00:18:09,475 Here we're going to use the second entity, position y, 311 00:18:09,475 --> 00:18:12,205 which is the second coordinate that exists 312 00:18:12,205 --> 00:18:16,870 within the list that we created. 313 00:18:16,870 --> 00:18:24,730 This actually should be the first element in the list. 314 00:18:24,730 --> 00:18:28,855 Let's do a rectangle in 315 00:18:28,855 --> 00:18:33,835 that location so that we are able to check that, 316 00:18:33,835 --> 00:18:38,240 in fact we are accessing. 317 00:18:38,250 --> 00:18:42,740 Let's do it 10,10. 318 00:18:43,470 --> 00:18:48,920 Let's do it in a white color, so fill. 319 00:18:54,060 --> 00:18:59,570 Let's see what we get here. 320 00:19:02,880 --> 00:19:07,450 I had to discover a small bug that we were having. 321 00:19:07,450 --> 00:19:09,550 I didn't realize that we were in 322 00:19:09,550 --> 00:19:13,610 fact writing the code that wasn't indented. 323 00:19:14,250 --> 00:19:17,785 As a quick reminder, when you lose track 324 00:19:17,785 --> 00:19:21,595 your set up function, 325 00:19:21,595 --> 00:19:23,530 let's make sure that you start 326 00:19:23,530 --> 00:19:26,170 your draw function you have it in the right indentation, 327 00:19:26,170 --> 00:19:29,030 otherwise you're going to have an issue here. 328 00:19:30,780 --> 00:19:33,580 Let's return to what we were doing. 329 00:19:33,580 --> 00:19:35,590 We are defining a position which is going to be 330 00:19:35,590 --> 00:19:38,530 the first entity of the list. 331 00:19:38,530 --> 00:19:41,110 And we have the x and y. 332 00:19:41,110 --> 00:19:44,500 We can see very mildly, 333 00:19:44,500 --> 00:19:48,640 maybe there that the first entity is white. 334 00:19:48,640 --> 00:19:51,220 That means that we actually are drawing on top of 335 00:19:51,220 --> 00:19:53,740 that and the size is actually slightly smaller. 336 00:19:53,740 --> 00:19:55,540 We can actually do something a 337 00:19:55,540 --> 00:19:58,760 little bit more visible. Maybe an ellipse. 338 00:19:59,950 --> 00:20:04,140 We can do a 30 and a 30. 339 00:20:06,070 --> 00:20:09,750 You see that ellipse is there. 340 00:20:10,600 --> 00:20:16,100 But let's just change the value here of the index. 341 00:20:16,100 --> 00:20:18,725 If we understand this correctly, 342 00:20:18,725 --> 00:20:22,865 the index, we have 100 units in x. 343 00:20:22,865 --> 00:20:26,430 Somewhere around 50 would be the middle. 344 00:20:26,440 --> 00:20:30,605 If we wanted to start moving it down, 345 00:20:30,605 --> 00:20:35,825 we would do maybe 100*25. 346 00:20:35,825 --> 00:20:45,980 Let's try something like 300. 347 00:20:45,980 --> 00:20:51,050 Let's see where we land. You can 348 00:20:51,050 --> 00:20:52,640 see here we actually have 349 00:20:52,640 --> 00:20:56,225 the rectangle, this circle here. 350 00:20:56,225 --> 00:20:58,475 That's unexpected, to be honest. 351 00:20:58,475 --> 00:20:59,930 I thought we would actually 352 00:20:59,930 --> 00:21:03,150 get much further down the list. 353 00:21:16,630 --> 00:21:20,330 So here's what's really going on. 354 00:21:20,330 --> 00:21:25,070 As we start changing the numbers of the index, 355 00:21:25,070 --> 00:21:26,270 you could start seeing that number 356 00:21:26,270 --> 00:21:27,890 5 is actually going down, 357 00:21:27,890 --> 00:21:32,520 and let's just go back and understand this together. 358 00:21:33,070 --> 00:21:37,730 We have been using i for 359 00:21:37,730 --> 00:21:42,620 the resolution in x and j for the resolution in y. 360 00:21:42,620 --> 00:21:48,860 Our list first, 361 00:21:48,860 --> 00:21:51,965 it's going to do a loop in j, 362 00:21:51,965 --> 00:21:54,260 so it's going to go down first. 363 00:21:54,260 --> 00:21:56,465 Then it's going to do, 364 00:21:56,465 --> 00:21:59,075 when it finishes a loop in j, 365 00:21:59,075 --> 00:22:01,370 which is again the y direction, 366 00:22:01,370 --> 00:22:05,165 it's going to start doing a loop over the right side. 367 00:22:05,165 --> 00:22:07,580 The way this list is organized is 368 00:22:07,580 --> 00:22:11,490 different to the diagram that we had originally. 369 00:22:12,460 --> 00:22:15,650 We could change that if we think 370 00:22:15,650 --> 00:22:19,100 that we wanted to go in the opposite direction. 371 00:22:19,100 --> 00:22:24,560 We could, for instance, flip this relationship. 372 00:22:24,560 --> 00:22:26,300 We could say, hey, 373 00:22:26,300 --> 00:22:29,735 resolution in y it's going to be here, 374 00:22:29,735 --> 00:22:32,780 and resolution in x is going to be in this direction. 375 00:22:32,780 --> 00:22:37,050 Let's see how we can affect. 376 00:22:40,870 --> 00:22:45,780 That certainly created an error. 377 00:22:48,010 --> 00:22:51,050 The error that I was finding is that I had not 378 00:22:51,050 --> 00:22:53,930 indented this draw function. 379 00:22:53,930 --> 00:22:57,920 For some reason, I didn't keep track of that. 380 00:22:57,920 --> 00:23:00,240 So make sure that you do so. 381 00:23:00,430 --> 00:23:05,135 Now we should have the script running. 382 00:23:05,135 --> 00:23:09,215 What we're doing here is identifying the first index, 383 00:23:09,215 --> 00:23:13,325 the first entity of the list, 384 00:23:13,325 --> 00:23:18,335 and we are drawing a white rectangle in that position. 385 00:23:18,335 --> 00:23:20,990 If you run it, at this point, 386 00:23:20,990 --> 00:23:22,940 you'll see that you'll see a white rectangle 387 00:23:22,940 --> 00:23:24,470 in the very first position. 388 00:23:24,470 --> 00:23:27,140 Let's move closely and then 389 00:23:27,140 --> 00:23:32,060 type a one here to see how we're moving. 390 00:23:32,060 --> 00:23:33,740 If we type a one, 391 00:23:33,740 --> 00:23:36,140 we see that the rectangle is moving down. 392 00:23:36,140 --> 00:23:40,070 If we type a two, we'll 393 00:23:40,070 --> 00:23:43,055 see that the rectangle keeps moving down. 394 00:23:43,055 --> 00:23:46,220 So that means that our index information is 395 00:23:46,220 --> 00:23:48,845 going all the way up to 50 here. 396 00:23:48,845 --> 00:23:52,985 Let's just try a number such as 25, 397 00:23:52,985 --> 00:23:57,620 which is half of the number of rows that we have. 398 00:23:57,620 --> 00:24:01,110 So we have the white rectangle somewhere in the middle. 399 00:24:02,140 --> 00:24:06,050 That's the way we're basically are going. 400 00:24:06,050 --> 00:24:07,865 If we actually reach 50, 401 00:24:07,865 --> 00:24:10,260 let's just start that 50. 402 00:24:14,770 --> 00:24:16,940 We are all the way back here. 403 00:24:16,940 --> 00:24:19,085 So we have 0-49, 404 00:24:19,085 --> 00:24:21,605 50 is up here again, 405 00:24:21,605 --> 00:24:27,900 and we have this typewriter distribution of the indices. 406 00:24:28,480 --> 00:24:31,700 We can actually access the information of any 407 00:24:31,700 --> 00:24:34,835 of these entities through its index. 408 00:24:34,835 --> 00:24:39,230 Now we're going to do 409 00:24:39,230 --> 00:24:40,955 a very small script that would 410 00:24:40,955 --> 00:24:45,245 gradually add rectangles at a random position. 411 00:24:45,245 --> 00:24:50,370 So let's just use the cell size in x and in y. 412 00:24:52,480 --> 00:24:56,180 Now, whenever we draw that white rectangle, 413 00:24:56,180 --> 00:25:05,730 actually we have to bring those in as globals. 414 00:25:30,490 --> 00:25:35,285 Oh, no, we actually don't need to do that. 415 00:25:35,285 --> 00:25:38,375 Just realize because the information 416 00:25:38,375 --> 00:25:43,085 is calculated during the set up loops, 417 00:25:43,085 --> 00:25:51,290 just kind of copy that calculation here. 418 00:25:51,290 --> 00:25:54,170 Let's see if that's okay, there we go. 419 00:25:54,170 --> 00:25:59,570 We have our white rectangle here so that 420 00:25:59,570 --> 00:26:00,920 we can actually draw 421 00:26:00,920 --> 00:26:05,075 this rectangle every time in the size of the grid. 422 00:26:05,075 --> 00:26:07,430 That grid size could change, 423 00:26:07,430 --> 00:26:09,500 so we want to make sure that that calculation 424 00:26:09,500 --> 00:26:11,085 is always done correctly. 425 00:26:11,085 --> 00:26:14,660 But let's create a random index. 426 00:26:15,090 --> 00:26:21,350 The random index, it's a number, 427 00:26:21,350 --> 00:26:22,805 it could be anything 428 00:26:22,805 --> 00:26:26,315 between zero and the length of the list. 429 00:26:26,315 --> 00:26:32,765 Let's do a random range, 430 00:26:32,765 --> 00:26:38,990 or random range zero. 431 00:26:38,990 --> 00:26:42,095 Here we know that 432 00:26:42,095 --> 00:26:44,165 the size of the list is 433 00:26:44,165 --> 00:26:46,700 the multiplication between its resolution in x and y. 434 00:26:46,700 --> 00:26:49,790 But we could also, just to be a little bit more careful, 435 00:26:49,790 --> 00:26:51,080 we could use the Lend command, 436 00:26:51,080 --> 00:26:54,005 which is the length of the list. 437 00:26:54,005 --> 00:26:59,240 My position list. 438 00:26:59,240 --> 00:27:03,905 That's the length of the list. Here we have a comma. 439 00:27:03,905 --> 00:27:07,790 We are trying to obtain a random number that is 440 00:27:07,790 --> 00:27:12,330 somewhere in between that zero and how long that list is. 441 00:27:13,320 --> 00:27:16,640 We can now, because 442 00:27:16,640 --> 00:27:18,305 the draw function, if you think about it, 443 00:27:18,305 --> 00:27:20,285 the draw function is drawing 444 00:27:20,285 --> 00:27:23,360 a different rectangle every frame, right? 445 00:27:23,360 --> 00:27:25,595 If we draw that rectangle in the same place, 446 00:27:25,595 --> 00:27:27,155 it seems like it's static. 447 00:27:27,155 --> 00:27:32,060 But if we actually draw it in a new location, 448 00:27:32,060 --> 00:27:35,150 every frame like with this random index, 449 00:27:35,150 --> 00:27:37,805 we're going to start seeing these white rectangles. 450 00:27:37,805 --> 00:27:42,875 In a way, eating up the grid that we had drawn, right? 451 00:27:42,875 --> 00:27:45,065 Instead of using the 50 here, 452 00:27:45,065 --> 00:27:47,120 let's use our random index, right, 453 00:27:47,120 --> 00:27:49,655 Because that was the number that we were hard coding 454 00:27:49,655 --> 00:27:52,790 to start accessing a location in the green. 455 00:27:52,790 --> 00:27:54,230 We could say zero index, 456 00:27:54,230 --> 00:27:55,400 the one index, but now we're 457 00:27:55,400 --> 00:27:57,125 actually going to pick one at random. 458 00:27:57,125 --> 00:28:02,600 Let's see, we're kind of reaching the end of this lesson. 459 00:28:02,600 --> 00:28:04,835 You see here we have, in fact, 460 00:28:04,835 --> 00:28:07,310 we're painting white rectangles at random. 461 00:28:07,310 --> 00:28:11,615 It seems that we're eating up some of this color green. 462 00:28:11,615 --> 00:28:15,110 We're starting to mix it up with this white information. 463 00:28:15,110 --> 00:28:18,020 But you could say, well, but we're not 464 00:28:18,020 --> 00:28:21,005 really using the grid in any way. 465 00:28:21,005 --> 00:28:23,195 We're not using the data structure. 466 00:28:23,195 --> 00:28:25,595 It might so happen that we're drawing 467 00:28:25,595 --> 00:28:29,375 white rectangles over prior white rectangles. 468 00:28:29,375 --> 00:28:32,360 How could we do that in such a way that we 469 00:28:32,360 --> 00:28:36,095 could maybe remove an entity 470 00:28:36,095 --> 00:28:38,600 from the list once we paint that rectangle in? 471 00:28:38,600 --> 00:28:43,835 Let's use delete command del. 472 00:28:43,835 --> 00:28:49,445 I'm going to go into the list from the list, 473 00:28:49,445 --> 00:28:54,540 I'm going to remove the entity that we just painted over. 474 00:28:56,470 --> 00:29:06,515 Let's just print here the length of the list. 475 00:29:06,515 --> 00:29:10,520 We want to see how long the list is. 476 00:29:10,520 --> 00:29:13,625 You'll see that the list starts with 5,000 elements, 477 00:29:13,625 --> 00:29:16,370 and it gradually goes down as we paint 478 00:29:16,370 --> 00:29:21,860 white rectangles over covering in a way, 479 00:29:21,860 --> 00:29:23,225 some of the color in the grid. 480 00:29:23,225 --> 00:29:25,640 We are also replacing them. 481 00:29:25,640 --> 00:29:28,415 We do not get duplicates. 482 00:29:28,415 --> 00:29:31,940 We actually start eating up our grid. 483 00:29:31,940 --> 00:29:33,900 We're coding it, if you want, 484 00:29:33,900 --> 00:29:36,220 and we are ending up with a list that 485 00:29:36,220 --> 00:29:40,345 is certainly very different from where we started. 486 00:29:40,345 --> 00:29:42,760 Just to do a quick recap, 487 00:29:42,760 --> 00:29:44,440 we're trying to understand the difference 488 00:29:44,440 --> 00:29:47,420 between an index position in 489 00:29:47,420 --> 00:29:50,900 a grid and the actual coordinates 490 00:29:50,900 --> 00:29:54,260 of an entity within the canvas in processing. 491 00:29:54,260 --> 00:29:57,530 As you can see, we could start doing 492 00:29:57,530 --> 00:30:01,610 interesting processes where we could 493 00:30:01,610 --> 00:30:04,655 actually start using the data to 494 00:30:04,655 --> 00:30:09,020 create designs and images such as this one. 495 00:30:09,020 --> 00:30:12,000 I'll see you in the next video.