1
00:00:05,210 --> 00:00:07,720
Hi. Welcome to this new video.

2
00:00:07,720 --> 00:00:10,500
In this video we're going
to start using loops within

3
00:00:10,500 --> 00:00:14,660
our compositions and drawing
primitives within loops.

4
00:00:14,720 --> 00:00:17,860
Let's just jump into some

5
00:00:17,860 --> 00:00:19,740
of what we're going
to be seeing and

6
00:00:19,740 --> 00:00:21,955
then see how we can
actually construct that.

7
00:00:21,955 --> 00:00:23,890
We have, on the left,

8
00:00:23,890 --> 00:00:25,460
an example of the code.

9
00:00:25,460 --> 00:00:29,430
As you can see, we're
operating within a loop.

10
00:00:29,430 --> 00:00:33,495
We have a for loop
that uses a variable i

11
00:00:33,495 --> 00:00:39,135
in range 0-3 in this case.

12
00:00:39,135 --> 00:00:41,755
We're going to have 0, 1, 2, 3.

13
00:00:41,755 --> 00:00:43,980
Then we're going to
do two lines that

14
00:00:43,980 --> 00:00:45,960
are operating within that loop.

15
00:00:45,960 --> 00:00:48,260
Let's look at the second
line for a second

16
00:00:48,260 --> 00:00:50,290
before we actually
look at the first one.

17
00:00:50,290 --> 00:00:51,730
The second one is a rectangle.

18
00:00:51,730 --> 00:00:53,740
We're going to be
drawing a rectangle,

19
00:00:53,740 --> 00:00:55,520
and as you remember,

20
00:00:55,520 --> 00:00:58,460
the primitive of a
rectangle specifies

21
00:00:58,460 --> 00:01:00,600
the top leftmost corner

22
00:01:00,600 --> 00:01:04,560
as our starting point
or anchor point,

23
00:01:04,560 --> 00:01:07,130
and then we specify the
width of that rectangle,

24
00:01:07,130 --> 00:01:10,530
and the height of that
rectangle moving down.

25
00:01:11,030 --> 00:01:13,570
Traditionally, we
would say, well,

26
00:01:13,570 --> 00:01:15,590
let's say something
like 100 and 100

27
00:01:15,590 --> 00:01:17,450
would be the anchor coordinate.

28
00:01:17,450 --> 00:01:18,950
Then maybe we want

29
00:01:18,950 --> 00:01:22,610
20 pixels of width and
then 100 pixels of height.

30
00:01:22,610 --> 00:01:24,980
But in this case,
because we have a loop,

31
00:01:24,980 --> 00:01:27,030
maybe we want to
start constructing

32
00:01:27,030 --> 00:01:29,930
all those rectangles not
on top of each other.

33
00:01:29,930 --> 00:01:31,310
If we would give the
same coordinate,

34
00:01:31,310 --> 00:01:33,170
those four rectangles
would overlap.

35
00:01:33,170 --> 00:01:37,850
But we want to change the
coordinate of those rectangles.

36
00:01:37,850 --> 00:01:39,845
We want to create a
series of rectangles

37
00:01:39,845 --> 00:01:42,065
all of them in a
different position.

38
00:01:42,065 --> 00:01:43,710
We know that we want to move

39
00:01:43,710 --> 00:01:46,780
those rectangles in the x-axis,

40
00:01:46,780 --> 00:01:49,815
basically align
them in the x-axis.

41
00:01:49,815 --> 00:01:51,790
Therefore, there's only one

42
00:01:51,790 --> 00:01:53,910
of those variables,
the x coordinate.

43
00:01:53,910 --> 00:01:56,500
That is something that
we wanted to change.

44
00:01:56,500 --> 00:01:58,810
Four rectangles, but each one of

45
00:01:58,810 --> 00:02:01,560
them using a different x.

46
00:02:01,560 --> 00:02:03,570
That's why we're going
to create a variable

47
00:02:03,570 --> 00:02:05,490
called x here.

