1
00:00:05,200 --> 00:00:07,720
Welcome to this new lesson.

2
00:00:07,720 --> 00:00:09,480
In this new lesson,

3
00:00:09,480 --> 00:00:10,780
we're going to continue

4
00:00:10,780 --> 00:00:15,015
our series on drawing
with vectors.

5
00:00:15,015 --> 00:00:18,110
We have been doing this for
a couple of sessions now.

6
00:00:18,110 --> 00:00:20,110
We started learning about

7
00:00:20,110 --> 00:00:23,970
some vector operations, how
addition, substraction,

8
00:00:23,970 --> 00:00:28,050
scaling, normalizing
these vector operations

9
00:00:28,050 --> 00:00:30,390
allow us to really
manipulate how vectors move.

10
00:00:30,390 --> 00:00:33,245
Then we started creating
something like a drawing tool.

11
00:00:33,245 --> 00:00:36,290
Let's jump directly
into processing.

12
00:00:36,290 --> 00:00:38,710
What we're going to
be doing this session

13
00:00:38,710 --> 00:00:40,530
is instead of just
following the mouse,

14
00:00:40,530 --> 00:00:42,270
is starting to learn how we can

15
00:00:42,270 --> 00:00:47,190
predefine particular motions
that we might want to have.

16
00:00:47,190 --> 00:00:48,550
We don't always want to create

17
00:00:48,550 --> 00:00:49,850
these fluid motions and if

18
00:00:49,850 --> 00:00:51,430
that's what you're
going forward,

19
00:00:51,430 --> 00:00:52,730
by all means you can

20
00:00:52,730 --> 00:00:54,130
work with some of the
previous sessions.

21
00:00:54,130 --> 00:00:56,370
But we also want to
give you options

22
00:00:56,370 --> 00:00:58,430
to have very purposeful,

23
00:00:58,430 --> 00:01:00,830
maybe orthogonal, or
particular motions

24
00:01:00,830 --> 00:01:02,605
that have specific angles.

25
00:01:02,605 --> 00:01:05,390
How could we play
with data structures

26
00:01:05,390 --> 00:01:06,550
that we've been doing in

27
00:01:06,550 --> 00:01:11,305
the past on this session
or in this Week 1,

28
00:01:11,305 --> 00:01:15,390
and also mix that with the
tools that we have right now.

29
00:01:15,390 --> 00:01:17,530
Let's go into
processing. We're going

30
00:01:17,530 --> 00:01:19,430
to continue where we left off.

31
00:01:19,430 --> 00:01:24,230
We have this drawing
tool which is very nice.

32
00:01:24,230 --> 00:01:27,530
We have things
working very well.

33
00:01:27,530 --> 00:01:32,330
Let's get rid a little
bit of the material here.

34
00:01:32,330 --> 00:01:37,070
All the vector motion
content is something we can

35
00:01:37,070 --> 00:01:39,240
get rid of because

36
00:01:39,240 --> 00:01:40,980
we're not going to be
following the mouse anymore.

37
00:01:40,980 --> 00:01:44,750
But we do want to keep this
ellipse that changes color.

38
00:01:44,750 --> 00:01:48,660
This is going to be our
framework for the drawing.

39
00:01:49,350 --> 00:01:52,050
If we go further back,

40
00:01:52,050 --> 00:01:55,980
we won't need the
acceleration vector,

41
00:01:55,980 --> 00:01:59,185
but I'm going to leave it
there just for good measure.

42
00:01:59,185 --> 00:02:02,080
In case we actually
do need it we can

43
00:02:02,080 --> 00:02:05,750
actually use it, so we have it.

44
00:02:05,750 --> 00:02:09,530
What I would like to
do here is first to

45
00:02:09,530 --> 00:02:14,280
start identifying what I
would call possible vectors.

46
00:02:14,280 --> 00:02:16,065
This is going to be a list.

