1
00:00:05,240 --> 00:00:08,840
Welcome to this new
video on grids.

2
00:00:08,840 --> 00:00:10,720
We are going to
continue working with

3
00:00:10,720 --> 00:00:13,520
the same previous example

4
00:00:13,520 --> 00:00:16,980
where we actually constructed
a grid from scratch.

5
00:00:16,980 --> 00:00:19,480
But this time we're
going to see how you go

6
00:00:19,480 --> 00:00:22,300
about if you wanted to
do a nested structure.

7
00:00:22,300 --> 00:00:24,180
There's a little
bit of a difference

8
00:00:24,180 --> 00:00:26,520
on how data could be organized,

9
00:00:26,520 --> 00:00:31,220
and some people would
prefer this style just

10
00:00:31,220 --> 00:00:32,940
because it lends itself maybe

11
00:00:32,940 --> 00:00:37,100
more clearly to a
grid structure.

12
00:00:37,100 --> 00:00:41,020
But again, it's about what
you want to use it for.

13
00:00:41,020 --> 00:00:42,670
We wanted to show both styles.

14
00:00:42,670 --> 00:00:44,810
Let's see what is
the difference.

15
00:00:44,810 --> 00:00:50,450
What we have here is a data
structure that has been,

16
00:00:50,450 --> 00:00:53,360
it's a nested structure,
so we have a list,

17
00:00:53,360 --> 00:00:57,295
as you can see down
here, a general list.

18
00:00:57,295 --> 00:01:00,320
Then within each
one of the columns,

19
00:01:00,320 --> 00:01:04,830
or the rows are represented
by an additional list.

20
00:01:04,830 --> 00:01:07,515
We have a nested list.

21
00:01:07,515 --> 00:01:11,560
If we start thinking
about this spatially,

22
00:01:11,560 --> 00:01:16,280
the index of our data

23
00:01:16,280 --> 00:01:20,105
will have two indices for
each one of the data points.

24
00:01:20,105 --> 00:01:28,460
We have to think of the first
element of the first list,

25
00:01:28,460 --> 00:01:30,640
the second element
of the first list,

26
00:01:30,640 --> 00:01:33,695
the third element of the
first list, and so forth.

27
00:01:33,695 --> 00:01:35,970
Then if we move in

28
00:01:35,970 --> 00:01:38,520
the rows, we would
start thinking, well,

29
00:01:38,520 --> 00:01:43,175
this is the first element
of the second list,

30
00:01:43,175 --> 00:01:46,380
and it's the second element
of the second list.

31
00:01:46,380 --> 00:01:47,840
The indices here.

32
00:01:47,840 --> 00:01:50,260
I hope that the distance
is enough to understand.

33
00:01:50,260 --> 00:01:52,240
There are two different indices,

34
00:01:52,240 --> 00:01:55,040
pair entry of data.

35
00:01:55,200 --> 00:01:58,450
But one that represents
more accurately

36
00:01:58,450 --> 00:02:01,680
are columns and rows structure.

37
00:02:01,680 --> 00:02:04,750
Before we were actually
having a flat list that was

38
00:02:04,750 --> 00:02:08,360
folding itself into a spatial
organization if you want.

39
00:02:08,360 --> 00:02:12,230
Therefore, the last index

40
00:02:12,230 --> 00:02:14,670
was a multiplication of
the columns and rows.

41
00:02:14,670 --> 00:02:17,700
It could get quite an intuitive.

42
00:02:17,700 --> 00:02:19,480
This organization,
the data structure,

43
00:02:19,480 --> 00:02:22,600
is slightly maybe more complex,

44
00:02:22,600 --> 00:02:25,780
but it makes it more
intuitive to read.

45
00:02:25,780 --> 00:02:29,195
This is the second entry
on the second column.

46
00:02:29,195 --> 00:02:32,920
You actually are matching
the data structure to have

47
00:02:32,920 --> 00:02:34,830
more correlation to

48
00:02:34,830 --> 00:02:37,330
the spatial organization
it's actually fulfilling.

49
00:02:37,330 --> 00:02:40,530
How would this look when
you write it in code,

50
00:02:40,530 --> 00:02:43,850
you start with a single
list as you see here.

51
00:02:43,850 --> 00:02:45,730
As you go through a loop,

52
00:02:45,730 --> 00:02:50,385
you actually create another
list within that first loop.

