1
00:00:05,912 --> 00:00:10,334
Hi, welcome to this new video on
our wave function collapse series.

2
00:00:10,334 --> 00:00:13,414
We're reaching the end of this algorithm.

3
00:00:13,414 --> 00:00:16,807
We just need to add all
the different possibilities.

4
00:00:16,807 --> 00:00:19,502
And we're also going to start
transitioning to work with images.

5
00:00:19,502 --> 00:00:23,006
So there's not much to
explain graphically here.

6
00:00:23,006 --> 00:00:28,749
So we are going to be jumping straight
into the code and see how do we implement

7
00:00:28,749 --> 00:00:34,674
additional options to what we have and
also expand on using an image set.

8
00:00:34,674 --> 00:00:35,371
As always,

9
00:00:35,371 --> 00:00:39,360
we are going to continue working
with the project where we left off.

10
00:00:39,360 --> 00:00:42,614
So you haven't covered those videos,
by all means, start there.

11
00:00:43,874 --> 00:00:48,750
What I would like to do in this
video is expand this system that we

12
00:00:48,750 --> 00:00:51,554
have that has four possible tiles.

13
00:00:51,554 --> 00:00:55,992
I want to expand it to have the full
16 tiles so that the algorithm

14
00:00:55,992 --> 00:01:01,016
doesn't run out of possible solutions and
is able to kind of continue.

15
00:01:01,016 --> 00:01:03,184
And I would like to also expand.

16
00:01:03,184 --> 00:01:08,124
As you can see here, I've opened this
file is actually called week five,

17
00:01:08,124 --> 00:01:11,192
but your file probably
has a different name.

18
00:01:11,192 --> 00:01:17,304
Just locate the folder in
which you created this script.

19
00:01:17,304 --> 00:01:24,864
And I added this series of images which
are JPEGs that I created in Photoshop.

20
00:01:26,404 --> 00:01:29,945
I took a little bit of time and
actually named them accordingly,

21
00:01:29,945 --> 00:01:32,384
thinking of their compatibility, right?

22
00:01:32,384 --> 00:01:36,044
These are the 16 tiles that
we're going to be using.

23
00:01:36,044 --> 00:01:39,292
These tiles are provided so
you can use them from the folder.

24
00:01:39,292 --> 00:01:41,187
If you don't know how to use Photoshop,

25
00:01:41,187 --> 00:01:43,620
you can actually do them in
a piece of paper as well.

26
00:01:43,620 --> 00:01:47,420
The only important thing is that
it has a certain tile size.

27
00:01:47,420 --> 00:01:52,879
So as long as you can construct tiles
with this kind of naming convention,

28
00:01:52,879 --> 00:01:58,974
the script will work and you can actually
change graphically what they are doing.

29
00:02:00,434 --> 00:02:04,726
So we're going to be loading those tiles
in and replacing our visualization from

30
00:02:04,726 --> 00:02:08,890
something that just was kind of
visualizing the compatibility to something

31
00:02:08,890 --> 00:02:13,854
that could be our kind of graphic
representation of the full system, right?

32
00:02:13,854 --> 00:02:16,598
So these tiles need to be
here in order to be loaded.

33
00:02:16,598 --> 00:02:21,289
So let's start with,
how do we load those images, right?

34
00:02:21,289 --> 00:02:28,452
So we could say img_AAA = loadImage,

35
00:02:28,452 --> 00:02:35,181
and we're going to do "AAAA.jpg",

36
00:02:35,181 --> 00:02:39,942
and that's it, right?

37
00:02:39,942 --> 00:02:43,934
That's a way of loading one off the file,
right?

38
00:02:43,934 --> 00:02:45,886
I'm going to load the 16 ones.

39
00:02:45,886 --> 00:02:47,518
I'm going to type them in front of you.

40
00:02:47,518 --> 00:02:52,382
By all means, feel free to kind of jump
ahead in the video if you don't want to

41
00:02:52,382 --> 00:02:56,654
go through the tedium of
seeing me change these names.

42
00:02:56,654 --> 00:03:01,702
We have four here and this is something
that you can get wrong pretty easily.

43
00:03:01,702 --> 00:03:06,504
We have 4812.

44
00:03:06,504 --> 00:03:09,904
I think we have to go for 16.

45
00:03:09,904 --> 00:03:12,874
Let's start by changing
the naming convention here.

46
00:03:35,364 --> 00:03:42,516
Okay, so I have assigned the same
convention here to the left, to the right.

47
00:03:42,516 --> 00:03:45,172
So we have all of those images loaded,
right?

48
00:03:45,172 --> 00:03:47,268
So this is an interesting challenge.