47
00:02:16,065 --> 00:02:18,420
Let's do a list of

48
00:02:18,420 --> 00:02:23,240
possible vectors or
possible velocities.

49
00:02:23,240 --> 00:02:29,510
Because it's going to
be a series of vectors,

50
00:02:29,510 --> 00:02:31,290
but they're going to represent

51
00:02:31,290 --> 00:02:35,410
the possible motions
of our entity.

52
00:02:36,390 --> 00:02:39,520
To this list,

53
00:02:39,520 --> 00:02:46,470
we're going to append a vector.

54
00:02:46,470 --> 00:02:48,590
Before we haven't
been using vectors.

55
00:02:48,590 --> 00:02:50,730
Now we understand vectors,

56
00:02:50,730 --> 00:02:53,300
we can actually
copy paste a vector

57
00:02:53,300 --> 00:02:57,890
here and let's just include
that into our list.

58
00:02:59,050 --> 00:03:02,610
The first vector that
we want to include,

59
00:03:02,610 --> 00:03:05,930
it's going to be moving
five units in x.

60
00:03:05,930 --> 00:03:09,970
It's going to be a motion
towards the right.

61
00:03:10,340 --> 00:03:12,820
It could be a one if you want,

62
00:03:12,820 --> 00:03:16,640
but we can keep it five for now.

63
00:03:16,640 --> 00:03:19,100
I'm going to copy this line

64
00:03:19,100 --> 00:03:21,620
four times because
I want to create

65
00:03:21,620 --> 00:03:27,680
four possible motions that
this vector might have.

66
00:03:27,680 --> 00:03:35,850
It could be 5 in x,

67
00:03:35,850 --> 00:03:41,160
5 in y, -5 in x,

68
00:03:41,160 --> 00:03:44,050
and -5 in y.

69
00:03:47,450 --> 00:03:50,530
What this is giving us is a list

70
00:03:50,530 --> 00:03:53,550
of four possible motions.

71
00:03:53,550 --> 00:03:54,990
What we're going to be calling

72
00:03:54,990 --> 00:03:59,545
it is the possible movements
that our entity can have.

73
00:03:59,545 --> 00:04:02,590
If you remember some
old video games,

74
00:04:02,590 --> 00:04:05,570
the characters could
only move forward,

75
00:04:05,570 --> 00:04:07,200
backwards, left, or right.

76
00:04:07,200 --> 00:04:09,290
There's only a handful of moves

77
00:04:09,290 --> 00:04:11,760
that those characters
could make.

78
00:04:11,760 --> 00:04:13,110
Along those lines,

79
00:04:13,110 --> 00:04:15,870
those are predefined motions.

80
00:04:15,870 --> 00:04:19,590
In graphic design, and
within a particular design,

81
00:04:19,590 --> 00:04:21,570
you might know that you have

82
00:04:21,570 --> 00:04:23,905
a vocabulary of
moves if you want,

83
00:04:23,905 --> 00:04:27,145
vocabulary of motions that
you might want to consider.

84
00:04:27,145 --> 00:04:31,130
If you are considering
specific orthogonal moves,

85
00:04:31,130 --> 00:04:33,150
maybe of different distances,

86
00:04:33,150 --> 00:04:38,550
those could be pre written
within a list structure.

87
00:04:38,550 --> 00:04:40,150
That's what we're doing
right now. We're going

88
00:04:40,150 --> 00:04:42,110
to be mixing a data structure of

89
00:04:42,110 --> 00:04:45,710
a list and to give ourselves
some possible motions.

90
00:04:45,710 --> 00:04:48,430
Again, you could include
other motions, diagonals,

91
00:04:48,430 --> 00:04:51,700
if you want, or particular
angles that you find.

92
00:04:51,700 --> 00:04:53,480
Interesting, but
right now I'm just

93
00:04:53,480 --> 00:04:55,700
going to keep it
quite orthogonal.

