1 00:00:06,384 --> 00:00:08,900 So the first thing we need to understand, and 2 00:00:08,900 --> 00:00:12,940 here I'm going to add a little bit more of an additional piece of data that we 3 00:00:12,940 --> 00:00:17,000 will need to construct a class, are the elements that we need in a class. 4 00:00:17,000 --> 00:00:21,333 So we discussed that in the example that we were giving of a class of a dog, 5 00:00:21,333 --> 00:00:22,835 we would need some data. 6 00:00:22,835 --> 00:00:26,672 Initially, we would also have a series of functions, but 7 00:00:26,672 --> 00:00:31,465 in between those two, we'll offer the possibility for a constructor. 8 00:00:31,465 --> 00:00:36,662 A constructor is a method or a particular element within a class 9 00:00:36,662 --> 00:00:42,066 that allows us to initiate that class and assign some variables. 10 00:00:42,066 --> 00:00:45,300 And it's incredibly useful, especially when you want to have classes that 11 00:00:45,300 --> 00:00:47,914 begin having different kinds of information. 12 00:00:47,914 --> 00:00:53,154 So let's look at how will we construct our class dog? 13 00:00:53,154 --> 00:00:54,760 As you can see in the left, 14 00:00:54,760 --> 00:00:58,944 we have the class definition with the name of the class. 15 00:00:58,944 --> 00:01:03,027 Then we have a variable, a particular variable called the name, 16 00:01:03,027 --> 00:01:05,848 and we will assign the string max, right. 17 00:01:05,848 --> 00:01:11,325 So after that we could actually create an instance of that class. 18 00:01:11,325 --> 00:01:13,707 We are using the d1 variable here. 19 00:01:13,707 --> 00:01:19,806 Think of it as dog 1 =, and we initiate that class of the class Dog, 20 00:01:19,806 --> 00:01:24,411 we construct basically an instance of that class. 21 00:01:24,411 --> 00:01:29,601 And if we print now the variable d one name, the dot operator here is used to 22 00:01:29,601 --> 00:01:35,239 access the data that lives inside the class or inside the instance of the class. 23 00:01:35,239 --> 00:01:40,312 Actually, in this particular case, the printout will read Max, 24 00:01:40,312 --> 00:01:44,132 right, which is the name of this particular dog. 25 00:01:44,132 --> 00:01:48,472 But this class doesn't really have the chance that we could change the name of 26 00:01:48,472 --> 00:01:49,021 the dog. 27 00:01:49,021 --> 00:01:53,528 It's kind of hard coded into the class, the name of Max, right? 28 00:01:53,528 --> 00:01:56,388 So how would a constructor really operate? 29 00:01:56,388 --> 00:01:59,773 A constructor, we're using this particular line of code. 30 00:01:59,773 --> 00:02:02,847 You can read here def and init, and 31 00:02:02,847 --> 00:02:08,577 we can specify that this dog will actually have a name and an age. 32 00:02:08,577 --> 00:02:13,969 And here we use the self keyword to identify the variables 33 00:02:13,969 --> 00:02:18,023 that refer that are internal to the class. 34 00:02:18,023 --> 00:02:20,848 So we can say self.name = to the name, 35 00:02:20,848 --> 00:02:26,251 which is information that will be passed whenever we construct the class. 36 00:02:26,251 --> 00:02:28,959 We'll see that in a few lines below. 37 00:02:28,959 --> 00:02:33,701 Self.age, so the internal variable h to the class is assigned to 38 00:02:33,701 --> 00:02:37,940 whatever it's passed as an argument in the constructor. 39 00:02:37,940 --> 00:02:41,953 And then whenever we construct an instance of the class, 40 00:02:41,953 --> 00:02:45,305 as you can see here, d one, our dog one is a dog. 41 00:02:45,305 --> 00:02:50,402 But now instead of an empty parenthesis, would actually provide arguments for 42 00:02:50,402 --> 00:02:54,292 the constructor, in this case the name and the age, right. 43 00:02:54,292 --> 00:02:56,698 So Max refers to the name, and 44 00:02:56,698 --> 00:03:01,038 we use a comma to give the second argument for the age. 45 00:03:01,038 --> 00:03:03,853 So if we print d one name we will still get max, but 46 00:03:03,853 --> 00:03:07,429 we could construct a different dog with a different name, and 47 00:03:07,429 --> 00:03:11,930 we can construct any number of dogs with different names and different ages. 48 00:03:11,930 --> 00:03:15,837 So this is how the constructor is giving us in a way a template for 49 00:03:15,837 --> 00:03:20,356 the kind of information that will be passed on for that class to operate. 50 00:03:20,356 --> 00:03:25,055 It could be changing name changing any kind of data that we decide is important 51 00:03:25,055 --> 00:03:26,083 for that class. 52 00:03:26,083 --> 00:03:29,070 Let's look at another example. 53 00:03:29,070 --> 00:03:33,180 As we discuss here, we can actually use functions. 54 00:03:33,180 --> 00:03:36,417 So before our previous class didn't have any functions. 55 00:03:36,417 --> 00:03:41,749 In this case, we will maintain a very simple constructor that 56 00:03:41,749 --> 00:03:48,120 only receives the argument of a name, where we assign the name to the dog. 57 00:03:48,120 --> 00:03:52,607 But then we can actually create a function that lives inside the class. 58 00:03:52,607 --> 00:03:55,154 So this function lives inside the class, 59 00:03:55,154 --> 00:03:58,662 meaning that it's a function that belongs to the class. 60 00:03:58,662 --> 00:04:05,238 So the barking will be a print, spells out the word woof, right. 61 00:04:05,238 --> 00:04:08,634 So if we construct the dog, in this case, 62 00:04:08,634 --> 00:04:12,429 use d1 to assign a new dog called max, right. 63 00:04:12,429 --> 00:04:17,901 And we use the function d1.bark, the system will print out woof, 64 00:04:17,901 --> 00:04:21,070 will actually print out the function. 65 00:04:21,070 --> 00:04:25,682 So we can actually invoke functions of the class as well as 66 00:04:25,682 --> 00:04:28,394 accessing its data, right. 67 00:04:28,394 --> 00:04:32,012 So these are kind of the different ways in which we will start constructing one of 68 00:04:32,012 --> 00:04:32,802 these classes. 69 00:04:32,802 --> 00:04:36,594 We're going to jump into processing and write one together. 70 00:04:36,594 --> 00:04:38,444 So let's do that. 71 00:04:38,444 --> 00:04:41,148 Okay, so here we are in processing. 72 00:04:41,148 --> 00:04:42,533 Let's write our first class. 73 00:04:42,533 --> 00:04:46,736 But before I really want to give you some reference of how a class is written in 74 00:04:46,736 --> 00:04:50,761 context to some other functions, like the setup and the draw function. 75 00:04:50,761 --> 00:04:57,481 So let's start our script as we do often with the depth setup. 76 00:05:01,363 --> 00:05:09,280 And let's create a size of 1200 by 600 and a background. 77 00:05:19,543 --> 00:05:20,865 Okay, there we go. 78 00:05:20,865 --> 00:05:25,313 So we have here our canvas, right. 79 00:05:25,313 --> 00:05:31,573 Then we have also the possibility of our draw function. 80 00:05:31,573 --> 00:05:34,230 But we're not going to use a draw function just yet. 81 00:05:34,230 --> 00:05:36,792 So what we're going to do is write a class, but 82 00:05:36,792 --> 00:05:39,442 we're going to write it just before the setup. 83 00:05:39,442 --> 00:05:45,213 What it's important here is that a class is a completely autonomous entity, 84 00:05:45,213 --> 00:05:49,400 and we can think of it as an incredibly modular piece of. 85 00:05:49,400 --> 00:05:53,997 It's a block, like a function, that can be moved around, right? 86 00:05:53,997 --> 00:05:56,345 So we're going to write our first class here. 87 00:05:56,345 --> 00:06:01,274 We're going to start writing a class just above this setup area, right? 88 00:06:01,274 --> 00:06:04,639 So let's just use the keyword class. 89 00:06:04,639 --> 00:06:07,124 And we're going to write a class. 90 00:06:07,124 --> 00:06:09,764 We're going to aim to write a class of something that we've already 91 00:06:09,764 --> 00:06:10,822 written before, right. 92 00:06:10,822 --> 00:06:17,933 So let's start with the idea of a gradient rectangle, 93 00:06:17,933 --> 00:06:22,725 when I've spelled that correctly, 94 00:06:22,725 --> 00:06:26,135 a Gradient_Rectangle. 95 00:06:26,135 --> 00:06:33,507 And like so, we actually have a class defined as a gradient rectangle, right. 96 00:06:33,507 --> 00:06:39,406 So we can actually now create a constructor for the class. 97 00:06:39,406 --> 00:06:44,174 So I'm going to use the def and 98 00:06:44,174 --> 00:06:47,703 the_ _ init_ _. 99 00:06:47,703 --> 00:06:50,378 The first time I was learning Python, 100 00:06:50,378 --> 00:06:55,323 this kind of syntax felt relatively obscured or kind of complicated. 101 00:06:55,323 --> 00:06:58,985 It's something that you have to learn and get used to it and 102 00:06:58,985 --> 00:07:04,312 suddenly you'll be using it all the time, so it's not going to be much of a problem. 103 00:07:04,312 --> 00:07:09,070 So we are going to use the keyword self to identify 104 00:07:09,070 --> 00:07:14,073 that this class has in fact internal variables. 105 00:07:14,073 --> 00:07:19,254 And we are going to use a couple of, but we can create a couple of variables. 106 00:07:19,254 --> 00:07:21,601 We have been looking at things like vectors, 107 00:07:21,601 --> 00:07:24,021 we have been looking at things like integers. 108 00:07:24,021 --> 00:07:28,925 So let's just create a vector 109 00:07:28,925 --> 00:07:34,621 position and the rectangle size. 110 00:07:34,621 --> 00:07:37,018 So this is going to be the size of our rectangle. 111 00:07:37,018 --> 00:07:42,391 So we're going to use a position to mark the position of an entity in the screen 112 00:07:42,391 --> 00:07:47,102 and then a position, sorry, the size of the rectangle, right. 113 00:07:47,102 --> 00:07:53,355 So now after the constructor, we have to identify how, 114 00:07:53,355 --> 00:07:57,889 sorry, we needed this semicolon here. 115 00:07:57,889 --> 00:08:01,102 We are going to assign that the self.vec_position, 116 00:08:09,157 --> 00:08:13,852 Becomes, and again, this is something that I remember finding confusing. 117 00:08:13,852 --> 00:08:18,409 So this variable vec_position refers to the information 118 00:08:18,409 --> 00:08:20,925 passed from outside the class. 119 00:08:20,925 --> 00:08:24,733 Once we construct the class, we pass an argument, right? 120 00:08:24,733 --> 00:08:29,065 So this is a temporary value that is going to be passed on to the internal 121 00:08:29,065 --> 00:08:32,417 value, that is the self.vec_position, right. 122 00:08:32,417 --> 00:08:34,511 So you could name this something different, right. 123 00:08:34,511 --> 00:08:39,148 In some languages, in Java, for instance, if you do processing Java, 124 00:08:39,148 --> 00:08:43,482 a lot of people use the underscore beforehand to indicate that it's 125 00:08:43,482 --> 00:08:48,439 a temporary variable that is being passed on to the actual variable, right. 126 00:08:48,439 --> 00:08:52,119 But those are conventions, so we're going to just keep it this way. 127 00:08:52,119 --> 00:09:00,392 So self.rec_size is going to be rec_size, right. 128 00:09:00,392 --> 00:09:03,488 So just to reiterate, this rec size here, 129 00:09:03,488 --> 00:09:09,164 which is the argument passed in the constructor, it's not the same thing that 130 00:09:09,164 --> 00:09:14,591 here we're assigning them to be equal, but we could by all means call it r. 131 00:09:14,591 --> 00:09:17,222 Right, I'm going to undo that, but 132 00:09:17,222 --> 00:09:22,770 we are just passing the arguments into the internal variables, right. 133 00:09:22,770 --> 00:09:27,063 So at this point we should have a class, a gradient rectangle, 134 00:09:27,063 --> 00:09:31,518 that if we want to construct an instance of that class, we can do so 135 00:09:31,518 --> 00:09:34,363 by providing a vector and a size, right. 136 00:09:34,363 --> 00:09:40,200 So let's just create that rectangle now, in our setup here. 137 00:09:40,200 --> 00:09:44,568 So we can actually do something like 138 00:09:44,568 --> 00:09:49,518 gradient rectangle 01, some name for 139 00:09:49,518 --> 00:09:55,939 the variable that will be that gradient rectangle. 140 00:09:55,939 --> 00:09:59,237 Let's use the name of the class Gradient_Rectangle, 141 00:09:59,237 --> 00:10:01,915 just to make sure that we spell it correctly. 142 00:10:01,915 --> 00:10:03,591 Gradient_Rectangle, right. 143 00:10:03,591 --> 00:10:08,422 And then when we open parentheses, we need to provide two values, 144 00:10:08,422 --> 00:10:12,304 which are the values that we define as entities in, or 145 00:10:12,304 --> 00:10:16,469 arguments that are requirements for the class, right. 146 00:10:16,469 --> 00:10:24,961 So in this case we could do Pvector (50,50), 147 00:10:24,961 --> 00:10:29,979 and then we could also do 50, 148 00:10:29,979 --> 00:10:33,458 which will be there. 149 00:10:33,458 --> 00:10:37,363 So we have one vector as the vec_position, and 150 00:10:37,363 --> 00:10:41,178 we have 50 to be the rectangle size, right? 151 00:10:41,178 --> 00:10:48,198 So let's just double check this is running. 152 00:10:48,198 --> 00:10:50,063 So this is actually working. 153 00:10:50,063 --> 00:10:54,083 We have the arguments, we have constructed a gradient rectangle with those two 154 00:10:54,083 --> 00:10:56,905 pieces of arguments, right, or those two arguments. 155 00:10:56,905 --> 00:10:59,506 But sometimes you might have so 156 00:10:59,506 --> 00:11:04,918 many arguments that it might be difficult to keep track of them. 157 00:11:04,918 --> 00:11:08,895 So Python offers us a very interesting way. 158 00:11:08,895 --> 00:11:14,425 I'm going to just get a little bit more room here to write further down. 159 00:11:14,425 --> 00:11:18,778 We want to provide the vector position. 160 00:11:18,778 --> 00:11:22,117 So we could also make it a little bit easier for us. 161 00:11:22,117 --> 00:11:25,604 It's a bit more code, but it makes it a little bit more explicit. 162 00:11:25,604 --> 00:11:30,031 Vector positions equals this first argument, right? 163 00:11:30,031 --> 00:11:35,527 And in Python, we could also use the press 164 00:11:35,527 --> 00:11:40,552 Enter for jumping into a new line, and 165 00:11:40,552 --> 00:11:45,591 we can use the rectangle size = 50. 166 00:11:45,591 --> 00:11:50,037 So this is exactly the same of what we had before, but 167 00:11:50,037 --> 00:11:55,396 we are actually making it explicit, we're giving an explicit 168 00:11:55,396 --> 00:12:00,654 expression that the first argument is the vector position and 169 00:12:00,654 --> 00:12:04,624 the second one is the rectangle size, right. 170 00:12:04,624 --> 00:12:07,820 We do not need this material here. 171 00:12:07,820 --> 00:12:12,224 I'm adding it because it just makes it a little bit more clear as we are going for 172 00:12:12,224 --> 00:12:16,028 the first time through a class, that in fact, what we are providing 173 00:12:16,028 --> 00:12:19,395 is the first argument that refers to this vector position. 174 00:12:19,395 --> 00:12:24,767 And the second argument, which is a 50, refers to this second argument. 175 00:12:24,767 --> 00:12:28,758 I'm a personal fan sometimes of having slightly longer code that is 176 00:12:28,758 --> 00:12:32,960 more readable, especially when I'm teaching, especially when I'm 177 00:12:32,960 --> 00:12:36,828 learning certain things, just to make it very clear for myself. 178 00:12:36,828 --> 00:12:41,195 So at this point, we have constructed a class, but 179 00:12:41,195 --> 00:12:46,894 we haven't really seen any graphic content of the class, right? 180 00:12:46,894 --> 00:12:51,466 So let's go ahead and do a small function. 181 00:12:51,466 --> 00:12:55,976 So the function that we're going to create, it's going to be a draw function, 182 00:12:55,976 --> 00:13:00,217 a function where this kind of rectangle draws itself into the screen. 183 00:13:00,217 --> 00:13:05,848 So let's do the def draw function, 184 00:13:05,848 --> 00:13:10,925 it's not an inbuilt function. 185 00:13:10,925 --> 00:13:13,174 Maybe we could name it something different. 186 00:13:13,174 --> 00:13:15,876 Let's call it display. 187 00:13:15,876 --> 00:13:18,945 So the display function, it's going to be for us. 188 00:13:18,945 --> 00:13:24,321 We do need to pass on the self here for having access 189 00:13:24,321 --> 00:13:30,089 to all the variables that are belonging to the class. 190 00:13:30,089 --> 00:13:36,772 And here we can actually use things like noStroke and fill. 191 00:13:36,772 --> 00:13:40,227 Let's just do this rectangle red for now. 192 00:13:40,227 --> 00:13:45,252 We can pass a color later on and change the color of this rectangle, 193 00:13:45,252 --> 00:13:48,054 but for now, it's going to be all red. 194 00:13:48,054 --> 00:13:56,388 So rectangle here, we know that the rectangle requires the position, but 195 00:13:56,388 --> 00:14:02,755 we will use the self.position.x self.position.y. 196 00:14:02,755 --> 00:14:06,620 Because we know the rectangle requires two positions and two sizes. 197 00:14:06,620 --> 00:14:13,490 And then for the size, we're going to use the same size in x and 198 00:14:13,490 --> 00:14:17,466 y for those two variables, right. 199 00:14:17,466 --> 00:14:23,122 So now the display function of our rectangle basically draws itself, right? 200 00:14:23,122 --> 00:14:27,711 So I like sometimes just to remind ourselves that this area up here, 201 00:14:27,711 --> 00:14:31,012 between this section and this section here, and 202 00:14:31,012 --> 00:14:34,233 we're going to learn how to use multiple files and 203 00:14:34,233 --> 00:14:39,247 different tabs in processing and all these ways of organizing your code. 204 00:14:39,247 --> 00:14:43,803 But for now, I just wanted to make sure this is the definition of a class, right, 205 00:14:43,803 --> 00:14:44,944 all this area here. 206 00:14:44,944 --> 00:14:48,641 We have the constructor and we have the display, 207 00:14:48,641 --> 00:14:51,355 which is one of the first function. 208 00:14:51,355 --> 00:14:56,625 Once we've constructed one entity, 209 00:14:56,625 --> 00:15:01,078 we can invoke their functions. 210 00:15:01,078 --> 00:15:07,067 So let's just do the name of our instance. 211 00:15:07,067 --> 00:15:12,210 In this case, the gr_01 is an instance, and 212 00:15:12,210 --> 00:15:17,361 inside that gr_01 is the display function. 213 00:15:17,361 --> 00:15:21,551 So we actually can invoke the drawing of that class. 214 00:15:21,551 --> 00:15:27,487 So now we actually get the drawing of that class appearing in the screen, 215 00:15:27,487 --> 00:15:28,957 like so, right? 216 00:15:28,957 --> 00:15:33,471 So just to reiterate, we are starting to construct a class. 217 00:15:33,471 --> 00:15:36,384 We are going to be learning how to pass different arguments. 218 00:15:36,384 --> 00:15:40,171 How do we create multiple instances of classes and so on. 219 00:15:40,171 --> 00:15:44,965 But for now, we are actually just creating a modular block of the class. 220 00:15:44,965 --> 00:15:48,848 And we are kind of starting to learn how to create an instance of a class, 221 00:15:48,848 --> 00:15:52,112 which is in fact the way that class appears into the screen. 222 00:15:52,112 --> 00:15:56,931 So I'm going to take you through multiple instances of classes in the next session. 223 00:15:56,931 --> 00:15:57,431 I'll see you then.