48
00:02:05,490 --> 00:02:07,470
Let's just think
of that equation.

49
00:02:07,470 --> 00:02:09,290
What is this
equation here doing?

50
00:02:09,290 --> 00:02:11,925
We're using the i
variable of the for loop.

51
00:02:11,925 --> 00:02:13,560
The for loop, the first time

52
00:02:13,560 --> 00:02:15,770
we loop through this sequence,

53
00:02:15,770 --> 00:02:18,360
the variable I will be zero.

54
00:02:18,360 --> 00:02:21,980
If we think of this
equation is 0*30,

55
00:02:21,980 --> 00:02:25,410
that's zero, +100.

56
00:02:25,410 --> 00:02:26,850
The +100 is an offset and

57
00:02:26,850 --> 00:02:30,190
it's basically an
optional offset.

58
00:02:30,190 --> 00:02:34,075
If you want basically your
rectangles to start at 100,

59
00:02:34,075 --> 00:02:39,300
you add this +100 that
basically we start at 100.

60
00:02:39,300 --> 00:02:41,330
If we look at the first point,

61
00:02:41,330 --> 00:02:42,850
as you can see on the right,

62
00:02:42,850 --> 00:02:45,080
you'll see that our first
point's coordinates

63
00:02:45,080 --> 00:02:46,850
will be 100, 100.

64
00:02:46,850 --> 00:02:48,670
That's the first
rectangle that we

65
00:02:48,670 --> 00:02:51,430
create when the
variable i is zero.

66
00:02:51,430 --> 00:02:55,260
When the variable i
is one, we have i*30.

67
00:02:55,260 --> 00:02:59,830
That is 30+100, we have 130.

68
00:02:59,830 --> 00:03:01,070
The second point would be in

69
00:03:01,070 --> 00:03:04,890
a coordinate 130, 100, right?

70
00:03:04,890 --> 00:03:06,700
As you can see, the variable x,

71
00:03:06,700 --> 00:03:08,520
every time that we
go through the loop

72
00:03:08,520 --> 00:03:11,265
will be using a different value,

73
00:03:11,265 --> 00:03:12,915
a value of 0, 1, 2,

74
00:03:12,915 --> 00:03:15,160
or 3 and we can use that

75
00:03:15,160 --> 00:03:18,140
to change the coordinates
of the rectangle.

76
00:03:18,140 --> 00:03:19,840
That's the basics of it.

77
00:03:19,840 --> 00:03:21,380
Let's just see how we can

78
00:03:21,380 --> 00:03:23,500
actually implement
that within our code.

79
00:03:23,500 --> 00:03:25,470
We're here in processing.

80
00:03:25,470 --> 00:03:28,640
Let's just type right in.

81
00:03:28,640 --> 00:03:31,400
I really like creating
a little bit of space.

82
00:03:31,400 --> 00:03:32,200
I have, again,

83
00:03:32,200 --> 00:03:35,695
a template boilerplate
code with a setup,

84
00:03:35,695 --> 00:03:38,290
the size, and draw loop.

85
00:03:38,290 --> 00:03:40,990
We're going to be working
within the draw loop.

86
00:03:40,990 --> 00:03:43,170
So let's make sure that we do,

87
00:03:43,170 --> 00:03:44,520
first of all, a for loop.

88
00:03:44,520 --> 00:03:49,220
For i, remember
that this variable,

89
00:03:49,220 --> 00:03:52,540
you can give it
any name you want.

90
00:03:52,540 --> 00:03:53,590
By convention, you'll see

91
00:03:53,590 --> 00:03:55,570
a lot in the documentation about

92
00:03:55,570 --> 00:04:00,690
the code that people use i
for variable within a loop.

93
00:04:00,980 --> 00:04:03,830
We're going to follow those
conventions at the moment.

94
00:04:03,830 --> 00:04:05,750
We're going to do a range.

95
00:04:05,750 --> 00:04:12,470
I'm going to specify here
a range that goes 0-20.

96
00:04:13,940 --> 00:04:16,880
You see we'll
actually be talking