94
00:04:55,700 --> 00:05:00,200
The next thing I would like
to do is identify which

95
00:05:00,200 --> 00:05:04,130
is the current motion
we are following.

96
00:05:04,130 --> 00:05:05,630
For that I'm going
to use a variable

97
00:05:05,630 --> 00:05:07,385
that will be an index variable,

98
00:05:07,385 --> 00:05:11,390
so an integer, and I'm going to

99
00:05:11,390 --> 00:05:17,390
call current velocity index.

100
00:05:17,390 --> 00:05:19,685
I'm going to start with zero.

101
00:05:19,685 --> 00:05:22,520
This variable, I like
these long names

102
00:05:22,520 --> 00:05:24,110
because they're
quite descriptive

103
00:05:24,110 --> 00:05:25,130
of what they're trying to do,

104
00:05:25,130 --> 00:05:27,815
it's an integer of
the current velocity.

105
00:05:27,815 --> 00:05:29,240
Out of the four
velocities we're going

106
00:05:29,240 --> 00:05:30,800
to be picking the first one,

107
00:05:30,800 --> 00:05:33,695
so the index 0 in the list.

108
00:05:33,695 --> 00:05:38,540
That is the velocity that we're
going to be working with.

109
00:05:38,540 --> 00:05:47,270
Then let's assign that velocity
to the vector velocity.

110
00:05:47,270 --> 00:05:50,850
So velocity vector equals,

111
00:05:51,190 --> 00:05:54,290
we can use the list axis.

112
00:05:54,290 --> 00:05:56,360
This is the way the list with

113
00:05:56,360 --> 00:05:58,625
all the vectors with
square brackets,

114
00:05:58,625 --> 00:06:01,650
we can now identify

115
00:06:01,650 --> 00:06:04,255
which is the index that we're
going to be working with,

116
00:06:04,255 --> 00:06:06,625
and we're going to
use this variable

117
00:06:06,625 --> 00:06:09,355
which is a variable zero.

118
00:06:09,355 --> 00:06:11,230
The current velocity will

119
00:06:11,230 --> 00:06:15,350
be the first entity
of this list.

120
00:06:15,350 --> 00:06:18,410
I hope that you're following
like if you're unfamiliar

121
00:06:18,410 --> 00:06:20,840
with the data structure
of the list and

122
00:06:20,840 --> 00:06:23,030
how indices are used to

123
00:06:23,030 --> 00:06:25,790
identify multiple
entities within a list.

124
00:06:25,790 --> 00:06:28,355
But go back to see Week 1,

125
00:06:28,355 --> 00:06:29,900
we spent quite a bit of

126
00:06:29,900 --> 00:06:32,210
time working with
list operations.

127
00:06:32,210 --> 00:06:34,460
We're hoping that
you are up to speed

128
00:06:34,460 --> 00:06:36,665
with that content at this point.

129
00:06:36,665 --> 00:06:38,945
So now that we
have the velocity,

130
00:06:38,945 --> 00:06:42,320
let's just see how this
velocity affects our ellipse.

131
00:06:42,320 --> 00:06:45,320
Or we can actually change a
little bit the graphic of it,

132
00:06:45,320 --> 00:06:50,870
but we want to add this
velocity to the motion.

133
00:06:50,870 --> 00:06:52,640
All the way down here where we

134
00:06:52,640 --> 00:06:54,680
actually are drawing
this ellipse,

135
00:06:54,680 --> 00:07:02,180
let's just say vector_position.add
the vector of,

136
00:07:02,180 --> 00:07:06,540
you can go and find it,
the vector of velocity.

137
00:07:09,940 --> 00:07:13,445
Let's just play that. Let's
see if we're having an error.

138
00:07:13,445 --> 00:07:19,235
As expected, we are moving
five units to the right.

139
00:07:19,235 --> 00:07:23,060
This time we're going to bring
back this to a rectangle.