49
00:03:47,268 --> 00:03:50,129
You could write a small algorithm
that would write this kind of

50
00:03:50,129 --> 00:03:52,372
naming convention, right, for you, right?

51
00:03:52,372 --> 00:03:54,172
So that's kind of an interesting approach.

52
00:03:54,172 --> 00:04:01,248
So let's just also, those images don't
really have a place at the moment, right?

53
00:04:01,248 --> 00:04:07,469
So what I would like to do is
that our tile offers us in

54
00:04:07,469 --> 00:04:14,304
the constructor something called my image,
right.

55
00:04:14,304 --> 00:04:19,416
So we could say now that self dot my

56
00:04:19,416 --> 00:04:24,488
image equals my image, right.

57
00:04:24,488 --> 00:04:33,184
So now the tile will require
an image to work, right?

58
00:04:33,184 --> 00:04:38,464
So we can actually provide this image

59
00:04:38,464 --> 00:04:43,888
at the end of this sequence, right?

60
00:04:43,888 --> 00:04:49,704
So here we're going to
do the same process.

61
00:04:49,704 --> 00:04:52,973
Basically this name AAAA refers to

62
00:04:52,973 --> 00:04:58,026
the compatibility that
particular tile will have.

63
00:04:58,026 --> 00:05:04,145
So I'm using a naming convention in
the JPEG in the image variable and

64
00:05:04,145 --> 00:05:08,683
also aligning that to
the dictionary definition so

65
00:05:08,683 --> 00:05:13,852
that we have everything matching and
we have a way of kind of

66
00:05:13,852 --> 00:05:21,176
verifying that we're not kind of having
files that might not work well, right?

67
00:05:21,176 --> 00:05:24,126
So we can go to the second one.

68
00:05:27,464 --> 00:05:31,804
So AAAA, BB, right?

69
00:05:33,424 --> 00:05:36,808
And like that we're going to be
doing each one of them, right?

70
00:05:36,808 --> 00:05:41,101
So I'm going to pause the video once more
because you probably don't want to see me

71
00:05:41,101 --> 00:05:42,960
expand this list for 16 tiles.

72
00:05:42,960 --> 00:05:44,320
So let's put a pause here.

73
00:05:44,320 --> 00:05:49,394
Okay, so I've basically gone
through all the possible tiles and

74
00:05:49,394 --> 00:05:52,170
all the possible combinations.

75
00:05:52,170 --> 00:05:57,454
You have the example file, so
you can copy paste this definition.

76
00:05:58,634 --> 00:06:03,422
I taken the time to just really go
through all the 16 different options and

77
00:06:03,422 --> 00:06:08,994
then having textures that are associated
to each one of those 16 tiles.

78
00:06:08,994 --> 00:06:09,726
And there's so

79
00:06:09,726 --> 00:06:13,174
many mistakes you can actually make
just by following this sequence up.

80
00:06:14,454 --> 00:06:17,670
Feel free to just copy paste
them from the example files.

81
00:06:17,670 --> 00:06:22,003
Or if you're expanding upon the system,
if you have an ABC, for

82
00:06:22,003 --> 00:06:25,942
instance, you might have to
just define that yourself.

83
00:06:25,942 --> 00:06:29,470
And that would be a much larger tile set,
for certain.

84
00:06:29,470 --> 00:06:33,598
But at this point, I think we
should have all the tiles we need.

85
00:06:33,598 --> 00:06:36,494
Let's try to run the system as it stands.

86
00:06:36,494 --> 00:06:39,429
We're not doing anything with the image so
yet, but

87
00:06:39,429 --> 00:06:42,556
we have 16 tiles with 16
different combinations.

88
00:06:42,556 --> 00:06:45,324
So let's see what we have.

89
00:06:45,324 --> 00:06:48,452
So you can see that
everything has 16 options.

90
00:06:48,452 --> 00:06:53,464
Only the tiles around it have 8.

91
00:06:54,564 --> 00:06:59,988
And you can see we have eight
options that are drawn here, right?

92
00:06:59,988 --> 00:07:03,929
So how can we switch
the visualization from

93
00:07:03,929 --> 00:07:09,082
a visualization that shows
us compatibility, right?

94
00:07:09,082 --> 00:07:10,686
Let's just do that one more time.

95
00:07:10,686 --> 00:07:15,294
Remember that this green rectangle is
kind of a diagram of compatibility.

96
00:07:15,294 --> 00:07:19,698
And at this point, I think if we
keep running the algorithm and

97
00:07:19,698 --> 00:07:23,525
pressing the buttons in
the keyboard quite quickly.

98
00:07:23,525 --> 00:07:28,225
We can actually see that the algorithm
is not running into the errors

