Hi, welcome to this new video on
our wave function collapse series. We're reaching the end of this algorithm. We just need to add all
the different possibilities. And we're also going to start
transitioning to work with images. So there's not much to
explain graphically here. So we are going to be jumping straight
into the code and see how do we implement additional options to what we have and
also expand on using an image set. As always, we are going to continue working
with the project where we left off. So you haven't covered those videos,
by all means, start there. What I would like to do in this
video is expand this system that we have that has four possible tiles. I want to expand it to have the full
16 tiles so that the algorithm doesn't run out of possible solutions and
is able to kind of continue. And I would like to also expand. As you can see here, I've opened this
file is actually called week five, but your file probably
has a different name. Just locate the folder in
which you created this script. And I added this series of images which
are JPEGs that I created in Photoshop. I took a little bit of time and
actually named them accordingly, thinking of their compatibility, right? These are the 16 tiles that
we're going to be using. These tiles are provided so
you can use them from the folder. If you don't know how to use Photoshop, you can actually do them in
a piece of paper as well. The only important thing is that
it has a certain tile size. So as long as you can construct tiles
with this kind of naming convention, the script will work and you can actually
change graphically what they are doing. So we're going to be loading those tiles
in and replacing our visualization from something that just was kind of
visualizing the compatibility to something that could be our kind of graphic
representation of the full system, right? So these tiles need to be
here in order to be loaded. So let's start with,
how do we load those images, right? So we could say img_AAA = loadImage, and we're going to do "AAAA.jpg", and that's it, right? That's a way of loading one off the file,
right? I'm going to load the 16 ones. I'm going to type them in front of you. By all means, feel free to kind of jump
ahead in the video if you don't want to go through the tedium of
seeing me change these names. We have four here and this is something
that you can get wrong pretty easily. We have 4812. I think we have to go for 16. Let's start by changing
the naming convention here. Okay, so I have assigned the same
convention here to the left, to the right. So we have all of those images loaded,
right? So this is an interesting challenge. You could write a small algorithm
that would write this kind of naming convention, right, for you, right? So that's kind of an interesting approach. So let's just also, those images don't
really have a place at the moment, right? So what I would like to do is
that our tile offers us in the constructor something called my image,
right. So we could say now that self dot my image equals my image, right. So now the tile will require
an image to work, right? So we can actually provide this image at the end of this sequence, right? So here we're going to
do the same process. Basically this name AAAA refers to the compatibility that
particular tile will have. So I'm using a naming convention in
the JPEG in the image variable and also aligning that to
the dictionary definition so that we have everything matching and
we have a way of kind of verifying that we're not kind of having
files that might not work well, right? So we can go to the second one. So AAAA, BB, right? And like that we're going to be
doing each one of them, right? So I'm going to pause the video once more
because you probably don't want to see me expand this list for 16 tiles. So let's put a pause here. Okay, so I've basically gone
through all the possible tiles and all the possible combinations. You have the example file, so
you can copy paste this definition. I taken the time to just really go
through all the 16 different options and then having textures that are associated
to each one of those 16 tiles. And there's so many mistakes you can actually make
just by following this sequence up. Feel free to just copy paste
them from the example files. Or if you're expanding upon the system,
if you have an ABC, for instance, you might have to
just define that yourself. And that would be a much larger tile set,
for certain. But at this point, I think we
should have all the tiles we need. Let's try to run the system as it stands. We're not doing anything with the image so
yet, but we have 16 tiles with 16
different combinations. So let's see what we have. So you can see that
everything has 16 options. Only the tiles around it have 8. And you can see we have eight
options that are drawn here, right? So how can we switch
the visualization from a visualization that shows
us compatibility, right? Let's just do that one more time. Remember that this green rectangle is
kind of a diagram of compatibility. And at this point, I think if we
keep running the algorithm and pressing the buttons in
the keyboard quite quickly. We can actually see that the algorithm
is not running into the errors that we were seeing before because it
has tiles that would be able to meet the conditions that
the algorithm requires, right? And we should eventually see the algorithm
be able to resolve this whole tile. But I would like to do it with the image. So let's just go to the tile, and
we have a display function, right? Let's just draw an alternative
way of drawing the tiles, which is going to be
a display_image function. So just go here and call this, display_image, right? So the display_image should be
quite similar to the display. So self, x, y, cell_size, and entropy. Actually the entropy
might not even be needed, but yeah, we could skip that. But what I would like to do here is pushMatrix, popMatrix, and within that we're
going to say translate(x, y) and then draw the image, which is self.myImage, add the 0, 0 coordinate, cell_size, cell_size. And I think that should be it. So we are defining the size. It's actually a rather simple function. There's no kind of, it's basically
the same that this area here. But instead of doing the rectangle, we're doing the image and
we don't need the stroke, the fill, right, rather it's just simply drawing
the image instead of the rectangle. So that's great. We could actually now swap, there's two places in which we use
the display representation, right? Let's just copy paste the name
of display_image here. So if you remember, it's good that
you kind of take note of your code, but there's two places. One of them is the display_possibilities,
right? So in the display_possibilities
we're using this line. And I like leaving the arguments
between the display and the display_image the same because I could
just copy paste the arguments, right? I know that these are two parallel
forms of representation, right, or kind of, I'm going to comment out one
of them, which is the representation that uses the diagram to
the image representation, right? So that's one place. This is in the little pop up that shows
us the possibilities of the cell. The second place in which the image
representation happens is here in the display_grid, right? So the display_grid goes through
tile.display, tile.display_entropy, right? So if display,
if it's collapsed, right, and that's where we actually want to replace
it with the display_image option. And we're going to be doing
the same thing, right, Doing a mirror of that, so we can
comment out the diagram representation. You could do something kind of more
fancy where maybe you have some button within your system,
some variable that allows you to boolean switch between
the two modes of representation. By all means,
you can certainly do that on your own. I think that at this point in the course
you should be able to put that into place. But for now we're just going to leave
this first line that we drew as a diagram here commented out, so
we can actually see a representation. We're seeing a crash. Let's see what's going on with the error. Okay, so I found a small mistake,
actually a pretty big mistake, but it wasn't in the code itself. I was trying to load the images and for
some reason I was showing you this folder. This was not in fact the same folder. I looked at the location
of this script and this script was saved in a different
folder, and there was two copies of it. So I double check that all
the images were in fact now properly placed within the folder of
the script we're working in, right? So if the script is not able to load
the images, it's going to have obviously trouble and an error trying to load
them and visualizing them, right? So, but everything else remains the same. What we have here,
let's just look into this line. We're using the display_image
function here and the tile.display_image function,
which both of those are invoking the display_image function
we wrote in the tile, right? So with that in place, we can actually execute our algorithm now with the style set, right? So again, the interesting thing about
using the style set is that you can actually draw anything you want. You can do a much more complicated,
maybe graphic. As long as it has these
rules of compatibility, you can create those within the system. And we press here our
keyboard pretty quickly, we will see that the system actually
will resolve itself in a random form, but in a way that it's still
kind of quite consistent to the rule sets that we have
established in the tiles, right? So this is kind of almost
the conclusion of this algorithm. We're going to have one more final video
where we're going to discuss a wrap up. We're going to do a few kind of
modifications to the algorithm, so it's kind of a little bit more expressive
and discuss basically it's applications. But we have the algorithm working, we have a visualization of the next cell
that is going to be evaluating next, as well as a small pop up that displays what
are the possibilities of a cell, right? So we have a lot of interesting tools. And again,
I invite you to change the tileset and play with your own kind of
compatibility logic, right? So we're going to leave this video here. I'll see you in the last and final video. See you then.