140
00:07:23,060 --> 00:07:24,530
I think this drawing,

141
00:07:24,530 --> 00:07:27,890
because we're going to be
working with orthogonal motion,

142
00:07:27,890 --> 00:07:35,900
make most sense if we use
a rectangular graphic.

143
00:07:35,900 --> 00:07:38,015
What do we want to happen?

144
00:07:38,015 --> 00:07:42,770
We want to change direction
at a given point.

145
00:07:42,770 --> 00:07:44,585
So we are moving to the right,

146
00:07:44,585 --> 00:07:48,140
and at some point we want to
shift and start moving down.

147
00:07:48,140 --> 00:07:51,170
Or basically the next
vector in the list.

148
00:07:51,170 --> 00:07:54,155
For that, I would like
to create a function.

149
00:07:54,155 --> 00:07:56,360
So let's just create a function

150
00:07:56,360 --> 00:07:59,465
maybe before the set up here,

151
00:07:59,465 --> 00:08:01,160
I think we need to
start getting more

152
00:08:01,160 --> 00:08:03,620
used to defining functions.

153
00:08:03,620 --> 00:08:08,100
Let's call it change_direction.

154
00:08:10,480 --> 00:08:14,615
So change_direction,
we are going to

155
00:08:14,615 --> 00:08:19,650
get the global velocity vector,

156
00:08:21,970 --> 00:08:25,280
and the current index.

157
00:08:25,280 --> 00:08:27,320
These are two variables that we

158
00:08:27,320 --> 00:08:30,140
will be needing
in this function.

159
00:08:30,140 --> 00:08:32,090
Whenever we change direction,

160
00:08:32,090 --> 00:08:33,590
this is going to be
executed whenever

161
00:08:33,590 --> 00:08:35,120
we call this function once,

162
00:08:35,120 --> 00:08:37,130
we're going to say
that the current index

163
00:08:37,130 --> 00:08:39,095
plus equals one.

164
00:08:39,095 --> 00:08:42,185
If it's zero, it's going
to go to the next vector.

165
00:08:42,185 --> 00:08:45,590
We're going to looping through

166
00:08:45,590 --> 00:08:49,355
the vector list that we have.

167
00:08:49,355 --> 00:08:51,365
We also want to make sure that

168
00:08:51,365 --> 00:08:57,270
if the index is
bigger than three,

169
00:08:57,370 --> 00:09:01,595
then the index becomes zero.

170
00:09:01,595 --> 00:09:04,325
It's a way of making sure that

171
00:09:04,325 --> 00:09:08,600
whenever we reach the
last element of the list,

172
00:09:08,600 --> 00:09:10,670
if you think of the list
being these four elements,

173
00:09:10,670 --> 00:09:12,470
we start at zero,
we move to one,

174
00:09:12,470 --> 00:09:13,895
and then we move
to two, to three.

175
00:09:13,895 --> 00:09:15,410
When we reach three,

176
00:09:15,410 --> 00:09:17,045
and we're supposed to do four,

177
00:09:17,045 --> 00:09:18,560
we go back to zero.

178
00:09:18,560 --> 00:09:24,175
So we are looping through
those four possible options.

179
00:09:24,175 --> 00:09:30,765
Finally, we are going to say
that the velocity vector,

180
00:09:30,765 --> 00:09:36,225
basically the same operation
here that we actually copy,

181
00:09:36,225 --> 00:09:37,755
we can copy paste that here.

182
00:09:37,755 --> 00:09:39,690
The last line of this function

183
00:09:39,690 --> 00:09:41,790
says the velocity vector will

184
00:09:41,790 --> 00:09:44,190
become out of the list of

185
00:09:44,190 --> 00:09:47,040
all possible options,
the current index.

186
00:09:47,040 --> 00:09:49,110
Basically what we're doing
is just manipulating

187
00:09:49,110 --> 00:09:51,900
the index of the list to

