1
00:00:06,861 --> 00:00:08,606
Hi, welcome to this new video.

2
00:00:08,606 --> 00:00:13,934
We're going to continue looking a little
bit more closely to the a star algorithm.

3
00:00:13,934 --> 00:00:18,403
And really this is an algorithm that I
think requires a bit more of an intuition

4
00:00:18,403 --> 00:00:23,218
that maybe emerges by looking at its data,
really understanding how the data grows

5
00:00:23,218 --> 00:00:26,974
and almost doing like a bit of
a close reading of the algorithm.

6
00:00:26,974 --> 00:00:31,463
So we're going to create some graphic
functions to see some of the data in each

7
00:00:31,463 --> 00:00:35,452
cell and also start color coding some
of the way in which this data is

8
00:00:35,452 --> 00:00:37,334
displayed within the world.

9
00:00:37,334 --> 00:00:41,617
So let's just jump directly into the code
where we could actually start writing some

10
00:00:41,617 --> 00:00:43,654
of these functions.

11
00:00:43,654 --> 00:00:45,502
So this is where we left off.

12
00:00:45,502 --> 00:00:51,544
We have a very kind of low resolution
grid, but still I think that this is,

13
00:00:51,544 --> 00:00:57,391
what I mean by close reading is that,
well, the algorithm is running,

14
00:00:57,391 --> 00:01:02,012
we don't know how the calculation
actually performs.

15
00:01:02,012 --> 00:01:07,037
So we would actually reduce
even further the calculation or

16
00:01:07,037 --> 00:01:11,960
the size of this grid to like a 20 by 10,
because I would

17
00:01:11,960 --> 00:01:17,012
like to spend a bit of time
displaying some of the numbers.

18
00:01:17,012 --> 00:01:21,729
Remember that the calculation of
the a star requires the cost function,

19
00:01:21,729 --> 00:01:23,364
which we call g.

20
00:01:23,364 --> 00:01:26,414
How much have we grown in a path far?

21
00:01:26,414 --> 00:01:31,238
And also the distance function,
which is calculated by the.

22
00:01:31,238 --> 00:01:33,012
We call that, the H, right?

23
00:01:33,012 --> 00:01:35,142
And those together we call F.

24
00:01:35,142 --> 00:01:38,555
Right, which is the function that
ultimately determines which is the next

25
00:01:38,555 --> 00:01:39,894
cell to be evaluated.

26
00:01:39,894 --> 00:01:42,814
So let's just attempt.

27
00:01:42,814 --> 00:01:48,084
And we're going to go
into the tile here and

28
00:01:48,084 --> 00:01:53,354
we're going to create a function called,

29
00:01:53,354 --> 00:01:55,989
just after the run,

30
00:01:55,989 --> 00:02:01,582
let's just call it display data, right?

31
00:02:01,582 --> 00:02:06,488
So what I would like this function to

32
00:02:06,488 --> 00:02:11,254
do is to have some text, right?

33
00:02:11,254 --> 00:02:13,486
So let's just write,
for instance, the text.

34
00:02:13,486 --> 00:02:17,658
We're going to call it mytext and

35
00:02:17,658 --> 00:02:23,601
we're going to say that the g,
the value of g.

36
00:02:23,601 --> 00:02:29,960
Let's do an str convert to string
the internal value of g, right?

37
00:02:29,960 --> 00:02:35,618
So that's the text that we
want to print in a way or

38
00:02:35,618 --> 00:02:39,208
show within the cell, right?

39
00:02:39,208 --> 00:02:46,358
Sorry, we're going to do
a push matrix here and

40
00:02:46,358 --> 00:02:52,192
we're going to translate the position

41
00:02:52,192 --> 00:02:57,284
of this text to self position x.

42
00:03:00,744 --> 00:03:03,432
Let's just give it a little
bit of an offset in x.

43
00:03:03,432 --> 00:03:10,976
So it's not just right on the edge,
self.position.y.

44
00:03:10,976 --> 00:03:15,369
And in the case of y,

45
00:03:15,369 --> 00:03:19,246
we would give it,

46
00:03:19,246 --> 00:03:25,966
start giving it a self.size or

47
00:03:25,966 --> 00:03:29,593
cell size- 2.

48
00:03:29,593 --> 00:03:32,970
So the minus two would be a little
bit of an offset, but the cell size,

49
00:03:32,970 --> 00:03:36,886
I'm really trying to kind of draw within
the box, not on top of the box, right?

50
00:03:36,886 --> 00:03:38,463
So inside each cell, right?

51
00:03:38,463 --> 00:03:42,412
So I'm pushing the text all the way
down to the size of the cell and

52
00:03:42,412 --> 00:03:46,614
then minus two means that gets
a little bit of an offset of two.