97
00:04:16,880 --> 00:04:18,980
about the range
function a bit more.

98
00:04:18,980 --> 00:04:20,280
But the range function
is something that

99
00:04:20,280 --> 00:04:22,080
will give us a
series of numbers.

100
00:04:22,080 --> 00:04:24,180
If I specify the
beginning at the end,

101
00:04:24,180 --> 00:04:26,280
I can specify zero being the

102
00:04:26,280 --> 00:04:29,670
first one and 20
being the last one.

103
00:04:29,950 --> 00:04:32,080
I might not need that zero,

104
00:04:32,080 --> 00:04:33,560
but it might make it more

105
00:04:33,560 --> 00:04:35,460
explicit or if you want
to manipulate that zero,

106
00:04:35,460 --> 00:04:36,760
you would get a
range between, let's

107
00:04:36,760 --> 00:04:39,510
say five and 20.
You can do that.

108
00:04:39,510 --> 00:04:42,800
But often, we start at zero just

109
00:04:42,800 --> 00:04:46,160
to know exactly how many
times you might want to loop.

110
00:04:46,160 --> 00:04:48,700
But again, that construct
is very flexible for you

111
00:04:48,700 --> 00:04:52,145
to really manipulate in something
that is useful for you.

112
00:04:52,145 --> 00:04:55,990
Let's just do a
rectangle first of all,

113
00:04:55,990 --> 00:04:58,470
and we're going to use
here what we wrote before,

114
00:04:58,470 --> 00:05:04,250
100, 100, 20, 100.

115
00:05:05,270 --> 00:05:07,980
At this point, we might say,

116
00:05:07,980 --> 00:05:10,540
well, we don't want to stroke.

117
00:05:11,990 --> 00:05:18,205
We don't want to be
any outlines and feel.

118
00:05:18,205 --> 00:05:21,220
Let's just keep it wide for now.

119
00:05:21,740 --> 00:05:24,350
But we'll see how
we can actually

120
00:05:24,350 --> 00:05:26,090
manipulate that as well.

121
00:05:26,090 --> 00:05:34,170
What happens here,
if we ran this code,

122
00:05:34,310 --> 00:05:37,820
you'll see that we only
see one rectangle.

123
00:05:37,820 --> 00:05:40,450
We do have four and we

124
00:05:40,450 --> 00:05:44,515
can check on that with
the print function.

125
00:05:44,515 --> 00:05:45,640
Let's do the print function for

126
00:05:45,640 --> 00:05:48,490
a moment and let's print
what we get out of i.

127
00:05:48,490 --> 00:05:51,490
So the variable i, notice
that I am here operating

128
00:05:51,490 --> 00:05:54,445
under the indented space.

129
00:05:54,445 --> 00:05:56,185
We have the first indentation

130
00:05:56,185 --> 00:05:58,225
from within the draw function,

131
00:05:58,225 --> 00:05:59,815
because as you remember,

132
00:05:59,815 --> 00:06:01,870
functions require that we

133
00:06:01,870 --> 00:06:04,960
operate with our first
degree of indentation,

134
00:06:04,960 --> 00:06:08,530
and then the second one is
coming from within this loop.

135
00:06:08,530 --> 00:06:10,825
But let's print the i function

136
00:06:10,825 --> 00:06:12,505
and see what are we getting.

137
00:06:12,505 --> 00:06:16,570
If we print i,

138
00:06:16,570 --> 00:06:18,250
the first thing that
we will actually

139
00:06:18,250 --> 00:06:19,420
see is that because we're

140
00:06:19,420 --> 00:06:22,240
in the draw loop,

141
00:06:22,240 --> 00:06:24,700
this will continuously
happen every frame.

142
00:06:24,700 --> 00:06:28,000
But basically within
each every frame,

143
00:06:28,000 --> 00:06:33,230
we are printing the
values from 0-20.

144
00:06:33,840 --> 00:06:36,250
Not like the example here,