188
00:09:51,900 --> 00:09:56,415
loop through the four
possible vectors

189
00:09:56,415 --> 00:09:58,605
that we have pre-described.

190
00:09:58,605 --> 00:10:01,800
Instead of calculating
new vectors all the time,

191
00:10:01,800 --> 00:10:04,350
we are actually
pre-defining a series

192
00:10:04,350 --> 00:10:07,905
of moves and then
looping through those.

193
00:10:07,905 --> 00:10:10,560
The function is
ready. We can use it.

194
00:10:10,560 --> 00:10:13,785
The question is when
and how do we use it?

195
00:10:13,785 --> 00:10:18,090
Just before here,

196
00:10:18,090 --> 00:10:21,195
if we would change
direction every frame,

197
00:10:21,195 --> 00:10:26,085
we will basically stay
practically in the same place.

198
00:10:26,085 --> 00:10:28,590
It's just going to be
like five units moving

199
00:10:28,590 --> 00:10:31,215
very quickly between
the different motion.

200
00:10:31,215 --> 00:10:33,120
We're going to do a little
trick here which is,

201
00:10:33,120 --> 00:10:36,285
or a line of code that
would allow us to execute

202
00:10:36,285 --> 00:10:39,840
this function every 25 frames.

203
00:10:39,840 --> 00:10:41,850
We're going to use
time to execute

204
00:10:41,850 --> 00:10:44,610
this function every 25 frames.

205
00:10:44,610 --> 00:10:54,435
We're going to say if frame
count modulo 25 equals zero.

206
00:10:54,435 --> 00:10:57,045
Let's just understand
what this line means.

207
00:10:57,045 --> 00:10:59,310
This line is saying
the frame count is

208
00:10:59,310 --> 00:11:01,575
an internal variable that

209
00:11:01,575 --> 00:11:04,560
works within processing that
is counting every frame,

210
00:11:04,560 --> 00:11:07,810
1, 2, 3, 4 forever.

211
00:11:08,540 --> 00:11:11,760
This modulo operation gives me

212
00:11:11,760 --> 00:11:14,235
the remainder. What
is the remainder?

213
00:11:14,235 --> 00:11:16,545
If I divide the number

214
00:11:16,545 --> 00:11:21,060
100/25 it fits four
times within that 100,

215
00:11:21,060 --> 00:11:22,710
so the remainder is zero.

216
00:11:22,710 --> 00:11:25,620
That means that I've gone in

217
00:11:25,620 --> 00:11:29,190
the increment of 25 frames
without any remainder.

218
00:11:29,190 --> 00:11:32,250
If the remainder is
one, for instance,

219
00:11:32,250 --> 00:11:33,675
the number is 101,

220
00:11:33,675 --> 00:11:36,870
25 will fit four times and
the remainder will be one.

221
00:11:36,870 --> 00:11:38,535
This won't happen.

222
00:11:38,535 --> 00:11:41,040
This is a quick way of saying I

223
00:11:41,040 --> 00:11:44,805
want this to happen
every 25 frames,

224
00:11:44,805 --> 00:11:46,890
and the function, we need

225
00:11:46,890 --> 00:11:50,445
to use the name of the
function which is,

226
00:11:50,445 --> 00:11:52,140
let's just go and
get the exact name,

227
00:11:52,140 --> 00:11:54,430
just not to misspell it.

228
00:11:54,680 --> 00:11:57,855
We're going to say
every 25 frames.

229
00:11:57,855 --> 00:11:59,310
Traditionally we've written if

230
00:11:59,310 --> 00:12:01,710
statements down here indented,

231
00:12:01,710 --> 00:12:04,930
but we could also
write it in line.

232
00:12:04,930 --> 00:12:08,605
You can say this, if

233
00:12:08,605 --> 00:12:13,230
every 25 frames we
can change direction.