53
00:02:50,385 --> 00:02:52,790
You basically are using
a two loop structure.

54
00:02:52,790 --> 00:02:55,590
One that represents looping
through the columns,

55
00:02:55,590 --> 00:02:59,545
another one that represents
looping through the rows,

56
00:02:59,545 --> 00:03:01,870
so that you actually store

57
00:03:01,870 --> 00:03:04,865
the information in a
way that is nested.

58
00:03:04,865 --> 00:03:09,740
We have a list or series
of lists within a list.

59
00:03:09,780 --> 00:03:12,450
Let's see how we can transform

60
00:03:12,450 --> 00:03:14,820
our example and get rid

61
00:03:14,820 --> 00:03:17,260
of that logic that
would manually,

62
00:03:17,260 --> 00:03:20,640
if you want, create the
grid organization and allow

63
00:03:20,640 --> 00:03:26,130
the fore loop to carry the
weight of the organization.

64
00:03:26,270 --> 00:03:28,580
This is where we left off.

65
00:03:28,580 --> 00:03:31,020
I'm going to bring
it back to a 10*10,

66
00:03:31,020 --> 00:03:32,760
if you remember correctly.

67
00:03:32,760 --> 00:03:34,840
In the last session,

68
00:03:34,840 --> 00:03:36,040
we were showing how to do

69
00:03:36,040 --> 00:03:42,510
a grid using this
singular let structure.

70
00:03:42,510 --> 00:03:45,260
We're going to
continue because we

71
00:03:45,260 --> 00:03:48,180
will be using mostly of
the same ingredients.

72
00:03:48,180 --> 00:03:49,580
We will use image size,

73
00:03:49,580 --> 00:03:51,360
we will use resolution.

74
00:03:51,360 --> 00:03:53,200
We're basically going to change

75
00:03:53,200 --> 00:03:55,420
a little bit of the logic
here with the loop.

76
00:03:55,420 --> 00:03:59,455
What can we get rid of unchange?

77
00:03:59,455 --> 00:04:01,560
Hopefully you can
follow along and at

78
00:04:01,560 --> 00:04:03,960
this point start
understanding that we

79
00:04:03,960 --> 00:04:06,620
can transform quite
a bit of script or

80
00:04:06,620 --> 00:04:08,140
quite drastically a script

81
00:04:08,140 --> 00:04:10,940
by starting to do
incisions in it.

82
00:04:10,940 --> 00:04:14,890
We will move all the way down
and get rid of this logic.

83
00:04:14,890 --> 00:04:18,525
This logic here had to do with

84
00:04:18,525 --> 00:04:23,740
the increment of the
list in x and in y,

85
00:04:23,740 --> 00:04:26,500
using this typewriter style.

86
00:04:26,500 --> 00:04:29,620
I'm going to just go
ahead and delete that.

87
00:04:31,070 --> 00:04:35,270
Right now, we might not
need the current index.

88
00:04:35,270 --> 00:04:37,750
The other thing that we want
to do is that we want to

89
00:04:37,750 --> 00:04:41,070
introduce a nested
loop structure.

90
00:04:41,070 --> 00:04:44,445
Instead of using a loop
that goes through x*y,

91
00:04:44,445 --> 00:04:49,010
we're going to just use a loop
that organizes itself by,

92
00:04:49,010 --> 00:04:52,030
let's go through
resolution in x and

93
00:04:52,030 --> 00:04:55,770
we're going to copy
paste this here.

94
00:04:55,770 --> 00:04:59,365
Let's use a second variable, j,

95
00:04:59,365 --> 00:05:03,710
and we're going to use
that to loop through y.

96
00:05:04,680 --> 00:05:08,260
That means that all
this code now should

97
00:05:08,260 --> 00:05:12,100
live within this
two loop structure.

98
00:05:12,320 --> 00:05:15,435
At this point we could
try to run this.

99
00:05:15,435 --> 00:05:18,920
We're not going to get a very
interesting result because

100
00:05:18,920 --> 00:05:20,800
we changed the logic

101
00:05:20,800 --> 00:05:23,400
of what is the current
x and current y.

102
00:05:23,400 --> 00:05:25,105
But if you think about it now,

103
00:05:25,105 --> 00:05:27,415
i and j,

104
00:05:27,415 --> 00:05:31,400
because one is actually
looping through x is

105
00:05:31,400 --> 00:05:35,200
doing the job that this
typewriter code was doing before.

