1
00:00:05,030 --> 00:00:07,640
Hi. Welcome to this new video.

2
00:00:07,640 --> 00:00:09,220
In this video, we're
going to start

3
00:00:09,220 --> 00:00:10,880
learning how we can actually

4
00:00:10,880 --> 00:00:14,600
leverage the nested
loops as a composition,

5
00:00:14,600 --> 00:00:16,740
as a design resource to

6
00:00:16,740 --> 00:00:19,915
start constructing
geometry with them.

7
00:00:19,915 --> 00:00:23,805
Let's look at the
example of a grid.

8
00:00:23,805 --> 00:00:25,900
Let's imagine that we
have this nested loop

9
00:00:25,900 --> 00:00:27,270
where we have the
variables i and

10
00:00:27,270 --> 00:00:31,840
j ranging from 0-3.

11
00:00:31,840 --> 00:00:35,630
We're going to create
two variables, x and y,

12
00:00:35,630 --> 00:00:38,940
one of which for
basically using those as

13
00:00:38,940 --> 00:00:41,820
coordinates in a composition.

14
00:00:41,820 --> 00:00:43,600
The only thing that
we're going to do in

15
00:00:43,600 --> 00:00:45,660
x is multiply times 20,

16
00:00:45,660 --> 00:00:47,960
give it a bit of space to

17
00:00:47,960 --> 00:00:52,280
these rectangles to be
separated from each other.

18
00:00:53,700 --> 00:00:56,900
If we have i*20,

19
00:00:56,910 --> 00:01:00,190
we would actually
get zero initially.

20
00:01:00,190 --> 00:01:02,055
So we have 0, 1, 2.

21
00:01:02,055 --> 00:01:05,085
For y, we also have 0, 1, and 2,

22
00:01:05,085 --> 00:01:07,880
but let's understand that
first the inner loop

23
00:01:07,880 --> 00:01:14,055
is associated to the y variable.

24
00:01:14,055 --> 00:01:16,870
That means that
the inner loop is

25
00:01:16,870 --> 00:01:19,505
going to be defined in
the columns of a grid.

26
00:01:19,505 --> 00:01:21,935
For every instance y,

27
00:01:21,935 --> 00:01:23,860
we're going to be
constructing a column.

28
00:01:23,860 --> 00:01:25,350
As opposed to just creating

29
00:01:25,350 --> 00:01:28,130
one rectangle as we
have done previously,

30
00:01:28,130 --> 00:01:31,760
we would actually be
moving down a column.

31
00:01:31,760 --> 00:01:35,830
Once we go back to
the outer loop where

32
00:01:35,830 --> 00:01:40,550
the i value goes 1+1 in x,

33
00:01:40,550 --> 00:01:43,485
we would then construct
another column.

34
00:01:43,485 --> 00:01:45,540
If we start repeating
the sequence,

35
00:01:45,540 --> 00:01:47,730
this is a small example
of that sequence,

36
00:01:47,730 --> 00:01:49,910
we could actually start
creating a grid, right,

37
00:01:49,910 --> 00:01:51,250
as large as we want,

38
00:01:51,250 --> 00:01:53,830
and where we could
actually identify

39
00:01:53,830 --> 00:01:55,890
the inner and outer loop to be

40
00:01:55,890 --> 00:01:58,580
associated to the columns
and rows of that grid.

41
00:01:58,580 --> 00:02:00,950
We have the simple example,

42
00:02:00,950 --> 00:02:03,670
let's just see how it
actually runs in code.

43
00:02:03,670 --> 00:02:07,225
Here we have our template.

44
00:02:07,225 --> 00:02:10,585
Let's just start writing
some of these for

45
00:02:10,585 --> 00:02:11,810
loops and see how we can

46
00:02:11,810 --> 00:02:14,070
manipulate the information
that they have.

47
00:02:14,070 --> 00:02:18,630
For i in range,

48
00:02:18,920 --> 00:02:22,340
let's do 0, 20 for now,

49
00:02:22,340 --> 00:02:24,780
we might change that later.

50
00:02:24,780 --> 00:02:27,420
Remember that Python uses

