1 00:00:06,056 --> 00:00:07,235 Welcome to this new lesson. 2 00:00:07,235 --> 00:00:10,655 We are going to continue constructing our first behavior, 3 00:00:10,655 --> 00:00:14,941 which is the relationship that two objects will have with one another. 4 00:00:14,941 --> 00:00:17,748 And it's going to be a bouncing kind of behavior, right? 5 00:00:17,748 --> 00:00:22,182 So let's just jump directly where we left off into the code. 6 00:00:22,182 --> 00:00:26,642 So we're continuing from last lesson we wrote down, 7 00:00:26,642 --> 00:00:29,425 we want to bounce on the borders. 8 00:00:29,425 --> 00:00:33,671 And eventually, let's just add also here, 9 00:00:33,671 --> 00:00:40,612 in a way what we want to do today, which is bounce with each other, right? 10 00:00:40,612 --> 00:00:42,999 That's the function where we want to get. 11 00:00:42,999 --> 00:00:44,721 So let's start writing some of these functions. 12 00:00:44,721 --> 00:00:50,716 We have a setup that basically runs all the list of functions in the run function, 13 00:00:50,716 --> 00:00:51,344 right? 14 00:00:51,344 --> 00:00:55,186 Which is a function that for us works as an outline. 15 00:00:55,186 --> 00:00:56,499 And I really like this setup. 16 00:00:56,499 --> 00:01:00,999 I often kind of really start with the setup and I start really thinking on 17 00:01:00,999 --> 00:01:04,982 what are the behaviors that I really want to include in a class. 18 00:01:04,982 --> 00:01:10,012 And I just throw a few of them into the world and maybe start working on how to 19 00:01:10,012 --> 00:01:14,980 change their behavior, how to make them kind of be expressive, right? 20 00:01:14,980 --> 00:01:17,096 So let's just bounce on the borders. 21 00:01:17,096 --> 00:01:21,305 First, let's just write a function to bounce on the borders. 22 00:01:21,305 --> 00:01:24,807 Because if you remember, if we run this right now, 23 00:01:24,807 --> 00:01:30,193 the rectangles kind of reach the border, but they kind of keep going, right? 24 00:01:30,193 --> 00:01:33,699 So we could do a bounce. 25 00:01:33,699 --> 00:01:38,887 There's different ways of thinking of the edge condition. 26 00:01:38,887 --> 00:01:43,041 Let's just write the bounds which we've written before. 27 00:01:43,041 --> 00:01:49,510 But I think it's always good practice to rehearse a bit more bounce on borders. 28 00:01:55,718 --> 00:01:56,218 And we have. 29 00:02:02,098 --> 00:02:05,975 Here we go. 30 00:02:05,975 --> 00:02:08,583 So if our position is, 31 00:02:14,761 --> 00:02:18,359 Let's use the variables that we have actually, 32 00:02:18,359 --> 00:02:24,252 I always kind of of feel like I misspell a lot if I don't copy paste the variable. 33 00:02:24,252 --> 00:02:29,420 So if our position in x is smaller than 0, well, 34 00:02:29,420 --> 00:02:36,114 in that condition, we multiply the velocity by -1, right? 35 00:02:36,114 --> 00:02:41,513 So we invert the velocity 36 00:02:41,513 --> 00:02:48,201 self.velocity at mult -1. 37 00:02:48,201 --> 00:02:53,399 So that's one condition on x. 38 00:02:53,399 --> 00:02:56,064 The other condition, 39 00:02:56,064 --> 00:03:01,252 which we actually can copy is if this value of 40 00:03:01,252 --> 00:03:06,876 x is bigger than the size of the screen, right? 41 00:03:06,876 --> 00:03:09,072 And if you think about it, well, 42 00:03:09,072 --> 00:03:13,792 the size of the screen is defined by this variable, which is 1200. 43 00:03:13,792 --> 00:03:15,934 The fact that it's a variable is that this could change. 44 00:03:15,934 --> 00:03:21,735 We could use this 1200 directly, but this would be hard coding 45 00:03:21,735 --> 00:03:27,342 a value that is not related to the class or to the canvas, right? 46 00:03:27,342 --> 00:03:33,996 So we might want to, at this point, allow the object. 47 00:03:33,996 --> 00:03:39,116 And this is kind of a decision, an arbitrary decision that might be useful 48 00:03:39,116 --> 00:03:44,669 here is to think, well, how can this class know the size of the screen, right? 49 00:03:44,669 --> 00:03:51,187 Perhaps we can include a variable called something like x max. 50 00:03:51,187 --> 00:03:55,222 What is the maximum boundary on x, right? 51 00:03:55,222 --> 00:03:58,769 So let's do that x_max. 52 00:03:58,769 --> 00:04:02,699 If we need it, we could include a y max, but at this point we don't really need it. 53 00:04:02,699 --> 00:04:09,632 So I don't want to make this class longer of what it really needs to be, 54 00:04:09,632 --> 00:04:13,979 but we are going to need this x_max position or 55 00:04:13,979 --> 00:04:17,637 variable equals to x_max, right? 56 00:04:17,637 --> 00:04:23,890 And in this way we could actually pass information from outside the class 57 00:04:23,890 --> 00:04:29,539 that will tell the class this is how big the world will be, right? 58 00:04:29,539 --> 00:04:34,441 I would be curious to also change the zero which we've hardcoded here to be 59 00:04:34,441 --> 00:04:35,399 the minimum. 60 00:04:35,399 --> 00:04:40,303 In a way you could imagine doing a x minimum class. 61 00:04:40,303 --> 00:04:44,097 So what is the kind of the lower boundary we are assuming here is zero. 62 00:04:44,097 --> 00:04:48,659 But if we would want this class to be a little bit more flexible and 63 00:04:48,659 --> 00:04:52,125 be able to bounce on more arbitrary boundaries, 64 00:04:52,125 --> 00:04:55,350 we might want to include an x minimum as well. 65 00:04:55,350 --> 00:04:57,766 But I'm just going to do this for now. 66 00:04:57,766 --> 00:05:00,177 So I'm pointing it out. 67 00:05:00,177 --> 00:05:02,588 As you go through the documentation, 68 00:05:02,588 --> 00:05:06,594 you will be able to see how the minimum version could also work. 69 00:05:06,594 --> 00:05:11,514 So let's, if we would try to run this class now, 70 00:05:11,514 --> 00:05:18,248 the fact that we have this new max value which we will be using here. 71 00:05:18,248 --> 00:05:19,406 If the class, 72 00:05:19,406 --> 00:05:25,300 if the position in x is bigger than the maximum boundary bounds, right? 73 00:05:25,300 --> 00:05:26,480 But if we try to run this, 74 00:05:26,480 --> 00:05:30,325 the class will fail because we're not providing the right number of arguments. 75 00:05:30,325 --> 00:05:35,617 So we have three arguments, vector, integer vector. 76 00:05:35,617 --> 00:05:39,697 We need a fourth one, which will be the image sizing x, 77 00:05:39,697 --> 00:05:41,931 which is the upper boundary. 78 00:05:41,931 --> 00:05:45,947 So how big the screen is will determine what we're 79 00:05:45,947 --> 00:05:50,257 considering the maximum size of the screen, right? 80 00:05:50,257 --> 00:05:52,895 So let's try that. 81 00:05:52,895 --> 00:05:56,153 Let's just make sure that now that we have this function, 82 00:05:56,153 --> 00:05:59,412 we are effectively using it, because if we don't use it, 83 00:05:59,412 --> 00:06:03,288 we don't call it into our run, it's not going to be executed, right? 84 00:06:06,680 --> 00:06:07,356 There we go. 85 00:06:07,356 --> 00:06:11,220 So we have the run function is being executed and 86 00:06:11,220 --> 00:06:14,609 we are going to go through three behaviors. 87 00:06:14,609 --> 00:06:15,817 We are running into an error. 88 00:06:15,817 --> 00:06:20,971 Let's just try to find the issue. 89 00:06:20,971 --> 00:06:22,674 Okay, I think I see the issue. 90 00:06:22,674 --> 00:06:27,705 I keep forgetting ourself is 91 00:06:27,705 --> 00:06:34,419 a variable that belongs to the class. 92 00:06:34,419 --> 00:06:39,370 There we go, so now we could see that our rectangles remain 93 00:06:39,370 --> 00:06:44,842 within the canvas as they're bouncing in the borders, right? 94 00:06:44,842 --> 00:06:52,173 So let's just do the, The bounce with color, 95 00:06:52,173 --> 00:06:57,357 which is again registering movement, registering motion, right? 96 00:06:57,357 --> 00:07:03,522 And color, we currently are not using color at all. 97 00:07:03,522 --> 00:07:05,193 This is something we can do relatively quickly. 98 00:07:05,193 --> 00:07:11,428 I think let's just construct a few variables all the way up here. 99 00:07:11,428 --> 00:07:18,906 And these are not necessarily variables that we need to, 100 00:07:20,786 --> 00:07:24,537 To specify as part of the constructor. 101 00:07:24,537 --> 00:07:29,230 These are going to be internal variables, rgb. 102 00:07:29,230 --> 00:07:30,415 R change. 103 00:07:32,589 --> 00:07:37,308 And here we could say this is going to be a 0.1, 104 00:07:37,308 --> 00:07:41,543 g change, it's going to be value of 4, and 105 00:07:41,543 --> 00:07:45,795 b change is going to be a value of 1, right? 106 00:07:45,795 --> 00:07:51,670 So we have some values that are going to be used for color, 107 00:07:51,670 --> 00:07:57,693 and now we can actually make the function bounce color. 108 00:08:07,167 --> 00:08:11,659 And if you remember correctly, what we're doing here is that the colors, 109 00:08:11,659 --> 00:08:15,141 each one of these rectangles is going to have its own color. 110 00:08:15,141 --> 00:08:17,125 But this color is going to be changing and 111 00:08:17,125 --> 00:08:20,979 it's going to be bouncing in the maximum number of each one of the channels. 112 00:08:20,979 --> 00:08:23,253 The red channel goes from 0 to 255. 113 00:08:23,253 --> 00:08:27,847 So at 255 is going to go back to 0 and at 0 it's going to go back to 255. 114 00:08:27,847 --> 00:08:31,541 And each one of the channels is going to be bouncing independently, therefore 115 00:08:31,541 --> 00:08:35,651 creating kind of a gradient effect, again, an effect that we've covered already. 116 00:08:37,031 --> 00:08:41,810 So let's do plus equals self.rchange. 117 00:08:45,477 --> 00:08:51,218 Right, I believe that's the way we called rchange, 118 00:08:51,218 --> 00:08:54,414 gchange, bchange, right? 119 00:08:54,414 --> 00:08:57,768 So these are the three channels, r, g, b. 120 00:08:59,581 --> 00:09:04,845 So we want to do r, g, b and r, g, and 121 00:09:04,845 --> 00:09:10,648 b, right, and that is just changing. 122 00:09:10,648 --> 00:09:15,941 These values are going to tend towards white as we go from 0 to 255. 123 00:09:15,941 --> 00:09:19,112 If we actually, 124 00:09:19,112 --> 00:09:24,772 hit a condition like if the red 125 00:09:24,772 --> 00:09:29,754 value is smaller than 0, 126 00:09:29,754 --> 00:09:35,870 then we want to do self.rchange 127 00:09:35,870 --> 00:09:41,994 times equals minus 1, right? 128 00:09:41,994 --> 00:09:49,122 So this condition is flipping the rate of change for 129 00:09:49,122 --> 00:09:56,250 the red value when it reaches its lower boundary and 130 00:09:56,250 --> 00:10:00,410 its upper boundary, right? 131 00:10:00,410 --> 00:10:03,643 The same thing happens, it basically flips. 132 00:10:03,643 --> 00:10:06,437 So make sure that the column here is a little bit more visible. 133 00:10:06,437 --> 00:10:11,395 So that's just for the red, and we would repeat this equation for the green and 134 00:10:11,395 --> 00:10:12,791 the blue. 135 00:10:12,791 --> 00:10:19,391 So let's just make sure we do green and blue. 136 00:10:19,391 --> 00:10:26,392 And here the same thing, let's just do red, 137 00:10:26,392 --> 00:10:31,557 green and finally blue, right? 138 00:10:31,557 --> 00:10:34,230 So we finally, oops, 139 00:10:34,230 --> 00:10:40,157 that's the way you define the function, right? 140 00:10:40,157 --> 00:10:46,737 So we have self.bounce color, right? 141 00:10:46,737 --> 00:10:49,059 If you run this at this point, again, 142 00:10:49,059 --> 00:10:53,934 nothing's going to happen because we are not using the r, g, b colors anywhere. 143 00:10:53,934 --> 00:11:01,719 In the script, we need to make sure that once we fill this rectangle, 144 00:11:01,719 --> 00:11:07,234 we use r, g, b, right, or, sorry, self.g. 145 00:11:07,234 --> 00:11:12,270 Right, so we're actually using the internal 146 00:11:12,270 --> 00:11:16,403 variables that we've calculated and 147 00:11:16,403 --> 00:11:22,377 they're kind of bouncing around to control the color. 148 00:11:22,377 --> 00:11:25,089 So let's see if this is working. 149 00:11:25,089 --> 00:11:30,382 So you see, it is in fact working, but they're all kind of 150 00:11:30,382 --> 00:11:35,238 palpitating between these colors synchronously, 151 00:11:35,238 --> 00:11:40,681 or like at the same time with the same starting color. 152 00:11:40,681 --> 00:11:45,367 If you would want to randomize some of 153 00:11:45,367 --> 00:11:50,061 those colors, you can do so as well. 154 00:11:51,321 --> 00:11:54,231 We could actually, make any of these r, g, 155 00:11:54,231 --> 00:11:58,180 b attributes being something that you randomize, right? 156 00:11:58,180 --> 00:12:03,536 But I think that's maybe something that it's more in your hands 157 00:12:03,536 --> 00:12:08,791 of exploring like, I invite you to turn off this background and 158 00:12:08,791 --> 00:12:13,962 see how this kind of gradient actually paints into the screen. 159 00:12:13,962 --> 00:12:18,890 You might also at this point want to remove from the display function, 160 00:12:18,890 --> 00:12:21,343 right, or the display method. 161 00:12:21,343 --> 00:12:25,746 Let's just go back to no stroke because the gradient effect doesn't really 162 00:12:25,746 --> 00:12:29,271 work if it has a stroke that we kind of introduce at some point. 163 00:12:30,971 --> 00:12:35,843 As you can see here, we have these gradients, and 164 00:12:35,843 --> 00:12:42,920 the gradients are being shifted based on the speed of movement, right? 165 00:12:44,976 --> 00:12:49,551 So that's the effect that we're going for. 166 00:12:49,551 --> 00:12:54,182 But that effect, I'm going to go back to leaving 167 00:12:54,182 --> 00:12:59,408 the background painted because I want to see a bit more 168 00:12:59,408 --> 00:13:04,423 clearly the behavior of the rectangles, right? 169 00:13:04,423 --> 00:13:10,529 Mainly because we're at the point where we really need to write the final function, 170 00:13:10,529 --> 00:13:13,977 which is the bouncing with each other, right? 171 00:13:13,977 --> 00:13:18,984 Each rectangle, we will do so that let's just run it with maybe 172 00:13:18,984 --> 00:13:24,531 a few rectangles and explain what we are trying to achieve. 173 00:13:24,531 --> 00:13:30,389 So these rectangles, at a certain point, they are aligning with each other, 174 00:13:30,389 --> 00:13:35,980 or they get to a point in which arguably, they could bounce with one another 175 00:13:35,980 --> 00:13:41,961 out of their relationship of the upper and lower entity in the list, all right? 176 00:13:41,961 --> 00:13:43,010 So what we really, 177 00:13:43,010 --> 00:13:47,801 want to understand is how these rectangles would actually register their neighbors, 178 00:13:47,801 --> 00:13:52,079 these neighbors in this list, and actually change their behavior, right? 179 00:13:52,079 --> 00:13:56,389 We know that the behavior of bouncing is basically flipping the velocity. 180 00:13:56,389 --> 00:14:00,481 So we know how to do the bounce, but we haven't seen how to talk. 181 00:14:01,981 --> 00:14:06,225 How would one rectangle as an object talk to its adjacent or 182 00:14:06,225 --> 00:14:08,625 its neighbor in a list, right? 183 00:14:08,625 --> 00:14:11,801 So let's look into that. 184 00:14:11,801 --> 00:14:16,042 So the first thing I would like to do is understand that all these 185 00:14:16,042 --> 00:14:18,769 rectangles belong to a list, right? 186 00:14:18,769 --> 00:14:23,601 So the function that we would call 187 00:14:23,601 --> 00:14:28,433 bounce with each other, right, 188 00:14:28,433 --> 00:14:35,179 which we could start writing somewhere here. 189 00:14:37,677 --> 00:14:43,049 Right, bounce with each other needs to take in consideration 190 00:14:43,049 --> 00:14:48,123 a who am I as a rectangle, which is my own index in the list. 191 00:14:48,123 --> 00:14:50,733 And do I have access to the list? 192 00:14:50,733 --> 00:14:57,358 Can I read the list and determine who would be adjacent to the left or 193 00:14:57,358 --> 00:15:01,393 up in a way or adjacent below me, right? 194 00:15:01,393 --> 00:15:06,209 Remember that lists, it's a data structure that it's an ordered data structure 195 00:15:06,209 --> 00:15:09,764 that we can rely on having an entity before or ahead of us, and 196 00:15:09,764 --> 00:15:12,371 that being always the same entity, right? 197 00:15:12,371 --> 00:15:16,810 So if we have been sequential on the construction of that list, 198 00:15:16,810 --> 00:15:21,519 we can in fact ask the question, who is the next entity in the list? 199 00:15:21,519 --> 00:15:24,543 And that will tell me, is the object below me, right? 200 00:15:24,543 --> 00:15:26,361 Granted, there's a few exceptions. 201 00:15:26,361 --> 00:15:30,551 If the object that we're asking for, we're the first object in the list and 202 00:15:30,551 --> 00:15:32,745 we're asking for an entity before us. 203 00:15:32,745 --> 00:15:36,327 There is not going to be an entity before us, and if we are the last object in 204 00:15:36,327 --> 00:15:39,461 the list, we might not be able to ask for the last one, right? 205 00:15:39,461 --> 00:15:44,204 So this function will need to take in consideration that there are two 206 00:15:44,204 --> 00:15:48,720 exceptions, at the beginning, at the end of that list, right? 207 00:15:48,720 --> 00:15:53,881 But this class at this stage doesn't have any information of how to access. 208 00:15:55,381 --> 00:15:57,229 Let's just ask here. 209 00:15:57,229 --> 00:15:58,541 Access the list. 210 00:16:00,610 --> 00:16:06,680 And also access my index in the list. 211 00:16:06,680 --> 00:16:09,720 So who am I in the list as an index? 212 00:16:09,720 --> 00:16:11,088 And what is the list? 213 00:16:11,088 --> 00:16:13,600 Those are the two pieces of information that we currently don't have. 214 00:16:13,600 --> 00:16:17,240 So let's just include those into the constructor. 215 00:16:17,240 --> 00:16:24,197 Assuming that one we are going to call the index, which is going to be a variable, 216 00:16:24,197 --> 00:16:29,170 an integer that will represent our index in the list. 217 00:16:29,170 --> 00:16:36,354 And then let's call the other list, right. 218 00:16:36,354 --> 00:16:41,330 Let's just do the non capital underscore, right. 219 00:16:41,330 --> 00:16:45,794 So index is going to be an integer and this is going to be a list, right. 220 00:16:45,794 --> 00:16:50,247 So once we provide those information outside the class, 221 00:16:50,247 --> 00:16:56,696 we need to keep a reminder of what we are intending those variables to be, right. 222 00:16:56,696 --> 00:17:02,104 So let's just be self.index = index and 223 00:17:02,104 --> 00:17:05,312 self., others list. 224 00:17:05,312 --> 00:17:10,218 I'm calling it the others list because I like thinking conceptually that when 225 00:17:10,218 --> 00:17:13,984 we're writing from within the class, right. 226 00:17:13,984 --> 00:17:18,960 We have to think of how this entity would relate to other entities, right? 227 00:17:18,960 --> 00:17:24,194 So the list of other entities, in this case it's represented by the others list. 228 00:17:25,414 --> 00:17:31,542 So we have two new entities or two new arguments in the constructor. 229 00:17:31,542 --> 00:17:33,894 Let's go into our constructor. 230 00:17:33,894 --> 00:17:38,810 This is where I really, when this constructor starts getting long, 231 00:17:38,810 --> 00:17:43,118 this is where I really like separating them in line by line. 232 00:17:43,118 --> 00:17:49,634 I know it gets a bit longer, but I think that it kind of helps clarity, right. 233 00:17:49,634 --> 00:17:54,876 And it also helps to remember this kind of 234 00:17:54,876 --> 00:18:01,974 optional declaration of what each entity is, right. 235 00:18:03,034 --> 00:18:08,826 I'm going to do that here just for the sake of clarity for 236 00:18:08,826 --> 00:18:13,847 you, that you know which piece of information 237 00:18:13,847 --> 00:18:18,156 are we providing in each case, right. 238 00:18:18,156 --> 00:18:19,844 That's what we have so far. 239 00:18:19,844 --> 00:18:25,323 Now we need to provide the index, 240 00:18:28,063 --> 00:18:31,984 and the list of others. 241 00:18:33,164 --> 00:18:37,068 So we don't have this index yet and the list of others, we don't have it yet. 242 00:18:37,068 --> 00:18:38,364 Right, so what would be the index? 243 00:18:38,364 --> 00:18:40,822 The index will be this i, right. 244 00:18:40,822 --> 00:18:45,364 I is as we're constructing the objects in a for loop and 245 00:18:45,364 --> 00:18:48,227 we are appending them to the list, 246 00:18:48,227 --> 00:18:53,862 the I represents the index of the current entity we're creating. 247 00:18:53,862 --> 00:18:58,724 So we will let the entity know our kind of gradient rectangle know 248 00:18:58,724 --> 00:19:01,374 that this is your index, right. 249 00:19:01,374 --> 00:19:05,907 If you're the 0 index, you're going to be the first entity in the list, right? 250 00:19:05,907 --> 00:19:09,634 And then the list is the actual list that we're constructing. 251 00:19:09,634 --> 00:19:15,330 So if we pass in the list into the class, the class can do list calculations, 252 00:19:15,330 --> 00:19:20,403 calculations about who would be my adjacent neighbors in the list or 253 00:19:20,403 --> 00:19:23,114 kind of other entities in the list. 254 00:19:23,114 --> 00:19:25,889 Right, so this is the list variable that we constructed. 255 00:19:25,889 --> 00:19:30,524 We're passing it into the class now, for that class to be able 256 00:19:30,524 --> 00:19:35,544 to perform operations with that, I think we're good here. 257 00:19:35,544 --> 00:19:41,369 Now we can go back to the class and having the two pieces of information 258 00:19:41,369 --> 00:19:47,004 that we discussed, we can actually write this function, right? 259 00:19:48,504 --> 00:19:54,064 So let's just create an exception, let's start with an exception, right? 260 00:19:54,064 --> 00:19:56,544 What is the first exception? 261 00:19:56,544 --> 00:20:01,623 If the self.index 262 00:20:01,623 --> 00:20:05,888 > 0, right? 263 00:20:05,888 --> 00:20:12,866 And this is a way of saying, let's just start this calculation of bouncing for 264 00:20:12,866 --> 00:20:17,518 entities that are the number one entity in the list, 265 00:20:17,518 --> 00:20:22,066 knowing that the entity 0 will behave differently 266 00:20:22,066 --> 00:20:26,550 because it doesn't have an upper limit, right? 267 00:20:26,550 --> 00:20:30,894 So let's just grab one entity in the list right? 268 00:20:30,894 --> 00:20:37,446 So other_up which will be the name we'll give to an entity that is above us, right? 269 00:20:37,446 --> 00:20:44,086 So let's do self.others, how did we call the list? 270 00:20:44,086 --> 00:20:45,974 We called it others_list, right. 271 00:20:45,974 --> 00:20:51,198 Let's just make sure we spell that, so self.others_list. 272 00:20:51,198 --> 00:20:54,808 And here, as in any list, we can provide the index. 273 00:20:54,808 --> 00:21:01,725 So we know that the index value, the self.index is our index, 274 00:21:01,725 --> 00:21:08,524 but the self.index-1 means the entity before me, right? 275 00:21:10,184 --> 00:21:12,096 Right, so this we can make a comment. 276 00:21:12,096 --> 00:21:19,516 This is the other up, right? 277 00:21:19,516 --> 00:21:23,724 So that represents the entity that would be above me. 278 00:21:23,724 --> 00:21:29,704 And let's calculate the distance. 279 00:21:31,364 --> 00:21:35,615 So this is going to be a variable that is going to be, let's calculate 280 00:21:35,615 --> 00:21:40,460 the distance between the position in x minus the other's position in x. 281 00:21:40,460 --> 00:21:44,892 So we're only concerned about position in x in this condition, right? 282 00:21:44,892 --> 00:21:49,364 So the distance, we can do it as a simple subtraction of. 283 00:21:49,364 --> 00:21:58,064 So let's do self.vec_position.x- the other_up, and the other_up. 284 00:21:58,064 --> 00:22:06,316 This is interesting because this is an instance of the class. 285 00:22:06,316 --> 00:22:08,145 So now we can actually, 286 00:22:08,145 --> 00:22:13,794 the other_up has its own version of this vector position variable. 287 00:22:13,794 --> 00:22:15,922 So we can, we haven't seen this before. 288 00:22:15,922 --> 00:22:20,924 We have an instance of a class, and now we're accessing its internal data, 289 00:22:20,924 --> 00:22:25,434 which is the vector position of that other entity and the x, right? 290 00:22:25,434 --> 00:22:28,962 So the distance will be a calculation. 291 00:22:28,962 --> 00:22:34,280 And let's just do this calculation depending on if we're left or 292 00:22:34,280 --> 00:22:38,786 right of this entity, could be positive or negative. 293 00:22:38,786 --> 00:22:45,754 So let's make it an absolute value value of this calculation, right? 294 00:22:45,754 --> 00:22:49,583 So we're aiming for a value that is very small, 295 00:22:49,583 --> 00:22:52,922 probably less than one, less than two. 296 00:22:52,922 --> 00:22:57,833 So proximity is something that we could say, kind of, it should be zero, 297 00:22:57,833 --> 00:23:01,602 but we want to give it a bit of tolerance for this, right. 298 00:23:01,602 --> 00:23:08,750 So we're going to say if the distance is smaller than 2, what needs to happen? 299 00:23:08,750 --> 00:23:15,654 Well, we can do what we do in the bounds, right? 300 00:23:15,654 --> 00:23:17,262 Let's just look at the bounds. 301 00:23:17,262 --> 00:23:23,109 The self.multiply time- 1, 302 00:23:23,109 --> 00:23:29,854 basically that should be enough. 303 00:23:29,854 --> 00:23:34,068 We could do a few other things, like changing the color just to 304 00:23:34,068 --> 00:23:38,094 kind of signify that this something has indeed happened. 305 00:23:38,094 --> 00:23:41,676 But let's just start here by executing this function. 306 00:23:50,174 --> 00:23:58,694 So here we go, let's make sure that we have everything in the outline. 307 00:24:00,670 --> 00:24:06,124 Our main class hasn't changed, let's see if we're running this well. 308 00:24:06,124 --> 00:24:12,307 Okay, so we're seeing, in fact, 309 00:24:12,307 --> 00:24:17,508 we don't see any bouncing happening yet. 310 00:24:17,508 --> 00:24:21,151 So it might be that we're not running any errors, 311 00:24:21,151 --> 00:24:25,556 but we are not getting the behavior that we're expecting. 312 00:24:25,556 --> 00:24:26,456 Let's just double check. 313 00:24:31,804 --> 00:24:36,799 So one of the things that we can consider, 314 00:24:36,799 --> 00:24:45,924 is that we also want to change the velocity vector of the other, right. 315 00:24:45,924 --> 00:24:51,226 So, at a time in which 316 00:24:51,226 --> 00:24:58,364 we are kind of aligning with each other, we get 0. 317 00:25:00,424 --> 00:25:05,125 Flip the velocity vector -1 318 00:25:05,125 --> 00:25:10,104 to both us and our neighbor. 319 00:25:10,104 --> 00:25:16,032 So you can see here now we are starting to see the desired behavior, right. 320 00:25:16,032 --> 00:25:20,482 As you can see, when two entities are getting close to one another, 321 00:25:20,482 --> 00:25:23,584 they do start kind of bouncing. 322 00:25:23,584 --> 00:25:26,004 And this takes us to an interesting point. 323 00:25:28,464 --> 00:25:32,754 While the setup was all deterministic, there's kind of a clear kind of simple 324 00:25:32,754 --> 00:25:36,004 behaviors that are kind of building up the final behavior or 325 00:25:36,004 --> 00:25:39,851 the final kind of composition is quite difficult to predict, right? 326 00:25:39,851 --> 00:25:44,127 Starting to become more interesting from the perspective of emergence, right? 327 00:25:44,127 --> 00:25:47,058 From the perspective of behaviors that, 328 00:25:47,058 --> 00:25:51,507 that need to be simulated in a way to be understood or executed. 329 00:25:51,507 --> 00:25:55,624 So let's just make it a little bit more visible for us to see here. 330 00:25:55,624 --> 00:26:01,157 Self.r = 0, so we're going to reset the red value 331 00:26:01,157 --> 00:26:06,964 on collision self.green, it's going to be 255. 332 00:26:08,064 --> 00:26:15,424 And self.b = 0, right. 333 00:26:17,684 --> 00:26:20,700 This is going to make that the green, 334 00:26:20,700 --> 00:26:24,508 we're going to have a green blip if you want. 335 00:26:24,508 --> 00:26:29,379 Whenever you see how a collision happens, 336 00:26:29,379 --> 00:26:34,257 we actually mark that with color, right? 337 00:26:34,257 --> 00:26:36,402 And if we want to make that more evident, 338 00:26:36,402 --> 00:26:39,591 I think that it would be interesting that we don't start. 339 00:26:39,591 --> 00:26:43,888 Let's start with a value of 150 340 00:26:43,888 --> 00:26:48,956 here, maybe 80 here. 341 00:26:48,956 --> 00:26:55,109 So that the color patterns that we going to go through are slightly 342 00:26:55,109 --> 00:27:01,204 different and you see how we're registering at this point. 343 00:27:01,204 --> 00:27:06,868 The behavior is only happening from on my above parent, right. 344 00:27:06,868 --> 00:27:09,421 It's not technically a parent, but 345 00:27:09,421 --> 00:27:13,636 it's a neighbor that actually we're calculating above. 346 00:27:13,636 --> 00:27:19,044 We don't really need to do this behavior in both directions. 347 00:27:19,044 --> 00:27:23,784 You could, but I invite you to really play with the different behaviors 348 00:27:23,784 --> 00:27:28,761 that you can actually obtain by being able to change your own movement based 349 00:27:28,761 --> 00:27:30,974 on your neighbor's position. 350 00:27:30,974 --> 00:27:35,880 This is kind of the, this whole script has been to understand this line here, 351 00:27:35,880 --> 00:27:37,814 which is the other, right. 352 00:27:37,814 --> 00:27:41,614 How do we actually access the list? 353 00:27:41,614 --> 00:27:46,325 And through our own understanding of the index that we as a class have 354 00:27:46,325 --> 00:27:51,283 in that list, we can understand the index of the other entity which is in 355 00:27:51,283 --> 00:27:54,774 this case an entity, just one before us, right? 356 00:27:54,774 --> 00:27:59,919 So above us, right, and then do some calculations in relation to that. 357 00:27:59,919 --> 00:28:04,209 So we have a very foundation of a behavior where two classes start 358 00:28:04,209 --> 00:28:06,364 interacting with one another. 359 00:28:07,744 --> 00:28:09,837 Just to conclude, maybe, and 360 00:28:09,837 --> 00:28:15,312 this is just the beauty of writing these things in a way that it's associative. 361 00:28:15,312 --> 00:28:20,237 We can actually turn off the background so you can actually see 362 00:28:20,237 --> 00:28:25,492 them in their kind of on the manifestation as a gradient, right. 363 00:28:25,492 --> 00:28:28,132 And you can see some of them are kind of bouncing here, a bit stuck here. 364 00:28:28,132 --> 00:28:32,202 But this is kind of the emergence of a composition 365 00:28:32,202 --> 00:28:35,268 in a way that is fully procedural. 366 00:28:35,268 --> 00:28:39,506 It's actually emerging out of the behavior of these rectangles and 367 00:28:39,506 --> 00:28:43,508 we can actually also increase the number of entities, right. 368 00:28:43,508 --> 00:28:48,924 So I invite you to think of how these compositions that are written in 369 00:28:48,924 --> 00:28:55,387 a behavioral manner are the beginnings of a design practice that is using code and 370 00:28:55,387 --> 00:29:00,615 it's using algorithms such as these ones to construct different 371 00:29:00,615 --> 00:29:05,392 graphic templates, different forms of architecture. 372 00:29:05,392 --> 00:29:10,616 We're starting to deepen, these principles apply in different dimensions. 373 00:29:10,616 --> 00:29:13,254 So we're going to leave this video here and 374 00:29:13,254 --> 00:29:16,874 I'm going to continue on this week in the following one. 375 00:29:16,874 --> 00:29:18,546 I'll see you then.