53
00:03:46,614 --> 00:03:49,024
So the bottom left corner of the cell,
right?

54
00:03:49,024 --> 00:03:53,194
That's what I'm thinking with this
positioning of the text, right?

55
00:03:53,194 --> 00:03:59,178
And we're going to make sure
that the fill is black and

56
00:03:59,178 --> 00:04:04,616
the text function is going to be my text,
right?

57
00:04:04,616 --> 00:04:12,258
So we're going to use this and
the position 0.0 and pop matrix.

58
00:04:12,258 --> 00:04:15,764
We could just add here in the run
because we know that this function

59
00:04:15,764 --> 00:04:16,978
gets run every turn.

60
00:04:16,978 --> 00:04:22,475
So self.displaydata and we should be able

61
00:04:22,475 --> 00:04:27,714
to see the text appearing in every cell.

62
00:04:27,714 --> 00:04:29,774
Let's see what we get so far.

63
00:04:29,774 --> 00:04:33,834
So as you can see here, we can see the g.

64
00:04:35,414 --> 00:04:40,474
You can start seeing that we
start with 0 and as we calculate.

65
00:04:42,094 --> 00:04:46,876
Well, so here's an interesting
issue that we're facing

66
00:04:46,876 --> 00:04:51,830
because our stack,
the way we're drawing sequentially.

67
00:04:51,830 --> 00:04:54,318
I would like this text to appear
on top of the highlights.

68
00:04:54,318 --> 00:04:59,217
But because of the highlights are being
rendered on top of the display function,

69
00:04:59,217 --> 00:05:02,502
we're going to do something
a little bit inefficient.

70
00:05:02,502 --> 00:05:05,542
But it's just because this is
a function for just debugging or

71
00:05:05,542 --> 00:05:07,222
understanding we can do this.

72
00:05:07,222 --> 00:05:11,334
So let's just go here into our,
the way we're drawing,

73
00:05:11,334 --> 00:05:17,438
we're running the tiles and here's where
we're drawing this display function.

74
00:05:17,438 --> 00:05:20,534
So it's basically
the first one to be drawn.

75
00:05:20,534 --> 00:05:25,136
But what I would like
to do is basically how

76
00:05:25,136 --> 00:05:30,144
display this data on
top of everything else.

77
00:05:30,144 --> 00:05:34,818
So let's just copy the run
tiles function and

78
00:05:34,818 --> 00:05:39,744
call it something along
the lines of trot data.

79
00:05:44,049 --> 00:05:49,733
So we go through all the cells and
instead of calling the run

80
00:05:49,733 --> 00:05:54,816
function, we can call
the display data function.

81
00:05:54,816 --> 00:05:56,585
And now this function here,

82
00:05:56,585 --> 00:06:01,451
this is inefficient because we're going
through the loop of all cells twice or

83
00:06:01,451 --> 00:06:05,328
many times as we go through
all these visualization modes.

84
00:06:05,328 --> 00:06:10,203
So there's certainly work to be
done on the efficiency of this, but

85
00:06:10,203 --> 00:06:15,333
we can actually include this here
towards the end of it, draw the data so

86
00:06:15,333 --> 00:06:19,353
that we actually have it as
an overlay on the algorithm so

87
00:06:19,353 --> 00:06:22,374
that we can actually
see it when we run it.

88
00:06:22,374 --> 00:06:24,210
We can see the data on top of it.

89
00:06:24,210 --> 00:06:27,494
And you might think, well,
this font is actually quite small.

90
00:06:28,554 --> 00:06:31,634
Can we do something to improve that?

91
00:06:31,634 --> 00:06:35,021
I would like to understand and
see what we're doing here.

92
00:06:35,021 --> 00:06:39,753
So we have covered a little bit
of how to work with typography,

93
00:06:39,753 --> 00:06:42,944
but this is just for debugging purposes.

94
00:06:42,944 --> 00:06:48,869
So you can actually create

95
00:06:48,869 --> 00:06:53,985
a font, I'm going to say

96
00:06:53,985 --> 00:06:59,102
consolus bold 14 and

97
00:06:59,102 --> 00:07:04,486
with a size of 14, and

98
00:07:04,486 --> 00:07:12,580
then the text font being f, right?

99
00:07:12,580 --> 00:07:16,804
So if we do that at the beginning here,

100
00:07:16,804 --> 00:07:21,292
we should be able to
see a much larger g and

101
00:07:21,292 --> 00:07:25,680
graphically might not look very good.

102
00:07:25,680 --> 00:07:29,057
But I think that for
the understanding of the algorithm,

103
00:07:29,057 --> 00:07:33,908
it's important that we're starting to see,
okay, the cost function, right,