145
00:06:36,250 --> 00:06:38,800
I forgot, we're actually
doing it 20 times.

146
00:06:38,800 --> 00:06:40,795
If we would change this to four,

147
00:06:40,795 --> 00:06:43,220
you will see values from 0-3.

148
00:06:43,230 --> 00:06:47,500
But I do want to see it
a little bit more, 20.

149
00:06:47,500 --> 00:06:51,325
But what we have to
actually do here is

150
00:06:51,325 --> 00:06:54,190
create something that would make

151
00:06:54,190 --> 00:06:56,380
the x coordinate of
the rectangle change.

152
00:06:56,380 --> 00:07:01,190
Let's try what we saw in the
slides, which is i*30+100.

153
00:07:04,530 --> 00:07:08,935
Let's now use that
variable that is basically

154
00:07:08,935 --> 00:07:11,620
considering the variable i of

155
00:07:11,620 --> 00:07:14,500
the loop within the rectangle.

156
00:07:14,500 --> 00:07:16,870
If you don't include
that variable here,

157
00:07:16,870 --> 00:07:21,070
that variable x might
not do anything.

158
00:07:21,070 --> 00:07:23,380
Let's just comment out
the print function

159
00:07:23,380 --> 00:07:26,245
that right now is unnecessary.

160
00:07:26,245 --> 00:07:32,245
You see that we have 20
iterations of this rectangle.

161
00:07:32,245 --> 00:07:34,555
What if we want five of them?

162
00:07:34,555 --> 00:07:36,145
Well, we changed this value,

163
00:07:36,145 --> 00:07:39,055
the range, to a smaller number.

164
00:07:39,055 --> 00:07:43,000
What if we want 50?

165
00:07:43,000 --> 00:07:45,925
We can have more of
them, we can have 50.

166
00:07:45,925 --> 00:07:47,830
But we see, we are
running out of

167
00:07:47,830 --> 00:07:49,540
space here because we're doing

168
00:07:49,540 --> 00:07:53,980
an arbitrary amount of space
between those rectangles,

169
00:07:53,980 --> 00:07:55,360
and the for loop will continue

170
00:07:55,360 --> 00:07:57,370
calculating mathematically
those variables

171
00:07:57,370 --> 00:08:01,370
and processing will only show
us what it's in the canvas.

172
00:08:01,370 --> 00:08:03,600
But that doesn't mean that
we cannot create things

173
00:08:03,600 --> 00:08:05,970
outside the canvas that's
in fact happening.

174
00:08:05,970 --> 00:08:08,070
So let's just keep that 20,

175
00:08:08,070 --> 00:08:09,390
which is a sensible number for

176
00:08:09,390 --> 00:08:11,465
the size of our current canvas.

177
00:08:11,465 --> 00:08:15,085
But let's just think a little
bit more of what we could

178
00:08:15,085 --> 00:08:18,925
use this i variable for.

179
00:08:18,925 --> 00:08:22,645
This i variable is something
that is changing from 0-20.

180
00:08:22,645 --> 00:08:24,580
What if we would want the color

181
00:08:24,580 --> 00:08:26,365
of these rectangles to change?

182
00:08:26,365 --> 00:08:32,480
Let's just do a blue
color variable.

183
00:08:32,820 --> 00:08:35,425
Let's think that
we're going to be

184
00:08:35,425 --> 00:08:37,390
providing an RGB value here.

185
00:08:37,390 --> 00:08:44,560
Something that somehow changes
as we move in the loop.

186
00:08:44,560 --> 00:08:50,580
I'm going to use
the variable 255/20

187
00:08:50,580 --> 00:08:53,725
and I'm going to make

188
00:08:53,725 --> 00:08:57,130
sure that this division
returns a float,

189
00:08:57,130 --> 00:09:00,025
therefore I'm going to
give it a decimal place.

190
00:09:00,025 --> 00:09:03,250
What I'm doing is I know
that the channel of

191
00:09:03,250 --> 00:09:06,340
color that goes from 0-255,