99
00:07:28,225 --> 00:07:33,173
that we were seeing before because it
has tiles that would be able to meet

100
00:07:33,173 --> 00:07:36,984
the conditions that
the algorithm requires, right?

101
00:07:38,684 --> 00:07:46,699
And we should eventually see the algorithm
be able to resolve this whole tile.

102
00:07:48,364 --> 00:07:51,692
But I would like to do it with the image.

103
00:07:51,692 --> 00:07:56,444
So let's just go to the tile, and
we have a display function, right?

104
00:07:56,444 --> 00:07:59,535
Let's just draw an alternative
way of drawing the tiles,

105
00:07:59,535 --> 00:08:02,124
which is going to be
a display_image function.

106
00:08:02,124 --> 00:08:07,037
So just go here and

107
00:08:07,037 --> 00:08:10,316
call this,

108
00:08:14,133 --> 00:08:17,316
display_image, right?

109
00:08:17,316 --> 00:08:22,444
So the display_image should be
quite similar to the display.

110
00:08:22,444 --> 00:08:25,251
So self, x, y,

111
00:08:25,251 --> 00:08:30,074
cell_size, and entropy.

112
00:08:31,854 --> 00:08:36,558
Actually the entropy
might not even be needed,

113
00:08:36,558 --> 00:08:39,718
but yeah, we could skip that.

114
00:08:39,718 --> 00:08:44,434
But what I would like to do here is

115
00:08:44,434 --> 00:08:48,977
pushMatrix, popMatrix, and

116
00:08:48,977 --> 00:08:55,619
within that we're
going to say translate(x,

117
00:08:55,619 --> 00:08:59,812
y) and then draw the image,

118
00:08:59,812 --> 00:09:05,402
which is self.myImage, add the 0,

119
00:09:05,402 --> 00:09:12,064
0 coordinate, cell_size, cell_size.

120
00:09:16,364 --> 00:09:18,156
And I think that should be it.

121
00:09:18,156 --> 00:09:19,980
So we are defining the size.

122
00:09:19,980 --> 00:09:22,276
It's actually a rather simple function.

123
00:09:22,276 --> 00:09:26,568
There's no kind of, it's basically
the same that this area here.

124
00:09:26,568 --> 00:09:28,346
But instead of doing the rectangle,

125
00:09:28,346 --> 00:09:31,841
we're doing the image and
we don't need the stroke, the fill, right,

126
00:09:31,841 --> 00:09:35,244
rather it's just simply drawing
the image instead of the rectangle.

127
00:09:36,944 --> 00:09:37,872
So that's great.

128
00:09:37,872 --> 00:09:39,912
We could actually now swap,

129
00:09:39,912 --> 00:09:45,368
there's two places in which we use
the display representation, right?

130
00:09:45,368 --> 00:09:48,184
Let's just copy paste the name
of display_image here.

131
00:09:48,184 --> 00:09:52,992
So if you remember, it's good that
you kind of take note of your code,

132
00:09:52,992 --> 00:09:55,094
but there's two places.

133
00:09:55,094 --> 00:09:58,734
One of them is the display_possibilities,
right?

134
00:09:58,734 --> 00:10:02,542
So in the display_possibilities
we're using this line.

135
00:10:02,542 --> 00:10:07,624
And I like leaving the arguments
between the display and

136
00:10:07,624 --> 00:10:15,366
the display_image the same because I could
just copy paste the arguments, right?

137
00:10:15,366 --> 00:10:20,562
I know that these are two parallel
forms of representation, right,

138
00:10:20,562 --> 00:10:26,295
or kind of, I'm going to comment out one
of them, which is the representation

139
00:10:26,295 --> 00:10:30,884
that uses the diagram to
the image representation, right?

140
00:10:32,144 --> 00:10:33,896
So that's one place.

141
00:10:33,896 --> 00:10:37,808
This is in the little pop up that shows
us the possibilities of the cell.

142
00:10:37,808 --> 00:10:41,787
The second place in which the image
representation happens is here in

143
00:10:41,787 --> 00:10:43,509
the display_grid, right?

144
00:10:43,509 --> 00:10:50,239
So the display_grid goes through
tile.display, tile.display_entropy, right?

145
00:10:50,239 --> 00:10:54,628
So if display,
if it's collapsed, right, and

146
00:10:54,628 --> 00:11:02,364
that's where we actually want to replace
it with the display_image option.

147
00:11:02,364 --> 00:11:05,821
And we're going to be doing
the same thing, right,

148
00:11:07,898 --> 00:11:14,944
Doing a mirror of that, so we can
comment out the diagram representation.

