Hi, welcome to this third
video of this series. We are working within the project for
the wave function collapse algorithm and we are going to start talking
about tile compatibility. So, what do we mean by tile compatibility? We going to be using this idea that
tiles can be connected, right? That's why we're drawing them with this
particular kind of very simple graphic reference, but you could actually use
any other kind of style of graphic. But what we want is to represent that
certain tiles connect to one another, and some other tiles do not connect, right? So, we're going to be using color
here to present graphically a sense of compatibility between tiles. What you can see on the right, it's all the possible tiles that we might
have where all the connections, top, bottom, left and
right would be the white or black. And if we can go through the natural
conclusion of all the possible states of the tile,
we'd end up with 16 possible tiles. So if we have a tile like the one that you
can see in the middle and we would like to connect its right connection to some
tiles, we would evaluate the tileset and we would determine that it's, in fact,
there's four possible valid connections. Any tile that it's left side is white,
would in fact connect correctly. There's other tiles that its
left side will be black, so therefore we exclude those tiles. So that changes the possibility space. This tile towards its right, its adjacent neighbor to the right
can be only eight possible states. That's based on this
rule of compatibility. Let's evaluate that same tile,
in its lower connection, right? The lower connection in this case will
also be eight possible connections, but it would be eight different tiles. So if we're looking at
the adjacency on the bottom, every tile which it's top has this white
connectivity will in fact be compatible. So how will we write code for our tiles to
represent formally and within code that something that we could actually use quite
easily, this information of compatibility? What we're going to be doing,
it's a dictionary, right? So we're going to be doing a dictionary
that has pre-written adjacency. So top, bottom, left, and right. And we're going to be determining
that those could be in some possible states, right. We're going to be using
words here like a and b. If you wanted to have a tile that has more
possible maybe colors or kind of logics of connectivity, you could say A, B, C,
D, but we're going to keep it simple. So a square tile has four possible
connections, top, bottom, left and right. And we're going to be
switching between A and B as representing A will be black and
B will be white. In the graphic representation of the tile,
we're going to also do a representation that it doesn't require a texture because
later down the line we're going to learn how to use a texture and draw our own
textures and use those into the system, which will give us a lot
of creative freedom. But within our system currently, we want to draw that compatibility
with maybe these kind of rectangles. The red will represent B and
the green will represent A. And as you can see, as each one of these
tiles would be a representation of different compatibility, we want to have
some graphic representation of them. So let's jump into the code and see how we can actually start
using these dictionaries to define how each tile will have different
compatibility with other tiles. So here we are. I'm continuing where we left
off from the last video. Basically, I'm working
within the set environment. Right now we have a grid where every cell
can be in four possible states, right? Let's just go to the tile. And the first thing we want to do,
if you could see up here, we had used some kind of
placeholder information. We're not really using
this information at all. So let's just change this for edges. And edges is going to be our dictionary. Let's just add this to the constructor. So edges. And here we could say that
edges equals edges, right? So edges is going to be, let's remind ourselves this
is going to be a dictionary. Dictionary, right, with the keywords will be top, bottom, right, left and right. Something like that. Just as a reminder, these are going to
be the keywords of our dictionary. So now, let's save that. And if we would like to run the script,
we're going to run into an error because once we initiate our tiles here,
when we create our tiles, we need to provide an argument,
which is our dictionary, right? So let's just write a dictionary here. Because we want each tile to be different,
let's just write it in line, right? So let's just open a curly braces and
say top, right? This is going to be,
let's just give it a B for now, right? So that's going to be the first
entry of the dictionary. The second one will be bottom. This is going to be also a B. Let's go with left. That will be A. So yeah, take your time here because it
certainly couldn't be confusing sometimes to write these dictionaries correctly. And that would be a two, right? And at this point we can
close the dictionary, right? So let's see what we have. We have top B, bottom B,
left A, right A, right, and that's the end of that dictionary. We could copy paste it For each one of our tiles so that we could actually change it, right? And as you can see here, we could say,
well, the next tile would have a compatibility of A,
here this is going to be an AA, BA. All of them will have the same keywords,
right, AA BA. And this one will have AA BB. And as you can see,
we're actually using only not all the 16 possible
combinations between these. So AB, AB. There we go. So, we could write all
the possible combinations and we're going to be doing
that in a bit of time. But for now we want to just be able to
check that we have a way of representing the compatibility system. So right now, because the way
we're displaying the information, there's four possible states, we are not
in fact drawing the actual tile. So let's just comment out three of them. So let's imagine that now all tiles
have only a singular option, right? Therefore, we're going to be triggering
this part of the equation, right? So let's see what we get here. So it's working. It's actually not creating the text. So it's actually switching the function
that we're using to draw it, right? So instead of drawing
the entropy which has the text, we actually go in this function display. Okay, great. So, let's just add to that function. Let's add to the function display here, some information that would allow us
to see that compatibility, right? So we're going to do those
little rectangles, green or red for each cell based on its
compatibility logic, right? So what I would like to do first of all
is write a very small function down here. Let's call that a color by edge. And it's going to be a self. And I'm going to use
a variable called which, you're going to see in a minute
how we're going to use that. So we're going to say which edge
if I give you the top, right, which edge am I evaluating? If I give you a top, then give me a color. Let's say green or red,
depending if that matches A or B, right? So let's say if self.edge, which, right, because we're going to be asking the dictionary, are you the top? If the top is an A. If we check our an A, then return the color red. This is a very first kind of
way of starting to check if the information of this adjacency or
this compatibility and we can use some color to visualize it. If we're going to say here
if the same equation, but if it's in fact B,
give me a different color. So let's return that,
in this case let's move that to green. Rg, red, green, right? And finally, let's just do for
good measure and else return back, right? Turn the colors zero, right? So we have a way of quickly switching
the colors based on the dictionary, right? So now we have that function. Let's just alter our display
function using this new function that we have available. So, let's imagine that we've
already done the rectangle, which is going to
represent the background. Here what we're going to be doing
is transition to a no stroke, and switch also to rect, mode, center, because it's going to be
easier to locate these rectangles that we're going to
draw by their center. So we're going to say that the field,
the color of this rectangle, it's going to be using our function,
right? Self.color by edge, right? And we're going to evaluate the top edge. That's going to be the color, right? So we're going to be doing that for
each one of these edges, and let's do a rectangle here. And this actually,
when I wrote it the first time, it took me a little bit of
time to figure out, but what we want to do is a small rectangle
that it's positioned within the cell. In this case,
we're thinking on the top most corner. So, bear with me here. The equation that I came up with is cell size divided by two here, that's the x zero plus cell size, divided by ten and comma cell size, divided by five twice. Let's look at what we have
with only a single one. I think that could work. Let's see why we're getting an error here. Okay, so that's working. So what are we having here? Let's see this in detail. What we're creating is a little
rectangle on the top edge, right? And we are saying, make it green or
red based on this function here, if it's B, it's going to be green, right? So let's just go into the environment and
see, okay? In fact, top, it's B. So if you want it to be red,
we could put an A there, right? Let's see. So the same rectangle on the top
is showing us that B or A, right? So we like B, fine, right? So, it's a graphic representation
of the compatibility, right? So, this one, we need to do
four little rectangles based on the diagram that we saw on the slides,
right? So we can copy that. That's three and one more, right? So one would be for the bottom,
another one would be for the left, another one would be for
the right. The only difference would be,
some of these locations will change. So if we go to the bottom, the y
coordinate would be, in fact, cell size. Let's see. It would be cell size minus cell
size divided by ten, right? And everything else remains the same. Let's just check one by one, and
I'm going to comment these ones out. Let's check if that second one,
the bottom one works. We have two, the top and
bottom working correctly. Let's just do the two missing ones. So let's evaluate this one. So we're going to do cell size divided by, in this case, 10 in x and 2 in y. That should give us the left side. Okay, that's good. And then the right side, we're going to do as we did in the y here, cell size minus cell size divided by ten, and then cell size divided by
two in this direction, right? Okay, so basically we have
all the possible sides or the edges represented with this kind
of little rectangle to identify. If you find a better
visualization of compatibility, by all means, you can draw that. But this is kind of
a simple representation. Two colors for A and B, and a simple rectangle that would be
on each side of the cell, right? If the cell has more than
one single option, right, so it hasn't been collapsed yet,
we will represent its numbers, right? So we have two functions,
one that represents its entropy, and another one that represents
its collapsed state. So with this, we're wrapping
up this compatibility video. The representation of the collapsed state
is something that we're going to be moving towards as we learn about
how do we collapse a cell? And we're going to have
a visualization for that. So I'll see you in the next video.