234
00:12:13,230 --> 00:12:17,235
As you prefer, I can
leave it indented here,

235
00:12:17,235 --> 00:12:19,170
but for this particular case,

236
00:12:19,170 --> 00:12:21,525
we can leave it as a one line.

237
00:12:21,525 --> 00:12:23,490
Just make a comment
here, because

238
00:12:23,490 --> 00:12:25,600
this is a very important line,

239
00:12:25,760 --> 00:12:31,320
a call the change direction

240
00:12:31,320 --> 00:12:38,380
function every 25 frames.

241
00:12:39,710 --> 00:12:43,200
At this point, let's
see what we are having.

242
00:12:43,200 --> 00:12:45,180
We should be able to see

243
00:12:45,180 --> 00:12:51,870
our rectangle moving
and creating a square.

244
00:12:51,870 --> 00:12:54,285
This is in fact working.

245
00:12:54,285 --> 00:12:56,715
We have the behavior
that we intended.

246
00:12:56,715 --> 00:12:58,710
If we would like this to operate

247
00:12:58,710 --> 00:13:00,735
at the center of the screen,

248
00:13:00,735 --> 00:13:02,730
the only important thing

249
00:13:02,730 --> 00:13:04,020
that we need to make
sure is that we

250
00:13:04,020 --> 00:13:07,230
actually position the
vector initially.

251
00:13:07,230 --> 00:13:09,900
The position, we could
say something like what

252
00:13:09,900 --> 00:13:12,330
would be something like

253
00:13:12,330 --> 00:13:18,000
500 and maybe 200
understanding the motion.

254
00:13:18,000 --> 00:13:19,980
If you want to be more precise

255
00:13:19,980 --> 00:13:22,680
about how you can do the math,

256
00:13:22,680 --> 00:13:23,730
basically to calculate that

257
00:13:23,730 --> 00:13:25,350
this rectangle is
exactly in the center,

258
00:13:25,350 --> 00:13:30,375
but I think that for now
this could be good enough.

259
00:13:30,375 --> 00:13:34,680
As you can see, these are
the four motions that

260
00:13:34,680 --> 00:13:36,570
we pre-described and we are

261
00:13:36,570 --> 00:13:39,420
triggering them every 25 frames,

262
00:13:39,420 --> 00:13:42,075
changing through the function.

263
00:13:42,075 --> 00:13:45,570
If you make this
variable 25 ever,

264
00:13:45,570 --> 00:13:48,660
so slightly bigger 30,

265
00:13:48,660 --> 00:13:53,290
you're going to increment
the size of that rectangle.

266
00:13:54,080 --> 00:13:59,235
You can actually
go even further.

267
00:13:59,235 --> 00:14:00,330
Obviously you're going
to start getting

268
00:14:00,330 --> 00:14:01,920
out of the screen at some point.

269
00:14:01,920 --> 00:14:03,720
We're mixing a few things here.

270
00:14:03,720 --> 00:14:05,400
We're mixing vector motion.

271
00:14:05,400 --> 00:14:09,090
We're mixing lists to

272
00:14:09,090 --> 00:14:13,080
pre-define the vector motions
that we would like to us,

273
00:14:13,080 --> 00:14:14,430
and we are using a function

274
00:14:14,430 --> 00:14:16,230
and the temporality of invoking

275
00:14:16,230 --> 00:14:18,120
this function over time just

276
00:14:18,120 --> 00:14:20,535
to execute this
change of direction,

277
00:14:20,535 --> 00:14:23,535
purposefully to achieve
a larger figure.

278
00:14:23,535 --> 00:14:25,530
We're going to leave it
here. There's a lot of

279
00:14:25,530 --> 00:14:27,735
interesting things what we
can do with this set up,

280
00:14:27,735 --> 00:14:29,940
so we're going to
continue exploring those

281
00:14:29,940 --> 00:14:32,740
in the next few videos.
I'll see you then.