Hi, welcome to this new video. We're going to continue looking a little
bit more closely to the a star algorithm. And really this is an algorithm that I
think requires a bit more of an intuition that maybe emerges by looking at its data,
really understanding how the data grows and almost doing like a bit of
a close reading of the algorithm. So we're going to create some graphic
functions to see some of the data in each cell and also start color coding some
of the way in which this data is displayed within the world. So let's just jump directly into the code
where we could actually start writing some of these functions. So this is where we left off. We have a very kind of low resolution
grid, but still I think that this is, what I mean by close reading is that,
well, the algorithm is running, we don't know how the calculation
actually performs. So we would actually reduce
even further the calculation or the size of this grid to like a 20 by 10,
because I would like to spend a bit of time
displaying some of the numbers. Remember that the calculation of
the a star requires the cost function, which we call g. How much have we grown in a path far? And also the distance function,
which is calculated by the. We call that, the H, right? And those together we call F. Right, which is the function that
ultimately determines which is the next cell to be evaluated. So let's just attempt. And we're going to go
into the tile here and we're going to create a function called, just after the run, let's just call it display data, right? So what I would like this function to do is to have some text, right? So let's just write,
for instance, the text. We're going to call it mytext and we're going to say that the g,
the value of g. Let's do an str convert to string
the internal value of g, right? So that's the text that we
want to print in a way or show within the cell, right? Sorry, we're going to do
a push matrix here and we're going to translate the position of this text to self position x. Let's just give it a little
bit of an offset in x. So it's not just right on the edge,
self.position.y. And in the case of y, we would give it, start giving it a self.size or cell size- 2. So the minus two would be a little
bit of an offset, but the cell size, I'm really trying to kind of draw within
the box, not on top of the box, right? So inside each cell, right? So I'm pushing the text all the way
down to the size of the cell and then minus two means that gets
a little bit of an offset of two. So the bottom left corner of the cell,
right? That's what I'm thinking with this
positioning of the text, right? And we're going to make sure
that the fill is black and the text function is going to be my text,
right? So we're going to use this and
the position 0.0 and pop matrix. We could just add here in the run
because we know that this function gets run every turn. So self.displaydata and we should be able to see the text appearing in every cell. Let's see what we get so far. So as you can see here, we can see the g. You can start seeing that we
start with 0 and as we calculate. Well, so here's an interesting
issue that we're facing because our stack,
the way we're drawing sequentially. I would like this text to appear
on top of the highlights. But because of the highlights are being
rendered on top of the display function, we're going to do something
a little bit inefficient. But it's just because this is
a function for just debugging or understanding we can do this. So let's just go here into our,
the way we're drawing, we're running the tiles and here's where
we're drawing this display function. So it's basically
the first one to be drawn. But what I would like
to do is basically how display this data on
top of everything else. So let's just copy the run
tiles function and call it something along
the lines of trot data. So we go through all the cells and
instead of calling the run function, we can call
the display data function. And now this function here, this is inefficient because we're going
through the loop of all cells twice or many times as we go through
all these visualization modes. So there's certainly work to be
done on the efficiency of this, but we can actually include this here
towards the end of it, draw the data so that we actually have it as
an overlay on the algorithm so that we can actually
see it when we run it. We can see the data on top of it. And you might think, well,
this font is actually quite small. Can we do something to improve that? I would like to understand and
see what we're doing here. So we have covered a little bit
of how to work with typography, but this is just for debugging purposes. So you can actually create a font, I'm going to say consolus bold 14 and with a size of 14, and then the text font being f, right? So if we do that at the beginning here, we should be able to
see a much larger g and graphically might not look very good. But I think that for
the understanding of the algorithm, it's important that we're starting to see,
okay, the cost function, right, the cost function, how it grows in
the cells that are being evaluated. Really, that computation
is starting to become more clear as we see
the computation being done, as we can create more traps for
the algorithm and we can detect why did it go in this
direction as opposed to that direction. G is not the whole story. We want to include some
other pieces of information. So let's do h now. So we're going to copy the same thing,
this chunk. I'm sure you can write this more
efficiently in a function, but for now we're just going to
make it very explicit. So if my text is h, right? Then let's make sure that we do the value of h is a distance, and it might be. So we can put h here,
converting to string, but this could have a lot of decimal places. So just in order to kind of
give a rough estimate of this, I'm going to convert it to an integer,
and we'll see if this works, if it has enough kind of capacity
to register the difference. So h, it's going to be the h
value as an integer, and then the position is going to be the same. Let's just push this
value a little bit up. We know that the font size is 14,
so 14 plus two of offset. We're going to do -16 and
then the next will remain the same. So let's see what we get here. So now we have h, and
let's do this same exercise again. Let's just draw some. So now we can actually start
understanding that the calculation of distance is some of the most prominent
way of calculating the equation. But eventually the cost of the path
starts playing a bigger and bigger role into the calculation. So we have this finally and
again, this is an invitation for you to really analyze the data
of the algorithm a bit further. We're going to do the f,
where we are going to do the same thing of making
an integer version of f. And here the distance will
be another 16 plus the 16. So we have -32 right. We probably could have removed like
the field, like one field for all of them. And you could make this
a little bit shorter, but yeah. So this is a matrix, hopefully, the data. Again, while not very graphic, might
be useful to really understand how this algorithm is calculating internally and
taking some decisions as it goes, right? So with this data visualization
of the algorithm in place, we're going to leave it here. I invite you to really
play with the algorithm, really kind of see what you can do. We're going to do a final video where
we're going to just do a slightly more aesthetic version of this, visualize
the data slightly different, and really discuss where this algorithm could be
applied in different contexts for design. So I'll see you then.