106
00:05:35,200 --> 00:05:38,230
It will actually move from

107
00:05:38,230 --> 00:05:41,700
0-10 Then the next one will
also be moving from 0-10.

108
00:05:41,700 --> 00:05:45,085
We could actually replace
this current x variable

109
00:05:45,085 --> 00:05:50,870
by i and current
y variable by j.

110
00:05:51,650 --> 00:05:54,360
Let's see if at this point we

111
00:05:54,360 --> 00:05:58,020
are having something reasonable.

112
00:05:58,020 --> 00:05:59,580
You see we still

113
00:05:59,580 --> 00:06:01,530
remain and we have exactly
what we had before.

114
00:06:01,530 --> 00:06:03,180
But we actually got
rid a little bit

115
00:06:03,180 --> 00:06:05,040
of this extra code that felt

116
00:06:05,040 --> 00:06:07,020
like we're manually folding

117
00:06:07,020 --> 00:06:10,240
the data into the
shape of a grid.

118
00:06:12,980 --> 00:06:16,725
Almost the way we're
constructing the data,

119
00:06:16,725 --> 00:06:18,510
it's equivalent to the way

120
00:06:18,510 --> 00:06:20,205
in which we're
constructing a grid.

121
00:06:20,205 --> 00:06:22,755
It seems to make more
sense, and again,

122
00:06:22,755 --> 00:06:26,535
a lot of people like this
data structure for grids.

123
00:06:26,535 --> 00:06:28,935
I've moved between using both.

124
00:06:28,935 --> 00:06:30,840
Sometimes it's very
useful to have a

125
00:06:30,840 --> 00:06:33,615
nested or a flat list,

126
00:06:33,615 --> 00:06:39,480
which might keep things very
simple to access as well.

127
00:06:39,480 --> 00:06:43,530
The way you search through a
list may be simpler as well.

128
00:06:43,530 --> 00:06:46,485
But in this case,

129
00:06:46,485 --> 00:06:48,210
it's interesting to
start seeing how

130
00:06:48,210 --> 00:06:51,225
this nested data structure
is allowing us to

131
00:06:51,225 --> 00:06:56,100
construct a different
organization of the rectangles.

132
00:06:56,100 --> 00:06:58,275
But you might say,
wait a second,

133
00:06:58,275 --> 00:07:01,005
the list right now is
still a flat list.

134
00:07:01,005 --> 00:07:04,245
We are not having
the information

135
00:07:04,245 --> 00:07:07,230
being organized in
any different way

136
00:07:07,230 --> 00:07:08,925
than what we had before.

137
00:07:08,925 --> 00:07:11,220
It's actually in
fact, a flat list.

138
00:07:11,220 --> 00:07:13,050
We are just displaying

139
00:07:13,050 --> 00:07:16,335
these rectangles differently,
and that's correct.

140
00:07:16,335 --> 00:07:20,620
Let's just print the list.

141
00:07:20,840 --> 00:07:28,510
If we print the list of colors,

142
00:07:30,680 --> 00:07:34,980
let's just close this for a
moment and look at the data.

143
00:07:34,980 --> 00:07:38,835
If you can see, we actually
opened square brackets.

144
00:07:38,835 --> 00:07:40,500
Then we have our
first color entry,

145
00:07:40,500 --> 00:07:41,490
the second color entry,

146
00:07:41,490 --> 00:07:44,685
and we keep going
until the very end.

147
00:07:44,685 --> 00:07:50,470
We still have basically a
flat list under the hood.

148
00:07:50,630 --> 00:07:53,640
How would we organize
the data to have

149
00:07:53,640 --> 00:07:57,210
this double index configuration
that we discussed before?

150
00:07:57,210 --> 00:08:01,440
Well, let's do a variable

151
00:08:01,440 --> 00:08:05,370
here which will
represent the columns.

152
00:08:05,370 --> 00:08:12,310
A column would be an empty list.

153
00:08:14,560 --> 00:08:18,020
What we will be adding to

154
00:08:18,020 --> 00:08:22,235
is instead of appending
to the larger list,

155
00:08:22,235 --> 00:08:26,645
we will be appending
to a column list.

156
00:08:26,645 --> 00:08:32,940
Let's append one entry
to the list of columns.

157
00:08:32,940 --> 00:08:35,760
At this point, this column