149
00:11:14,944 --> 00:11:19,429
You could do something kind of more
fancy where maybe you have some button

150
00:11:19,429 --> 00:11:22,370
within your system,
some variable that allows

151
00:11:22,370 --> 00:11:26,552
you to boolean switch between
the two modes of representation.

152
00:11:26,552 --> 00:11:29,360
By all means,
you can certainly do that on your own.

153
00:11:29,360 --> 00:11:34,224
I think that at this point in the course
you should be able to put that into place.

154
00:11:34,224 --> 00:11:39,147
But for now we're just going to leave
this first line that we drew as

155
00:11:39,147 --> 00:11:44,764
a diagram here commented out, so
we can actually see a representation.

156
00:11:44,764 --> 00:11:45,716
We're seeing a crash.

157
00:11:45,716 --> 00:11:48,836
Let's see what's going on with the error.

158
00:11:48,836 --> 00:11:53,721
Okay, so I found a small mistake,
actually a pretty big mistake,

159
00:11:53,721 --> 00:11:56,924
but it wasn't in the code itself.

160
00:11:56,924 --> 00:12:02,492
I was trying to load the images and for
some reason I was showing you this folder.

161
00:12:02,492 --> 00:12:05,196
This was not in fact the same folder.

162
00:12:05,196 --> 00:12:07,392
I looked at the location
of this script and

163
00:12:07,392 --> 00:12:11,438
this script was saved in a different
folder, and there was two copies of it.

164
00:12:11,438 --> 00:12:16,094
So I double check that all
the images were in fact now properly

165
00:12:16,094 --> 00:12:21,225
placed within the folder of
the script we're working in, right?

166
00:12:21,225 --> 00:12:26,123
So if the script is not able to load
the images, it's going to have obviously

167
00:12:26,123 --> 00:12:31,254
trouble and an error trying to load
them and visualizing them, right?

168
00:12:31,254 --> 00:12:33,790
So, but everything else remains the same.

169
00:12:33,790 --> 00:12:37,302
What we have here,
let's just look into this line.

170
00:12:37,302 --> 00:12:41,307
We're using the display_image
function here and

171
00:12:41,307 --> 00:12:46,895
the tile.display_image function,
which both of those are invoking

172
00:12:46,895 --> 00:12:52,144
the display_image function
we wrote in the tile, right?

173
00:12:52,144 --> 00:12:55,412
So with that in place,

174
00:12:55,412 --> 00:13:00,919
we can actually execute our algorithm

175
00:13:00,919 --> 00:13:05,575
now with the style set, right?

176
00:13:05,575 --> 00:13:09,266
So again, the interesting thing about
using the style set is that you can

177
00:13:09,266 --> 00:13:11,168
actually draw anything you want.

178
00:13:11,168 --> 00:13:16,124
You can do a much more complicated,
maybe graphic.

179
00:13:17,464 --> 00:13:20,516
As long as it has these
rules of compatibility,

180
00:13:20,516 --> 00:13:23,864
you can create those within the system.

181
00:13:23,864 --> 00:13:27,932
And we press here our
keyboard pretty quickly,

182
00:13:27,932 --> 00:13:34,236
we will see that the system actually
will resolve itself in a random form,

183
00:13:34,236 --> 00:13:38,915
but in a way that it's still
kind of quite consistent to

184
00:13:38,915 --> 00:13:44,124
the rule sets that we have
established in the tiles, right?

185
00:13:45,464 --> 00:13:49,760
So this is kind of almost
the conclusion of this algorithm.

186
00:13:49,760 --> 00:13:53,608
We're going to have one more final video
where we're going to discuss a wrap up.

187
00:13:53,608 --> 00:13:57,344
We're going to do a few kind of
modifications to the algorithm, so

188
00:13:57,344 --> 00:14:03,094
it's kind of a little bit more expressive
and discuss basically it's applications.

189
00:14:03,094 --> 00:14:05,427
But we have the algorithm working,

190
00:14:05,427 --> 00:14:10,402
we have a visualization of the next cell
that is going to be evaluating next, as

191
00:14:10,402 --> 00:14:16,014
well as a small pop up that displays what
are the possibilities of a cell, right?

192
00:14:16,014 --> 00:14:17,994
So we have a lot of interesting tools.

193
00:14:19,174 --> 00:14:22,110
And again,
I invite you to change the tileset and

194
00:14:22,110 --> 00:14:25,934
play with your own kind of
compatibility logic, right?

195
00:14:25,934 --> 00:14:27,382
So we're going to leave this video here.

196
00:14:27,382 --> 00:14:29,526
I'll see you in the last and final video.

197
00:14:29,526 --> 00:14:30,026
See you then.