192
00:09:06,340 --> 00:09:11,410
I'm going to divide it by
how many iterations we have.

193
00:09:11,410 --> 00:09:13,450
So this 20 is
equivalent to this one.

194
00:09:13,450 --> 00:09:14,995
We could actually
create a variable,

195
00:09:14,995 --> 00:09:17,620
and the most sensible thing
here would be a variable.

196
00:09:17,620 --> 00:09:20,185
There would be number of loops,

197
00:09:20,185 --> 00:09:22,420
or how many iterations so

198
00:09:22,420 --> 00:09:24,925
that we could just place
that variable here and here.

199
00:09:24,925 --> 00:09:26,950
Therefore, we're
creating an association

200
00:09:26,950 --> 00:09:29,320
between how many times we're

201
00:09:29,320 --> 00:09:31,120
running the loop and
how many times we are

202
00:09:31,120 --> 00:09:34,750
dividing the channel of color.

203
00:09:34,750 --> 00:09:37,675
In this case we actually
have that amount,

204
00:09:37,675 --> 00:09:39,370
it's not really changing any

205
00:09:39,370 --> 00:09:41,155
time because we're not using i.

206
00:09:41,155 --> 00:09:44,185
Let's multiply this value by i,

207
00:09:44,185 --> 00:09:48,490
meaning that we start with
a little bit of blue and we

208
00:09:48,490 --> 00:09:50,620
incrementally get more and

209
00:09:50,620 --> 00:09:52,345
more in that blue channel

210
00:09:52,345 --> 00:09:54,850
depending on where
we are in the loop.

211
00:09:54,850 --> 00:09:58,330
As you can see, we could use
this i variable for anything

212
00:09:58,330 --> 00:10:01,420
that we want to change
within the loop,

213
00:10:01,420 --> 00:10:05,290
and in this case is the color
as well as the position.

214
00:10:05,290 --> 00:10:11,260
Let's just do 0,
200, blue color.

215
00:10:11,260 --> 00:10:14,290
So as you can see anywhere

216
00:10:14,290 --> 00:10:16,000
in any primitive or any kind of

217
00:10:16,000 --> 00:10:20,560
styling function that you
have in fact a float,

218
00:10:20,560 --> 00:10:22,510
a variable, or an integer,

219
00:10:22,510 --> 00:10:24,970
you can actually create
your own variables that are

220
00:10:24,970 --> 00:10:29,710
calculating some change
and use that in there.

221
00:10:29,710 --> 00:10:31,720
So you can see now
that where it's not

222
00:10:31,720 --> 00:10:34,780
only position that is

223
00:10:34,780 --> 00:10:37,805
changing in the rectangle,
but it's also color.

224
00:10:37,805 --> 00:10:40,560
So this is I think for me where

225
00:10:40,560 --> 00:10:41,790
coding and learning how

226
00:10:41,790 --> 00:10:43,050
to code starts
getting interesting.

227
00:10:43,050 --> 00:10:44,640
When you start
realizing that you have

228
00:10:44,640 --> 00:10:46,665
all these primitives
to your disposition,

229
00:10:46,665 --> 00:10:48,570
you can repeat things
in many different ways,

230
00:10:48,570 --> 00:10:52,720
and then you can actually
start combining things in

231
00:10:52,720 --> 00:10:54,790
interesting ways
especially when you're

232
00:10:54,790 --> 00:10:58,450
actually looping through
a series or a sequence.

233
00:10:58,450 --> 00:11:01,945
So really a for loop starts

234
00:11:01,945 --> 00:11:05,095
really opening up for
code not to be very long,

235
00:11:05,095 --> 00:11:07,915
but being able to create small
code that actually creates

236
00:11:07,915 --> 00:11:11,365
a lot of content very quickly.

237
00:11:11,365 --> 00:11:12,880
So we're going to
leave this here.

238
00:11:12,880 --> 00:11:13,810
We're going to continue talking

239
00:11:13,810 --> 00:11:17,570
about for loops in the next
video. I'll see you then.