158
00:08:35,760 --> 00:08:38,490
will only exist
within this loop,

159
00:08:38,490 --> 00:08:41,430
and every time we loop again,

160
00:08:41,430 --> 00:08:43,810
we're going to be
replacing that.

161
00:08:44,570 --> 00:08:48,210
Here's where indentation
is going to be important.

162
00:08:48,210 --> 00:08:53,355
At the end of every one
of the first for loop,

163
00:08:53,355 --> 00:08:56,110
we are able to append.

164
00:08:56,420 --> 00:08:59,895
Let's do this here.

165
00:08:59,895 --> 00:09:02,385
It's important that it's
not within this loop,

166
00:09:02,385 --> 00:09:05,580
but rather within
the second loop.

167
00:09:05,580 --> 00:09:11,625
We will append the
column that we created.

168
00:09:11,625 --> 00:09:13,515
We're creating a column,

169
00:09:13,515 --> 00:09:20,475
we are appending it to the
list at the end of every loop.

170
00:09:20,475 --> 00:09:22,590
If you think about
it, instead of just

171
00:09:22,590 --> 00:09:25,920
going through each entity

172
00:09:25,920 --> 00:09:27,480
and adding those
entities to the list,

173
00:09:27,480 --> 00:09:29,625
we are actually
creating a sub list,

174
00:09:29,625 --> 00:09:32,775
which is a column, appending
entries to that list.

175
00:09:32,775 --> 00:09:34,350
Then when we finish,
we add it to

176
00:09:34,350 --> 00:09:36,060
the second list or
the larger list,

177
00:09:36,060 --> 00:09:40,110
the umbrella list and we flush.

178
00:09:40,110 --> 00:09:42,360
The column starts
from scratch again

179
00:09:42,360 --> 00:09:44,130
in the next iteration of
the loop and we do that

180
00:09:44,130 --> 00:09:46,065
over and over until we conclude

181
00:09:46,065 --> 00:09:48,180
the number of columns
that we have.

182
00:09:48,180 --> 00:09:52,305
Let's see if we created any
errors in that process.

183
00:09:52,305 --> 00:09:55,095
The script seems to
be running well.

184
00:09:55,095 --> 00:09:56,685
Let's close this for a second.

185
00:09:56,685 --> 00:09:57,870
I like the code, but I

186
00:09:57,870 --> 00:09:59,595
also want to be looking
at the data here.

187
00:09:59,595 --> 00:10:02,670
You can see a little bit
differently what we're having.

188
00:10:02,670 --> 00:10:06,615
Which is we have a nested list.

189
00:10:06,615 --> 00:10:08,025
The list opens up,

190
00:10:08,025 --> 00:10:10,170
then we have the
series of numbers.

191
00:10:10,170 --> 00:10:13,335
If we just try to find here,

192
00:10:13,335 --> 00:10:18,000
we finish the first list
all the way to the right,

193
00:10:18,000 --> 00:10:20,950
and basically that's a column,

194
00:10:21,050 --> 00:10:24,750
and then we move to the
next one and so forth.

195
00:10:24,750 --> 00:10:29,415
If we go back to our
slide for a second,

196
00:10:29,415 --> 00:10:33,645
you'll see that this syntax

197
00:10:33,645 --> 00:10:37,800
applies and we can actually
understand that the data

198
00:10:37,800 --> 00:10:42,360
of the list is being
organized with two indices

199
00:10:42,360 --> 00:10:46,590
that represent their position

200
00:10:46,590 --> 00:10:49,540
both in rows and in the column.

201
00:10:51,010 --> 00:10:56,835
That will be the
variation that we did.

202
00:10:56,835 --> 00:10:59,535
It's a similar
result graphically,

203
00:10:59,535 --> 00:11:03,375
but it will really change
the way we access the data,

204
00:11:03,375 --> 00:11:06,570
perhaps more
intuitively accessing

205
00:11:06,570 --> 00:11:08,910
that data in a spacial format.

206
00:11:08,910 --> 00:11:10,935
We'll see how to
access the data,

207
00:11:10,935 --> 00:11:13,875
how to start manipulating the
data, and more importantly,

208
00:11:13,875 --> 00:11:16,470
how do we create operations
that take advantage of

209
00:11:16,470 --> 00:11:19,920
the data structure to create
interesting algorithms?

210
00:11:19,920 --> 00:11:22,480
I'll see you in the next video.