104
00:07:33,908 --> 00:07:38,274
the cost function, how it grows in
the cells that are being evaluated.

105
00:07:38,274 --> 00:07:43,089
Really, that computation
is starting to become more

106
00:07:43,089 --> 00:07:47,048
clear as we see
the computation being done,

107
00:07:47,048 --> 00:07:51,328
as we can create more traps for
the algorithm and

108
00:07:51,328 --> 00:07:57,974
we can detect why did it go in this
direction as opposed to that direction.

109
00:07:59,074 --> 00:08:01,114
G is not the whole story.

110
00:08:01,114 --> 00:08:07,854
We want to include some
other pieces of information.

111
00:08:07,854 --> 00:08:09,958
So let's do h now.

112
00:08:09,958 --> 00:08:14,134
So we're going to copy the same thing,
this chunk.

113
00:08:14,134 --> 00:08:18,662
I'm sure you can write this more
efficiently in a function, but for

114
00:08:18,662 --> 00:08:21,687
now we're just going to
make it very explicit.

115
00:08:21,687 --> 00:08:25,087
So if my text is h, right?

116
00:08:25,087 --> 00:08:30,680
Then let's make sure that we do the value

117
00:08:30,680 --> 00:08:35,624
of h is a distance, and it might be.

118
00:08:37,244 --> 00:08:40,208
So we can put h here,
converting to string, but

119
00:08:40,208 --> 00:08:42,772
this could have a lot of decimal places.

120
00:08:42,772 --> 00:08:47,284
So just in order to kind of
give a rough estimate of this,

121
00:08:47,284 --> 00:08:52,660
I'm going to convert it to an integer,
and we'll see if this works,

122
00:08:52,660 --> 00:08:57,664
if it has enough kind of capacity
to register the difference.

123
00:08:58,874 --> 00:09:02,052
So h, it's going to be the h
value as an integer, and

124
00:09:02,052 --> 00:09:04,722
then the position is going to be the same.

125
00:09:04,722 --> 00:09:08,002
Let's just push this
value a little bit up.

126
00:09:08,002 --> 00:09:12,706
We know that the font size is 14,
so 14 plus two of offset.

127
00:09:12,706 --> 00:09:18,554
We're going to do -16 and
then the next will remain the same.

128
00:09:18,554 --> 00:09:20,314
So let's see what we get here.

129
00:09:20,314 --> 00:09:25,646
So now we have h, and
let's do this same exercise again.

130
00:09:25,646 --> 00:09:27,334
Let's just draw some.

131
00:09:27,334 --> 00:09:32,505
So now we can actually start
understanding that the calculation

132
00:09:32,505 --> 00:09:38,622
of distance is some of the most prominent
way of calculating the equation.

133
00:09:38,622 --> 00:09:44,269
But eventually the cost of the path
starts playing a bigger and

134
00:09:44,269 --> 00:09:47,694
bigger role into the calculation.

135
00:09:47,694 --> 00:09:52,501
So we have this finally and
again, this is an invitation for

136
00:09:52,501 --> 00:09:57,513
you to really analyze the data
of the algorithm a bit further.

137
00:09:57,513 --> 00:10:02,305
We're going to do the f,
where we are going to do

138
00:10:02,305 --> 00:10:07,488
the same thing of making
an integer version of f.

139
00:10:10,059 --> 00:10:14,490
And here the distance will
be another 16 plus the 16.

140
00:10:14,490 --> 00:10:19,659
So we have -32 right.

141
00:10:19,659 --> 00:10:23,274
We probably could have removed like
the field, like one field for all of them.

142
00:10:23,274 --> 00:10:27,274
And you could make this
a little bit shorter, but yeah.

143
00:10:27,274 --> 00:10:31,808
So this is a matrix, hopefully, the data.

144
00:10:31,808 --> 00:10:37,465
Again, while not very graphic, might
be useful to really understand how this

145
00:10:37,465 --> 00:10:43,565
algorithm is calculating internally and
taking some decisions as it goes, right?

146
00:10:43,565 --> 00:10:48,089
So with this data visualization
of the algorithm in place,

147
00:10:48,089 --> 00:10:50,330
we're going to leave it here.

148
00:10:50,330 --> 00:10:51,971
I invite you to really
play with the algorithm,

149
00:10:51,971 --> 00:10:53,202
really kind of see what you can do.

150
00:10:53,202 --> 00:10:56,447
We're going to do a final video where
we're going to just do a slightly

151
00:10:56,447 --> 00:11:00,695
more aesthetic version of this, visualize
the data slightly different, and really

152
00:11:00,695 --> 00:11:04,922
discuss where this algorithm could be
applied in different contexts for design.

153
00:11:04,922 --> 00:11:05,634
So I'll see you then.