51
00:02:27,420 --> 00:02:30,160
indentation to define what
happens within the loop.

52
00:02:30,160 --> 00:02:32,020
Once we're using nested loops,

53
00:02:32,020 --> 00:02:33,820
it's very important
that we keep track of

54
00:02:33,820 --> 00:02:37,190
the indentation we're in.

55
00:02:37,190 --> 00:02:41,915
For j in range,

56
00:02:41,915 --> 00:02:45,780
let's also do 0,20.

57
00:02:46,240 --> 00:02:51,450
You see that now we're
further indented here.

58
00:02:51,450 --> 00:02:53,990
We're going to create
the same example that we

59
00:02:53,990 --> 00:02:56,330
did and we'll manipulate
it a little bit as we go.

60
00:02:56,330 --> 00:03:02,600
X = i*20 and y,

61
00:03:03,740 --> 00:03:06,030
center that a little bit more,

62
00:03:06,030 --> 00:03:15,705
j*20, Let's create an
ellipse that is x,

63
00:03:15,705 --> 00:03:19,755
y, 20, 20.

64
00:03:19,755 --> 00:03:23,170
The size of the
ellipse at this point,

65
00:03:23,170 --> 00:03:25,470
it's not particularly relevant.

66
00:03:25,470 --> 00:03:28,310
We could do it slightly
smaller to understand that.

67
00:03:28,310 --> 00:03:34,650
Let's just see what

68
00:03:34,650 --> 00:03:35,790
we have and then we can actually

69
00:03:35,790 --> 00:03:38,110
start looking at the styling.

70
00:03:38,240 --> 00:03:43,665
Here we go. We have a grid of

71
00:03:43,665 --> 00:03:49,135
circles or ellipses
in this case.

72
00:03:49,135 --> 00:03:51,360
Let's just see if
we can control,

73
00:03:51,360 --> 00:03:54,800
let's understand, maybe
create variables for this.

74
00:03:54,800 --> 00:03:58,070
The 20s, they're
not very explicit.

75
00:03:58,070 --> 00:04:02,010
What happens if I change
this for a number 10?

76
00:04:02,010 --> 00:04:06,915
Meaning the outer
loop is reduced.

77
00:04:06,915 --> 00:04:12,915
That means that the number
of columns decreases.

78
00:04:12,915 --> 00:04:15,070
The number of columns is

79
00:04:15,070 --> 00:04:16,910
different than how
long it's a column,

80
00:04:16,910 --> 00:04:19,175
which represents
the number of rows.

81
00:04:19,175 --> 00:04:26,715
Let's associate the number
of columns with x or i.

82
00:04:26,715 --> 00:04:28,960
Let's just create a variable.

83
00:04:30,560 --> 00:04:34,760
I'm going to just
shorten columns to cols,

84
00:04:34,760 --> 00:04:38,230
and I'm going to do
that a number 20,

85
00:04:38,230 --> 00:04:41,920
and copy paste that here.

86
00:04:42,350 --> 00:04:47,805
Then rows is going to be,

87
00:04:47,805 --> 00:04:50,920
let's just do 40, let's
just do something higher.

88
00:04:51,890 --> 00:04:54,705
I'm going to
associate that here.

89
00:04:54,705 --> 00:04:57,150
Now we have a variable
that determines more

90
00:04:57,150 --> 00:05:01,370
explicitly the number of
rows and number of columns.

91
00:05:01,370 --> 00:05:06,150
If we know that we are
going to be multiplying

92
00:05:06,150 --> 00:05:11,090
or basically the spacing of
our geometries times 20,

93
00:05:11,090 --> 00:05:13,110
we could basically calculate

94
00:05:13,110 --> 00:05:20,490
how many entities we would
need to fill the screen.

95
00:05:20,490 --> 00:05:22,060
That could be achieved

96
00:05:22,060 --> 00:05:24,150
by using some math
with Canvas here,

97
00:05:24,150 --> 00:05:27,520
but we can probably
derive that pretty simply

98
00:05:27,520 --> 00:05:31,740
by putting a 60 and 30 here.

