1 00:00:05,470 --> 00:00:08,390 Hi, welcome to this new session. 2 00:00:08,390 --> 00:00:10,870 We are discussing how 3 00:00:10,870 --> 00:00:14,850 classes could be instantiated within our code. 4 00:00:14,850 --> 00:00:16,670 How can we differentiate 5 00:00:16,670 --> 00:00:19,630 each instance of a class, having different colors, 6 00:00:19,630 --> 00:00:22,590 different speeds and this time in this session, 7 00:00:22,590 --> 00:00:23,970 we're going to see how we can actually 8 00:00:23,970 --> 00:00:25,830 construct instances of 9 00:00:25,830 --> 00:00:29,210 a class through for loop structure. 10 00:00:29,210 --> 00:00:30,710 Using a kind of a loop structure, 11 00:00:30,710 --> 00:00:33,330 we will actually create a series, hundreds, 12 00:00:33,330 --> 00:00:36,830 potentially instances of a class and see how we 13 00:00:36,830 --> 00:00:40,845 can activate all of their functionality one at a time. 14 00:00:40,845 --> 00:00:43,845 Let's jump into the code. 15 00:00:43,845 --> 00:00:46,390 This is a code where we left off. 16 00:00:46,390 --> 00:00:49,590 Let's just do a quick recap where we left off, 17 00:00:49,590 --> 00:00:51,570 we actually have three instances of 18 00:00:51,570 --> 00:00:54,250 this gradient rectangle class. 19 00:00:54,250 --> 00:00:56,230 As you can see here, we are actually doing 20 00:00:56,230 --> 00:00:59,050 a very manual process of construction where we're 21 00:00:59,050 --> 00:01:03,250 explicitly declaring each instance and providing what you 22 00:01:03,250 --> 00:01:04,650 can see here in these lines are 23 00:01:04,650 --> 00:01:05,970 all the arguments that are 24 00:01:05,970 --> 00:01:08,010 part of the constructor of the class. 25 00:01:08,010 --> 00:01:10,350 All of them start in different positions, 26 00:01:10,350 --> 00:01:13,110 they actually have different size, 27 00:01:13,110 --> 00:01:16,670 different color, and different speeds. 28 00:01:16,670 --> 00:01:21,000 This is what we actually want to somehow automate. 29 00:01:21,000 --> 00:01:26,385 We want to just do it within a structure of a for loop. 30 00:01:26,385 --> 00:01:29,470 Let's just get rid of two of these instances, 31 00:01:29,470 --> 00:01:32,010 we're just going to keep one, 32 00:01:32,010 --> 00:01:33,195 and here as well, 33 00:01:33,195 --> 00:01:41,230 we are just going to get rid of two instances of that. 34 00:01:41,780 --> 00:01:44,600 Just before this, what we're actually 35 00:01:44,600 --> 00:01:46,520 going to do is create a list. 36 00:01:46,520 --> 00:01:47,960 We're going to first of all, 37 00:01:47,960 --> 00:01:49,560 add the data structure of the list, 38 00:01:49,560 --> 00:01:52,390 which is something that we covered in week 1. 39 00:01:54,530 --> 00:01:59,130 My list and this is going to be 40 00:01:59,130 --> 00:02:02,040 an empty list because we're 41 00:02:02,040 --> 00:02:05,545 going to try to store all these instances within a list. 42 00:02:05,545 --> 00:02:09,420 We can actually have classes within 43 00:02:09,420 --> 00:02:10,680 lists and this is 44 00:02:10,680 --> 00:02:14,160 our first version of seeing how that is done. 45 00:02:14,160 --> 00:02:19,205 Number of columns, it's going to be 50. 46 00:02:19,205 --> 00:02:20,500 We are going to define 47 00:02:20,500 --> 00:02:24,360 how big the population of objects in this case, 48 00:02:24,360 --> 00:02:25,500 it's going to be defined by this 49 00:02:25,500 --> 00:02:28,480 variable number of columns. 50 00:02:29,480 --> 00:02:32,000 Here, in the setup, 51 00:02:32,000 --> 00:02:34,710 we're going to execute a for loop, 52 00:02:34,710 --> 00:02:41,070 and let's do the for loop saying for i in 53 00:02:41,070 --> 00:02:47,590 range between zero and the number of columns. 54 00:02:47,590 --> 00:02:53,740 This is the number that we want to loop. 55 00:02:53,990 --> 00:02:56,340 What do we want to do here? 56 00:02:56,340 --> 00:02:58,280 We want to do the logic of 57 00:02:58,280 --> 00:03:01,400 the construction of a class 58 00:03:01,400 --> 00:03:03,160 or basically an instance of a class. 59 00:03:03,160 --> 00:03:05,505 We want to do that within the for loop, 60 00:03:05,505 --> 00:03:10,355 and we also want to add the result to the list. 61 00:03:10,355 --> 00:03:12,990 Every time we run 62 00:03:12,990 --> 00:03:20,670 this class we want to include it to the list. 63 00:03:20,670 --> 00:03:23,640 We have this is actually the same. 64 00:03:23,640 --> 00:03:25,680 I'm just cutting and pasting 65 00:03:25,680 --> 00:03:27,660 the construction of the class, 66 00:03:27,660 --> 00:03:30,125 exactly what we've done before and then after that, 67 00:03:30,125 --> 00:03:35,790 we could say that my list.append. 68 00:03:41,080 --> 00:03:47,710 Let's append the gradient rectangle that we created. 69 00:03:51,290 --> 00:03:55,310 That's basically the foundation of how we would do this. 70 00:03:55,310 --> 00:03:57,550 The problem is that we are actually going to create 71 00:03:57,550 --> 00:04:00,410 all the vector positions on top of each other, 72 00:04:00,410 --> 00:04:02,870 all of the rectangles with the same variables, 73 00:04:02,870 --> 00:04:04,935 all of them with the same color. 74 00:04:04,935 --> 00:04:07,920 Let's just create a few variable before we 75 00:04:07,920 --> 00:04:15,570 actually construct this class, 76 00:04:15,570 --> 00:04:18,400 instead of providing a hard-coded value, 77 00:04:18,400 --> 00:04:21,870 something that is explicit let's calculate 78 00:04:21,870 --> 00:04:23,670 what that value could be so that it's 79 00:04:23,670 --> 00:04:26,580 different for each instance of the class. 80 00:04:29,690 --> 00:04:32,050 Let's imagine that we want to create 81 00:04:32,050 --> 00:04:34,185 a series of rectangles that 82 00:04:34,185 --> 00:04:39,965 completely match the size of the screen. 83 00:04:39,965 --> 00:04:44,470 Let's just create a variable that it's going to 84 00:04:44,470 --> 00:04:53,925 represent a division between this number 600. 85 00:04:53,925 --> 00:04:57,105 Usually, we have been using variables for this. 86 00:04:57,105 --> 00:05:00,675 In the past, we've used something like image size y. 87 00:05:00,675 --> 00:05:04,200 In this case, if we want to do this correctly, 88 00:05:04,200 --> 00:05:06,630 I would just do that once more, 89 00:05:06,630 --> 00:05:13,210 so let's just do that image size y equals 600. 90 00:05:14,180 --> 00:05:16,350 I don't think we're going to use the x, 91 00:05:16,350 --> 00:05:25,215 but it's always good to have those declared as well. 92 00:05:25,215 --> 00:05:28,890 This is because we want to be able to 93 00:05:28,890 --> 00:05:32,310 do code that if for whatever reason, 94 00:05:32,310 --> 00:05:35,050 we change the size of the screen, 95 00:05:37,580 --> 00:05:41,985 the code will still work as intended. 96 00:05:41,985 --> 00:05:45,000 In the image size y, 97 00:05:45,000 --> 00:05:49,380 we can actually divide it by the number of columns. 98 00:05:49,380 --> 00:05:51,300 We're trying to get what would 99 00:05:51,300 --> 00:06:00,380 be the size of each rectangle, 100 00:06:00,380 --> 00:06:02,585 if we would divide the screen, 101 00:06:02,585 --> 00:06:04,385 the y direction of the screen 102 00:06:04,385 --> 00:06:07,800 by the total number of rectangles that we want to have. 103 00:06:08,260 --> 00:06:13,770 This variable would represent the size. 104 00:06:13,770 --> 00:06:15,330 All of them will have the same size, 105 00:06:15,330 --> 00:06:16,515 but they would actually be 106 00:06:16,515 --> 00:06:19,125 a division of the size of the screen. 107 00:06:19,125 --> 00:06:21,030 That's fine. Let's just start with the 108 00:06:21,030 --> 00:06:25,110 second we're going to call this 109 00:06:25,110 --> 00:06:29,130 the C positioning in y and the positioning in 110 00:06:29,130 --> 00:06:34,200 y will be the size times i. 111 00:06:34,200 --> 00:06:37,590 What we're doing here is using the iterator variable, 112 00:06:37,590 --> 00:06:39,570 the i variable that in the for 113 00:06:39,570 --> 00:06:42,540 loop will start with zero and get to 50, 114 00:06:42,540 --> 00:06:44,820 and we're iterating down. 115 00:06:44,820 --> 00:06:46,905 We're saying let's start at zero 116 00:06:46,905 --> 00:06:49,725 because multiplying anything by zero will be zero, 117 00:06:49,725 --> 00:06:53,625 and then we jump one times the size. 118 00:06:53,625 --> 00:06:59,730 We're actually offsetting by the size of the rectangle, 119 00:06:59,730 --> 00:07:02,580 how much down are 120 00:07:02,580 --> 00:07:05,205 we going to be pushing the next rectangle. 121 00:07:05,205 --> 00:07:07,410 We can use this variable. 122 00:07:07,410 --> 00:07:13,260 Now, let's imagine that the position of 123 00:07:13,260 --> 00:07:21,270 the rectangle we could say zero in x and c position in y. 124 00:07:21,270 --> 00:07:24,150 This is going to define the y position. 125 00:07:24,150 --> 00:07:25,500 The x is going to be on the left, 126 00:07:25,500 --> 00:07:28,860 like hard coded to be on the left side of the screen, 127 00:07:28,860 --> 00:07:30,675 but on the y we're going to be 128 00:07:30,675 --> 00:07:34,450 distributing these rectangles as we move down. 129 00:07:36,200 --> 00:07:39,300 Let's just create a variable for that as well. 130 00:07:39,300 --> 00:07:45,420 Let's call it random color and we've done this before. 131 00:07:45,420 --> 00:07:50,640 We can actually use a color, 132 00:07:50,640 --> 00:07:56,100 which is random.randrange 133 00:07:56,100 --> 00:08:02,730 between 0 and 255. 134 00:08:02,730 --> 00:08:05,445 That is for the green. 135 00:08:05,445 --> 00:08:11,680 We can do that. Three times. 136 00:08:13,760 --> 00:08:18,585 For the blue and green RGB, 137 00:08:18,585 --> 00:08:20,235 so red, green, blue, 138 00:08:20,235 --> 00:08:21,855 and we would have 139 00:08:21,855 --> 00:08:26,190 a random color that 140 00:08:26,190 --> 00:08:28,200 we could apply now instead of 141 00:08:28,200 --> 00:08:30,420 saying hard coated value of red, 142 00:08:30,420 --> 00:08:33,910 this one will be the color of each class. 143 00:08:35,450 --> 00:08:40,515 At this point, let's just 144 00:08:40,515 --> 00:08:45,075 leave this velocity vector at one for now. 145 00:08:45,075 --> 00:08:47,085 We're going to come back and randomize that as well. 146 00:08:47,085 --> 00:08:48,360 But I think that it's important 147 00:08:48,360 --> 00:08:49,650 that we start visualizing. 148 00:08:49,650 --> 00:08:51,930 In case we're running into errors, 149 00:08:51,930 --> 00:08:54,330 I always try to keep pressing 150 00:08:54,330 --> 00:08:56,010 play in my simulation so that 151 00:08:56,010 --> 00:08:57,960 I have a sense of where could 152 00:08:57,960 --> 00:09:01,120 that error be introduced in case I do have an error. 153 00:09:02,810 --> 00:09:06,495 This line is very important because we are appending 154 00:09:06,495 --> 00:09:11,715 our instance of the class to our list. 155 00:09:11,715 --> 00:09:14,610 When we get to the draw loop, 156 00:09:14,610 --> 00:09:15,915 in this area here, 157 00:09:15,915 --> 00:09:18,300 we know that we have to execute the functions, 158 00:09:18,300 --> 00:09:19,995 the display function and the move function 159 00:09:19,995 --> 00:09:21,270 of the instance. 160 00:09:21,270 --> 00:09:23,060 But we don't have that instance 161 00:09:23,060 --> 00:09:25,460 anymore because we're constructing it within the setup. 162 00:09:25,460 --> 00:09:26,660 So it's not visible, 163 00:09:26,660 --> 00:09:27,725 and it's not one instance. 164 00:09:27,725 --> 00:09:30,305 It's actually going to be a series of instances. 165 00:09:30,305 --> 00:09:32,255 It's going to be 50 instances. 166 00:09:32,255 --> 00:09:36,600 Here, we are also going to use a for loop structure to 167 00:09:36,600 --> 00:09:41,865 invoke the functions that are going to be executed. 168 00:09:41,865 --> 00:09:49,380 We're going to say for x in my list. 169 00:09:49,430 --> 00:09:53,580 Let's just spell it the same way. 170 00:09:53,580 --> 00:09:55,905 What is this type of for loop? 171 00:09:55,905 --> 00:10:00,780 This for loop that we're doing here is a specific kind of 172 00:10:00,780 --> 00:10:02,490 for loop that would allow us 173 00:10:02,490 --> 00:10:06,540 to select each entity inside the list. 174 00:10:06,540 --> 00:10:08,370 It's a much shorter for loop, 175 00:10:08,370 --> 00:10:12,235 so it's looping through a list where x is 176 00:10:12,235 --> 00:10:13,850 an instance or the object that we 177 00:10:13,850 --> 00:10:17,495 are going through so we don't need the integer i, 178 00:10:17,495 --> 00:10:19,220 we don't need anything like that and 179 00:10:19,220 --> 00:10:21,095 here we could say x dot display 180 00:10:21,095 --> 00:10:24,840 because the entity we're selecting will have, 181 00:10:24,840 --> 00:10:26,640 in fact, the function display, 182 00:10:26,640 --> 00:10:28,905 and it will also have the function move. 183 00:10:28,905 --> 00:10:34,650 This is a very neat short version of a loop that 184 00:10:34,650 --> 00:10:36,075 allows us to iterate over 185 00:10:36,075 --> 00:10:40,500 every instance of a class inside this list. 186 00:10:40,500 --> 00:10:43,660 We're calling that instance an x. 187 00:10:44,300 --> 00:10:46,920 Basically, you can put any name 188 00:10:46,920 --> 00:10:49,470 here but whatever you use here 189 00:10:49,470 --> 00:10:52,590 will be the variable name 190 00:10:52,590 --> 00:10:53,895 that you're giving to the instance, 191 00:10:53,895 --> 00:10:55,995 and we're invoking its functionality. 192 00:10:55,995 --> 00:10:58,080 In this case, display and move. 193 00:10:58,080 --> 00:11:01,170 Let's see if this actually works. 194 00:11:01,170 --> 00:11:04,335 We are having an error. This is not going forward. 195 00:11:04,335 --> 00:11:09,310 Let's just find where did we make our mistake. 196 00:11:11,030 --> 00:11:14,340 I think I have an idea of what this is. 197 00:11:14,340 --> 00:11:21,240 If you remember, we started using the random function, 198 00:11:21,240 --> 00:11:23,560 but we haven't imported. 199 00:11:26,930 --> 00:11:31,500 Let's import the random module. 200 00:11:31,500 --> 00:11:34,020 That could be one of the things that is 201 00:11:34,020 --> 00:11:36,435 broken. There we go. 202 00:11:36,435 --> 00:11:41,250 As you can see here, we have 50 instances of this class, 203 00:11:41,250 --> 00:11:44,700 all of them moving at the same speed from 204 00:11:44,700 --> 00:11:48,015 left to right and gradually painting the screen. 205 00:11:48,015 --> 00:11:49,935 Every time that we run this, 206 00:11:49,935 --> 00:11:53,610 we are going to get a different set of 207 00:11:53,610 --> 00:11:55,200 colors because each color is 208 00:11:55,200 --> 00:11:58,150 actually created randomly as well, 209 00:11:58,160 --> 00:12:01,725 at the moment of the creation of the class. 210 00:12:01,725 --> 00:12:04,080 The interesting thing here is that we could 211 00:12:04,080 --> 00:12:06,420 actually use different numbers here. 212 00:12:06,420 --> 00:12:09,130 If we use a number 20, 213 00:12:09,550 --> 00:12:13,850 you see that we're dividing the screen in 20 pieces. 214 00:12:13,850 --> 00:12:16,610 This is the map that we did somewhere 215 00:12:16,610 --> 00:12:18,740 here where we're basically 216 00:12:18,740 --> 00:12:20,180 saying the size of the rectangle, 217 00:12:20,180 --> 00:12:21,410 it's going to be a division between 218 00:12:21,410 --> 00:12:22,460 the total number of columns, 219 00:12:22,460 --> 00:12:27,585 which is 20 and the size of the screen. 220 00:12:27,585 --> 00:12:31,035 If you want to do something like 200 as well, 221 00:12:31,035 --> 00:12:36,315 that should work and you can see you can get very fine. 222 00:12:36,315 --> 00:12:39,630 We have 600 pixel so if you wanted one for every pixel, 223 00:12:39,630 --> 00:12:41,310 you could go up to 224 00:12:41,310 --> 00:12:44,370 600 and that would get 225 00:12:44,370 --> 00:12:48,105 you a particularly interesting pattern. 226 00:12:48,105 --> 00:12:52,965 The final thing that I want to see here is that 227 00:12:52,965 --> 00:12:58,665 we are hard coding the value of velocity with a number 1. 228 00:12:58,665 --> 00:13:01,710 Let's just make that also just for the sake 229 00:13:01,710 --> 00:13:06,315 of creating a random value there, as well. 230 00:13:06,315 --> 00:13:10,965 We can use a random speed, 231 00:13:10,965 --> 00:13:14,760 which is going to be a random and here, 232 00:13:14,760 --> 00:13:16,890 I'm going to use uniform 233 00:13:16,890 --> 00:13:20,700 just because we want to have a random value, 234 00:13:20,700 --> 00:13:22,065 that it's a decimal place, 235 00:13:22,065 --> 00:13:26,070 a floating point value between 0.01 and 1. 236 00:13:26,070 --> 00:13:32,010 We don't want this necessarily to be too fast that way, 237 00:13:32,010 --> 00:13:33,405 we definitely wanted to have 238 00:13:33,405 --> 00:13:41,625 some variability in the decimal space 239 00:13:41,625 --> 00:13:44,430 between zero and one. 240 00:13:44,430 --> 00:13:47,550 The velocity vector, let's 241 00:13:47,550 --> 00:13:50,475 just add instead of a one here, 242 00:13:50,475 --> 00:13:56,145 the random speed and let's see how that looks. 243 00:13:56,145 --> 00:13:58,395 You can see here that we have 244 00:13:58,395 --> 00:14:01,230 200 different instances of 245 00:14:01,230 --> 00:14:05,280 this rectangle all of them with different colors, 246 00:14:05,280 --> 00:14:08,340 and all of them moving at a different pace, 247 00:14:08,340 --> 00:14:09,390 at a different speed, 248 00:14:09,390 --> 00:14:12,310 if you want across the screen. 249 00:14:12,410 --> 00:14:14,850 We're actually starting to get something 250 00:14:14,850 --> 00:14:17,970 quite interesting, graphically, and we're doing 251 00:14:17,970 --> 00:14:20,085 it through the modularity of classes. 252 00:14:20,085 --> 00:14:24,390 We are actually able to create one class, 253 00:14:24,390 --> 00:14:26,970 we haven't changed much the class from last session, 254 00:14:26,970 --> 00:14:30,450 but we have been able to create hundreds of instances of 255 00:14:30,450 --> 00:14:33,900 this class within a for loop and then in the draw, 256 00:14:33,900 --> 00:14:36,795 we're just executing their functions 257 00:14:36,795 --> 00:14:40,020 that allow them to move and be displayed on the screen. 258 00:14:40,020 --> 00:14:41,580 We're going to leave it here and I'll 259 00:14:41,580 --> 00:14:43,690 see you in the next session.