1 00:00:05,902 --> 00:00:09,550 Hi, welcome to this new video on our series of week 5. 2 00:00:09,550 --> 00:00:14,113 We are working through the wave function collapse project, and 3 00:00:14,113 --> 00:00:18,134 we have completed the first loop of the algorithm. 4 00:00:18,134 --> 00:00:22,316 We are at a point where we need to fix a few things and perhaps slow down and 5 00:00:22,316 --> 00:00:26,043 start visualizing a little bit more clearly what's going on. 6 00:00:26,043 --> 00:00:28,774 We're going to be doing this video, which is going to maybe not advance 7 00:00:28,774 --> 00:00:31,959 the algorithm itself, but we're going to just add some visualization tools. 8 00:00:31,959 --> 00:00:34,792 We're going to visualize the possibilities of a cell. 9 00:00:34,792 --> 00:00:38,304 So let's see the state we're in. 10 00:00:38,304 --> 00:00:43,365 We have a grid that has all the possible states of each cell. 11 00:00:43,365 --> 00:00:44,748 So I would like to know, 12 00:00:44,748 --> 00:00:49,250 especially when we're evaluating a cell that is going to be evaluated next with 13 00:00:49,250 --> 00:00:53,697 the kind of lowest entropy visualization that we just did in the past video. 14 00:00:53,697 --> 00:00:58,965 What are the possible states in which that cell could be, right? 15 00:00:58,965 --> 00:01:05,046 So as you can see here in this diagram, we have a little rectangle on the top right, 16 00:01:05,046 --> 00:01:08,502 that shows us graphically out of the tile set. 17 00:01:08,502 --> 00:01:13,064 The only two possible combinations that match that particular cell would be 18 00:01:13,064 --> 00:01:14,570 the ones drawn below it. 19 00:01:14,570 --> 00:01:19,148 So that visualization is precisely what we're going to be writing within our 20 00:01:19,148 --> 00:01:19,809 program. 21 00:01:19,809 --> 00:01:24,705 Just because we want to have the degree of control, to be able to see graphically 22 00:01:24,705 --> 00:01:29,456 how the data is being handled, and potentially use it as a form of debugging, 23 00:01:29,456 --> 00:01:34,364 as a way of understanding more deeply how the algorithm is functioning. 24 00:01:34,364 --> 00:01:38,817 And it's in fact some errors or something that we haven't accounted for 25 00:01:38,817 --> 00:01:44,292 that we don't understand, we can use this tool to further improve our understanding. 26 00:01:44,292 --> 00:01:47,748 So let's jump into the code and see how to write this. 27 00:01:47,748 --> 00:01:54,040 So again, we're continuing with where we left of Nasweek. 28 00:01:54,040 --> 00:01:57,592 The first thing that I would like to address is that you might have noticed 29 00:01:57,592 --> 00:01:59,049 when we ran this algorithm and 30 00:01:59,049 --> 00:02:01,979 remember that we're running it through our keyboard now. 31 00:02:01,979 --> 00:02:06,297 Every time we press the key, we execute a loop in the algorithm. 32 00:02:06,297 --> 00:02:08,879 But sometimes it crashes, 33 00:02:08,879 --> 00:02:14,610 because we know that we don't have all the cells available. 34 00:02:14,610 --> 00:02:19,166 So for instance, in this case, I only press the key once, but I have, in fact, 35 00:02:19,166 --> 00:02:21,281 two cells that have been collapsed. 36 00:02:21,281 --> 00:02:22,987 So what happened here, right? 37 00:02:22,987 --> 00:02:27,763 The first thing that we need to understand is that this visualization of 38 00:02:27,763 --> 00:02:32,955 the cell changes every time that there's only one possible option, right? 39 00:02:32,955 --> 00:02:37,315 So because we have a very small number of tiles, 40 00:02:37,315 --> 00:02:44,332 it's possible that there's only one tile that would match this tile here. 41 00:02:44,332 --> 00:02:49,080 So when we reduce the possibility space of the adjacent cell is not that we have 42 00:02:49,080 --> 00:02:53,917 collapsed this cell, but this cell ended up having only one possible option. 43 00:02:53,917 --> 00:02:58,145 Therefore, the current visualization that we're using is not going to put 44 00:02:58,145 --> 00:02:58,860 a one here. 45 00:02:58,860 --> 00:03:01,933 It's going to change that visualization for 46 00:03:01,933 --> 00:03:05,009 this graphic representation of the cell. 47 00:03:05,009 --> 00:03:07,968 So that cell is no longer going to be evaluated. 48 00:03:07,968 --> 00:03:12,228 So in one loop we ultimately collapsed two cells, right? 49 00:03:12,228 --> 00:03:17,203 Two cells ended up in states of only one possible option 50 00:03:17,203 --> 00:03:20,546 that is represented graphically. 51 00:03:20,546 --> 00:03:22,346 So it's not an error per se, but 52 00:03:22,346 --> 00:03:25,754 it's a behavior that we would like to understand better. 53 00:03:25,754 --> 00:03:30,802 It's something that might need that we actually understand that. 54 00:03:30,802 --> 00:03:33,076 What are the possible options that this cell has, right? 55 00:03:33,076 --> 00:03:38,612 So let's start drawing this function that we just discussed of visualizing 56 00:03:38,612 --> 00:03:43,810 the possibilities of a cell to kind of understand issues like this one. 57 00:03:43,810 --> 00:03:51,008 So we're going to be continuing to work on the environment tab. 58 00:03:51,008 --> 00:03:55,599 So what I would like to do is, let's just go to the run function, 59 00:03:55,599 --> 00:04:00,543 and write a little bit of the pseudo code of what we're going to do here. 60 00:04:00,543 --> 00:04:08,270 So here, we're going to write something that visualize, or display. 61 00:04:08,270 --> 00:04:11,625 Let's say, display, we have been using display. 62 00:04:11,625 --> 00:04:15,631 The possibilities, right? 63 00:04:15,631 --> 00:04:18,184 That's what we have to write. 64 00:04:18,184 --> 00:04:21,327 We are displaying the lowest entropy highlighter up here. 65 00:04:21,327 --> 00:04:25,752 So along those lines, we're going to be displaying the possibility. 66 00:04:25,752 --> 00:04:27,266 So let's write that function. 67 00:04:27,266 --> 00:04:30,401 We're going to go all the way to the bottom 68 00:04:30,401 --> 00:04:34,871 where we're actually writing our display functions. 69 00:04:34,871 --> 00:04:41,358 So let's define this function 70 00:04:41,358 --> 00:04:47,845 as display_possibilities, 71 00:04:47,845 --> 00:04:54,580 and use self, possibilities, 72 00:04:54,580 --> 00:05:00,819 offset_x, and offset_y. 73 00:05:00,819 --> 00:05:03,924 So what are these variables that we are giving as arguments? 74 00:05:03,924 --> 00:05:09,928 So the possibilities is going to refer all the possible 75 00:05:09,928 --> 00:05:14,439 tiles that are available to that cell. 76 00:05:14,439 --> 00:05:17,894 Basically, its entropy, and then, the offset. 77 00:05:17,894 --> 00:05:20,638 We want to make sure that this visualization is not on top of 78 00:05:20,638 --> 00:05:21,482 the cell itself. 79 00:05:21,482 --> 00:05:24,890 It's actually displaced a little bit to the left and the right, 80 00:05:24,890 --> 00:05:26,983 maybe kind of diagonally adjacent to. 81 00:05:26,983 --> 00:05:30,434 So we can actually manipulate those numbers a little bit. 82 00:05:30,434 --> 00:05:32,754 We want to have some control over that. 83 00:05:32,754 --> 00:05:36,274 So yeah, let's evaluate how we can do this. 84 00:05:36,274 --> 00:05:40,134 So let's start by defining tile size. 85 00:05:42,794 --> 00:05:44,154 We did this before. 86 00:05:44,154 --> 00:05:52,335 I think here it's the same calculation that we want. 87 00:05:52,335 --> 00:05:57,398 And the offset_x, it's going to 88 00:05:57,398 --> 00:06:04,529 be that number times the tile_size + 60. 89 00:06:04,529 --> 00:06:06,863 So here's where we're going to be doing the offset value. 90 00:06:06,863 --> 00:06:08,145 I mean, here, 91 00:06:08,145 --> 00:06:14,088 we're going to be passing the information of the cell position, right? 92 00:06:14,088 --> 00:06:15,854 Let's do that for y. 93 00:06:18,334 --> 00:06:27,054 That's going to be y times the tile_size- 60. 94 00:06:27,054 --> 00:06:32,057 So I'm using diagonally moving up 60 pixels, 95 00:06:32,057 --> 00:06:34,862 and right, 60 pixels. 96 00:06:34,862 --> 00:06:41,614 Let's just do a stroke that is white a fill. 97 00:06:41,614 --> 00:06:43,186 When I use a gray color here, 98 00:06:43,186 --> 00:06:47,894 you can actually change the graphic representation a little bit yourself. 99 00:06:47,894 --> 00:06:50,782 Obviously you can visualize it however you want. 100 00:06:50,782 --> 00:06:54,081 But I want to create a background that is not black so 101 00:06:54,081 --> 00:06:58,854 that doesn't get confused with the actual background of the cells. 102 00:06:58,854 --> 00:07:00,648 But it has some contrast of this black and white. 103 00:07:00,648 --> 00:07:06,656 So I'm going for a gray color here, 104 00:07:06,656 --> 00:07:09,667 and the x_size. 105 00:07:09,667 --> 00:07:13,272 So the size of this rectangle will change, right? 106 00:07:13,272 --> 00:07:15,114 It depends on how many possibilities we have. 107 00:07:15,114 --> 00:07:19,953 So let's just evaluate the length of 108 00:07:19,953 --> 00:07:24,800 possibilities times the tile size. 109 00:07:24,800 --> 00:07:27,876 So let's imagine that you have two possibilities. 110 00:07:27,876 --> 00:07:29,804 So you want to say, well, 111 00:07:29,804 --> 00:07:34,647 let's just multiply the number two times the tile size, right? 112 00:07:34,647 --> 00:07:39,522 Which is the size of a cell, and give it a little bit of an offset, so 113 00:07:39,522 --> 00:07:45,112 that each possibility has a little bit of a gap with each other possibility. 114 00:07:45,112 --> 00:07:50,447 So we're going to give tile_size + 10, so that there's a bit of an offset 115 00:07:50,447 --> 00:07:55,458 from each one of the cells, and then an extra 10 on the edge, right? 116 00:07:55,458 --> 00:07:59,493 So we're going to be giving probably 10 pixels on each side. 117 00:07:59,493 --> 00:08:05,350 So that would be the size of our rectangle 118 00:08:05,350 --> 00:08:09,657 that is going to be positioned at 119 00:08:09,657 --> 00:08:15,530 the coordinate 0, 0, 0, x_size. 120 00:08:15,530 --> 00:08:19,653 That's for the width of the rectangle. 121 00:08:19,653 --> 00:08:23,474 And let's do the height 60. 122 00:08:23,474 --> 00:08:26,063 But this 0 and 0, it's not the actual coordinate. 123 00:08:26,063 --> 00:08:28,571 We could do it with push and pop matrix, but 124 00:08:28,571 --> 00:08:31,370 this time we're going to just add the offset_x. 125 00:08:31,370 --> 00:08:37,195 I'm going to keep that 0 there, because we could put offset_x and offset_y. 126 00:08:37,195 --> 00:08:41,064 But here, I'm just going to make sure that we think of this offset 127 00:08:41,064 --> 00:08:43,360 as an addition to that coordinate. 128 00:08:43,360 --> 00:08:44,968 Okay, so we have that. 129 00:08:44,968 --> 00:08:47,280 Now, let's just visualize that. 130 00:08:47,280 --> 00:08:50,151 Let's see if this is actually, well, 131 00:08:50,151 --> 00:08:53,752 what we should have at this point is a rectangle. 132 00:08:53,752 --> 00:08:58,725 It's a gray rectangle that changes sizes depending on the number of possibilities 133 00:08:58,725 --> 00:08:59,704 that we have. 134 00:08:59,704 --> 00:09:04,298 And what we would like to do right now is actually draw each 135 00:09:04,298 --> 00:09:06,511 one of the possibilities. 136 00:09:06,511 --> 00:09:08,448 So what I would like to do for 137 00:09:08,448 --> 00:09:12,420 this is create a variable called x_position, right? 138 00:09:12,420 --> 00:09:19,312 Which is going to be 10 + the offset_x. 139 00:09:19,312 --> 00:09:21,991 And we're creating this variable because we're going to be looping through 140 00:09:21,991 --> 00:09:22,892 all the possibilities. 141 00:09:22,892 --> 00:09:28,724 Each time that we draw one instance of the possible kind of cell, 142 00:09:28,724 --> 00:09:32,397 we are going to add the offset for the next. 143 00:09:32,397 --> 00:09:37,328 So that's a way of dynamically be changing the x_pos of each one of those cells. 144 00:09:37,328 --> 00:09:40,877 So it's going to be 10 + the offset. 145 00:09:40,877 --> 00:09:42,218 And let's do a for loop here. 146 00:09:42,218 --> 00:09:46,111 So for p in possibilities, 147 00:09:46,111 --> 00:09:52,254 is that the way we spell possibilities? 148 00:09:52,254 --> 00:09:53,622 I think that's correct. 149 00:09:53,622 --> 00:09:54,514 Possibilities. 150 00:09:56,614 --> 00:09:59,254 So we're looping through the possibilities, right. 151 00:09:59,254 --> 00:10:04,102 And remember that this is, the possibilities are already tiles, right. 152 00:10:04,102 --> 00:10:06,288 So we have a function to display them. 153 00:10:06,288 --> 00:10:14,176 So p.display, and we could use x_pos for the x coordinate. 154 00:10:14,176 --> 00:10:18,594 The y could be a 10 + the y_offset. 155 00:10:20,574 --> 00:10:26,614 And then we can say the tile size. 156 00:10:26,614 --> 00:10:31,234 If you remember this function, this function, we're using the display function 157 00:10:31,234 --> 00:10:35,267 here that requires x and y, the cell size and an entropy number, right. 158 00:10:35,267 --> 00:10:39,182 So we could say x is going to be this dynamic position that keeps 159 00:10:39,182 --> 00:10:40,758 changing to the right. 160 00:10:40,758 --> 00:10:47,793 Y is fixed, 10 pixels up from the offset. 161 00:10:47,793 --> 00:10:52,297 The tile_size, it's going to be the size of that display. 162 00:10:52,297 --> 00:10:56,568 And then, given number 1 for entropy, which it's not going to be used in this 163 00:10:56,568 --> 00:10:59,523 case, because we're displaying the actual cell. 164 00:10:59,523 --> 00:11:03,117 But let's go with this for now. 165 00:11:03,117 --> 00:11:08,751 And then, at this point, we've drawn that option, so that cell. 166 00:11:08,751 --> 00:11:10,882 Let's update the new x_pos. 167 00:11:10,882 --> 00:11:15,087 So e_pos += tile_size. 168 00:11:15,087 --> 00:11:19,702 So that's, sorry, equals tile_size + 10, right? 169 00:11:19,702 --> 00:11:24,564 So what we're doing here is dynamically we draw one cell, 170 00:11:24,564 --> 00:11:28,644 ten units offset to the right on this rectangle. 171 00:11:28,644 --> 00:11:33,094 And then we kind of update this x_pos, 10 units, sorry, 172 00:11:33,094 --> 00:11:36,235 the size of that cell to the right + 10 for 173 00:11:36,235 --> 00:11:42,196 creating a little gap between each one of the cells that we're drawing, right? 174 00:11:42,196 --> 00:11:44,239 So that's the function. 175 00:11:44,239 --> 00:11:47,440 Let's see how it looks when we call it. 176 00:11:47,440 --> 00:11:52,854 So let's execute this function where we said up here, 177 00:11:52,854 --> 00:11:56,275 display possibilities, right? 178 00:11:56,275 --> 00:12:02,706 So let's just call this self.display possibilities. 179 00:12:02,706 --> 00:12:03,521 At this point, 180 00:12:03,521 --> 00:12:07,542 I would like to make sure that we have to provide the possibilities, right? 181 00:12:07,542 --> 00:12:12,316 Remember that the argument, if you go down here in the function, display 182 00:12:12,316 --> 00:12:17,173 possibilities requires the possibilities and the offset x and y, right? 183 00:12:17,173 --> 00:12:21,792 So we're going to do this function. 184 00:12:21,792 --> 00:12:26,817 So we need to calculate the possibilities. 185 00:12:26,817 --> 00:12:32,753 The possibilities are the self.cells. 186 00:12:32,753 --> 00:12:40,973 And the cells that we're evaluating is the next_cell_x, 187 00:12:40,973 --> 00:12:45,496 and the next_cell_y, right? 188 00:12:45,496 --> 00:12:47,770 So we're going to be using the next cell. 189 00:12:47,770 --> 00:12:51,778 We're not going to be using a visualization of all the possible cells. 190 00:12:51,778 --> 00:12:55,556 We're going to only be visualizing the next cell that we're going to be 191 00:12:55,556 --> 00:12:56,843 collapsing, right? 192 00:12:56,843 --> 00:12:59,166 Let's see all the possible states. 193 00:12:59,166 --> 00:13:01,707 It could be any. 194 00:13:01,707 --> 00:13:06,303 So from the cell, we're going to pick the index of the next cell, right? 195 00:13:06,303 --> 00:13:10,147 And that's going to become our main argument for the possibilities. 196 00:13:10,147 --> 00:13:16,324 And again, the offset_x and offset_y, which is going to be the coordinates 197 00:13:16,324 --> 00:13:21,354 it's going to base on the index of the next cell x and next cell y. 198 00:13:22,674 --> 00:13:23,922 That's all good. 199 00:13:23,922 --> 00:13:30,206 These two lines might end up in an error. 200 00:13:30,206 --> 00:13:35,037 So we're going to do an if statement 201 00:13:35,037 --> 00:13:40,384 here saying that if for some reason, 202 00:13:40,384 --> 00:13:46,474 this next cell x is not none and next cell. 203 00:13:46,474 --> 00:13:47,634 Yeah. 204 00:13:47,634 --> 00:13:52,754 Is not none, I would like to make sure that these 205 00:13:52,754 --> 00:14:00,234 two lines are only executed if those are not empty for some reason. 206 00:14:00,234 --> 00:14:03,707 I think that's something that could do happen through the loop and 207 00:14:03,707 --> 00:14:05,970 that would kind of crash our algorithm. 208 00:14:05,970 --> 00:14:07,894 So let's see what we have so far. 209 00:14:09,314 --> 00:14:13,838 Okay, so we have something funky going on here, but let's visualize what we, 210 00:14:13,838 --> 00:14:14,962 what we have here. 211 00:14:14,962 --> 00:14:17,586 So we created a gray rectangle. 212 00:14:17,586 --> 00:14:24,374 So that's good that it's offset from the next cell, which is highlighted here. 213 00:14:26,274 --> 00:14:30,978 And it should have drawn two cells, but it drew this one and 214 00:14:30,978 --> 00:14:33,289 something somewhere else. 215 00:14:33,289 --> 00:14:35,127 So we have a kind of a graphic, 216 00:14:35,127 --> 00:14:38,376 some coordinate issue we're going to fix in a minute. 217 00:14:38,376 --> 00:14:41,306 But let's go and find that mistake. 218 00:14:41,306 --> 00:14:42,604 Let's see. 219 00:14:42,604 --> 00:14:43,859 Okay, I see the problem. 220 00:14:43,859 --> 00:14:48,812 So when we update the position here p display, 221 00:14:48,812 --> 00:14:57,333 we have the first tile positioned correctly based on this coordinate, right? 222 00:14:57,333 --> 00:14:59,696 But the second one shouldn't be equal. 223 00:14:59,696 --> 00:15:01,964 We should say plus equal, right? 224 00:15:01,964 --> 00:15:05,649 Because we want to make it in reference to what we have. 225 00:15:05,649 --> 00:15:12,098 Let's add a little bit to that so that we keep the. 226 00:15:12,098 --> 00:15:12,771 There we go. 227 00:15:12,771 --> 00:15:18,834 So you can see that the second tile is drawn with a slight offset, 228 00:15:18,834 --> 00:15:23,908 but then within this kind of gray rectangle, right? 229 00:15:23,908 --> 00:15:25,184 So there's two options. 230 00:15:25,184 --> 00:15:26,832 We should have two cells. 231 00:15:26,832 --> 00:15:27,464 Two options. 232 00:15:27,464 --> 00:15:32,412 We should have two cells and so forth, right? 233 00:15:32,412 --> 00:15:36,050 Let's just do a quick test here. 234 00:15:36,050 --> 00:15:40,664 I'm going to add a few more tiles. 235 00:15:40,664 --> 00:15:43,049 Doesn't matter if we copy-paste, I think. 236 00:15:43,049 --> 00:15:44,756 Let's just do a few more. 237 00:15:44,756 --> 00:15:45,868 I'm going to remove them in a minute. 238 00:15:45,868 --> 00:15:49,954 But I just wanted to make sure that this rectangle is 239 00:15:49,954 --> 00:15:52,910 visualizing more options, right? 240 00:15:52,910 --> 00:15:57,338 So right now, we have a tile set that has more variations. 241 00:15:57,338 --> 00:15:59,962 This entropy is actually a number 4, not a number 2. 242 00:15:59,962 --> 00:16:04,704 So the, the size of the rectangle has changed size. 243 00:16:04,704 --> 00:16:09,104 And the drawing of all the possible tiles that are, in fact, compatible with this. 244 00:16:09,104 --> 00:16:13,811 You see that all the tiles that we have within this group have the lower 245 00:16:13,811 --> 00:16:17,672 connector, red, and the upper connector here is red. 246 00:16:17,672 --> 00:16:18,728 So they're compatible. 247 00:16:18,728 --> 00:16:20,450 So all of those should be compatible. 248 00:16:20,450 --> 00:16:25,260 These are ways to making sure that our compatibility, the way we're kind of 249 00:16:25,260 --> 00:16:29,407 reducing the possibility space of a cell, is in fact correct,. 250 00:16:29,407 --> 00:16:33,348 That the calculations are moving forward without any errors. 251 00:16:33,348 --> 00:16:38,522 And as we are moving along, we can continue 252 00:16:38,522 --> 00:16:43,565 visualizing what the cell could become. 253 00:16:43,565 --> 00:16:46,601 We're going to be picking one of those four options for 254 00:16:46,601 --> 00:16:50,724 the collapsing of the cell in the next loop until we crash the system. 255 00:16:50,724 --> 00:16:52,799 So let's just leave it here. 256 00:16:52,799 --> 00:16:57,203 We're going to be addressing this idea of expanding the number of tiles that we're 257 00:16:57,203 --> 00:16:58,118 going to be using. 258 00:16:58,118 --> 00:17:02,085 We're going to also be introducing how we work with textures so 259 00:17:02,085 --> 00:17:06,442 that we're not constrained with something that we can draw within 260 00:17:06,442 --> 00:17:09,033 the coordinate system of processing. 261 00:17:09,033 --> 00:17:13,589 But rather, we could actually use textures as well to do some kind of more 262 00:17:13,589 --> 00:17:16,963 interesting graphic representation of the system. 263 00:17:16,963 --> 00:17:18,780 So we're going to be looking at that in the next video. 264 00:17:18,780 --> 00:17:19,280 I'll see you then.