99
00:05:31,740 --> 00:05:34,670
Let's see how that looks.

100
00:05:34,670 --> 00:05:37,220
You can see we can
actually make a full grid.

101
00:05:37,220 --> 00:05:41,650
The only thing, because
we're starting at 00,

102
00:05:42,140 --> 00:05:47,200
it feels like there's
missing one at the very end.

103
00:05:47,200 --> 00:05:51,620
If you want, you can
always add an extra one,

104
00:05:51,840 --> 00:05:57,940
let's call it a plus one to
make sure that the effect,

105
00:05:57,940 --> 00:06:00,360
if we start with
half, we end up with

106
00:06:00,360 --> 00:06:02,380
half as well on
the opposite end,

107
00:06:02,380 --> 00:06:06,280
and that happens both on the
top and the bottom as well.

108
00:06:06,280 --> 00:06:08,305
We have a system
for creating grids,

109
00:06:08,305 --> 00:06:09,920
understanding how nested loops

110
00:06:09,920 --> 00:06:12,965
really are very beneficial
for creating grids.

111
00:06:12,965 --> 00:06:14,620
You could create all sorts

112
00:06:14,620 --> 00:06:16,160
of interesting
effects with this.

113
00:06:16,160 --> 00:06:20,325
If you start making
these circles slightly,

114
00:06:20,325 --> 00:06:22,630
you could actually
create a variable here,

115
00:06:22,630 --> 00:06:27,775
something like size = 30.

116
00:06:27,775 --> 00:06:31,310
Let's just call it ellipse_size

117
00:06:32,330 --> 00:06:38,970
just not to interfere with
any inbuilt variable.

118
00:06:40,130 --> 00:06:43,750
Then let's style this a
little bit as well by using

119
00:06:43,750 --> 00:06:48,145
a fill of 255,50,

120
00:06:48,145 --> 00:06:52,125
meaning a white color,

121
00:06:52,125 --> 00:06:54,165
but some transparency,

122
00:06:54,165 --> 00:06:56,905
and also no stroke.

123
00:06:56,905 --> 00:07:02,070
I don't want to see the
outer edge of this.

124
00:07:02,070 --> 00:07:04,670
What you could start
seeing is that we

125
00:07:04,670 --> 00:07:07,880
actually have a bit of overlap.

126
00:07:08,960 --> 00:07:11,115
We're creating this grid,

127
00:07:11,115 --> 00:07:12,540
where we actually
could start creating

128
00:07:12,540 --> 00:07:17,610
a pattern between these
overlapping geometries.

129
00:07:17,610 --> 00:07:21,250
If we actually want
that size to be exact,

130
00:07:21,410 --> 00:07:25,095
that will be 20 because
we're multiplying it,

131
00:07:25,095 --> 00:07:26,430
the spacing is 20.

132
00:07:26,430 --> 00:07:28,640
You could actually create

133
00:07:28,640 --> 00:07:31,875
something like a
background grid.

134
00:07:31,875 --> 00:07:33,420
There's all sorts of

135
00:07:33,420 --> 00:07:34,900
different interesting patterns

136
00:07:34,900 --> 00:07:36,080
that you could start creating.

137
00:07:36,080 --> 00:07:38,800
Maybe even overlapping a
series of grids that have

138
00:07:38,800 --> 00:07:41,000
different spacings and
starting to create

139
00:07:41,000 --> 00:07:43,580
resonances between
the different colors.

140
00:07:43,580 --> 00:07:46,410
There's so much you
can achieve with

141
00:07:46,410 --> 00:07:48,540
understanding how you can create

142
00:07:48,540 --> 00:07:50,550
grid patterns using
nested loops.

143
00:07:50,550 --> 00:07:53,140
We're going to do a little bit
of that in the next video,

144
00:07:53,140 --> 00:07:54,980
we're going to just jump
into a little bit more of

145
00:07:54,980 --> 00:07:57,380
a composition if you want
using this technique,

146
00:07:57,380 --> 00:07:58,780
but for now, we're going to

147
00:07:58,780 --> 00:08:01,440
leave this video here. I'll
see you in the next one.