1
00:00:05,240 --> 00:00:07,540
Welcome to this new lesson.

2
00:00:07,540 --> 00:00:09,860
We're going to continue
working on the tool

3
00:00:09,860 --> 00:00:12,500
that we have been producing
in the past few videos.

4
00:00:12,500 --> 00:00:15,780
We're working with
different vector operations

5
00:00:15,780 --> 00:00:18,140
to construct a drawing.

6
00:00:18,140 --> 00:00:20,360
In the last session, we actually

7
00:00:20,360 --> 00:00:22,400
looked at predefined motions.

8
00:00:22,400 --> 00:00:24,420
We had four different
vectors and we can

9
00:00:24,420 --> 00:00:26,995
move between those four.

10
00:00:26,995 --> 00:00:30,455
In this session, we're going
to look into random motion.

11
00:00:30,455 --> 00:00:33,270
We have looked at random
motion in the past,

12
00:00:33,270 --> 00:00:35,790
but I would like to
bring back some of

13
00:00:35,790 --> 00:00:39,190
those ideas and expand
upon them so that we

14
00:00:39,190 --> 00:00:42,090
have something somewhere in
between complete randomness

15
00:00:42,090 --> 00:00:46,300
and also a predefined motion,

16
00:00:47,030 --> 00:00:49,470
a random that operates within

17
00:00:49,470 --> 00:00:52,340
a predefined set of variables.

18
00:00:52,340 --> 00:00:56,190
Let's jump into it. We're
here in processing.

19
00:00:56,190 --> 00:00:59,490
We're going to continue this
group that we started off.

20
00:00:59,490 --> 00:01:04,690
As you remember, we have
this rectangle that moves

21
00:01:04,690 --> 00:01:11,465
across four predefined vectors
that we have established.

22
00:01:11,465 --> 00:01:13,860
An invitation is to play with

23
00:01:13,860 --> 00:01:19,340
different movements,
different predefined vectors.

24
00:01:19,340 --> 00:01:22,965
The invitation is
also to consider,

25
00:01:22,965 --> 00:01:25,840
how do we change direction?

26
00:01:25,840 --> 00:01:27,080
This is a function in a way,

27
00:01:27,080 --> 00:01:28,900
so it really encapsulates

28
00:01:28,900 --> 00:01:30,920
all the logic of
changing direction.

29
00:01:30,920 --> 00:01:33,085
Currently, we are
moving in a loop,

30
00:01:33,085 --> 00:01:34,820
going from the first entity

31
00:01:34,820 --> 00:01:36,600
in the list to the second third,

32
00:01:36,600 --> 00:01:38,250
and then back to the first one.

33
00:01:38,250 --> 00:01:41,320
This is where we're going to
spend a bit of time today,

34
00:01:41,320 --> 00:01:44,150
really looking at what
we could do differently.

35
00:01:45,530 --> 00:01:48,935
I'm going to comment out.

36
00:01:48,935 --> 00:01:52,260
I like sometimes when
I'm tinkering with code,

37
00:01:52,260 --> 00:01:55,940
think maybe I'll come back
to some of these ideas.

38
00:01:55,940 --> 00:01:59,090
But instead of deleting this
completely and removing it,

39
00:01:59,090 --> 00:02:02,310
I would like to offer

40
00:02:02,310 --> 00:02:04,995
an alternative. What
would be the alternative?

41
00:02:04,995 --> 00:02:10,230
What we are calculating
is the index value.

42
00:02:10,230 --> 00:02:11,800
Here it's actually been swapped

43
00:02:11,800 --> 00:02:13,460
to the next one in the list,

44
00:02:13,460 --> 00:02:16,080
but we could also
use randomness.

45
00:02:16,080 --> 00:02:18,455
Let's make sure that we haven't

46
00:02:18,455 --> 00:02:23,250
imported the random
module from Python.

47
00:02:23,250 --> 00:02:26,680
Import random.

48
00:02:26,680 --> 00:02:32,750
We will need that. Now that
we have this index variable,

49
00:02:32,750 --> 00:02:34,920
we know that this
variable can be 0,

50
00:02:34,920 --> 00:02:37,020
1, 2, or three.

51
00:02:37,020 --> 00:02:45,265
Let's use random.randint
between 0-3.

52
00:02:45,265 --> 00:02:47,490
This is very much
what we have done in

53
00:02:47,490 --> 00:02:50,610
the past as a form
of random movement.

54
00:02:51,110 --> 00:02:55,690
Let's see what we're getting
out of this equation.

55
00:02:59,920 --> 00:03:08,495
I think we actually just got
the drawing left the screen.

56
00:03:08,495 --> 00:03:11,000
We will have to draw

57
00:03:11,000 --> 00:03:14,880
something that doesn't escape
the screen necessarily,

58
00:03:14,880 --> 00:03:16,820
or write a function that

59
00:03:16,820 --> 00:03:20,280
will keep the drawing
within the Canvas.

60
00:03:20,280 --> 00:03:22,280
The problem we're having
is that currently,

61
00:03:22,280 --> 00:03:24,440
if we look down here,

62
00:03:24,440 --> 00:03:28,030
this variable is set up
to a very high value.

63
00:03:28,030 --> 00:03:30,320
The change direction only
happens every 50 frames.

64
00:03:30,320 --> 00:03:31,880
Therefore, we're
allowing the rectangle

65
00:03:31,880 --> 00:03:33,095
to move quite a bit.

66
00:03:33,095 --> 00:03:35,540
Let's just reduce that to a 10.

67
00:03:35,540 --> 00:03:38,260
See what we're getting.

68
00:03:38,600 --> 00:03:44,740
You see we are getting
some random movement.

69
00:03:44,740 --> 00:03:48,340
This entity seems to go away
and come back sometimes.

70
00:03:48,340 --> 00:03:50,360
But that's actually
completely random.

71
00:03:50,360 --> 00:03:51,700
I still think that it's quite

72
00:03:51,700 --> 00:03:53,140
interesting where
it's happening,

73
00:03:53,140 --> 00:03:54,800
but this variable
is quite important.

74
00:03:54,800 --> 00:03:56,060
We're realizing
that the number of

75
00:03:56,060 --> 00:03:59,020
frames that we are using here,

76
00:03:59,020 --> 00:04:02,750
it's a key value to
manipulate the system.

77
00:04:02,750 --> 00:04:04,770
Let's create a variable,

78
00:04:04,770 --> 00:04:07,880
a variable that
will control that.

79
00:04:08,360 --> 00:04:11,880
Right here we have
been using that index.

80
00:04:11,880 --> 00:04:15,020
Let's just do one that
is called an integer.

81
00:04:15,020 --> 00:04:19,880
Next we're going to

82
00:04:19,880 --> 00:04:21,600
say that we're going

83
00:04:21,600 --> 00:04:24,100
to start with something
small, like five.

84
00:04:24,100 --> 00:04:27,980
Before that number, we were
hard coding that number.

85
00:04:27,980 --> 00:04:29,220
Just typing that number

86
00:04:29,220 --> 00:04:31,540
specifically in the code
where we needed it.

87
00:04:31,540 --> 00:04:33,600
But now if we make
it a variable,

88
00:04:33,600 --> 00:04:36,945
we can actually manipulate
it in different ways.

89
00:04:36,945 --> 00:04:40,020
Instead of being a
10 that is explicit,

90
00:04:40,020 --> 00:04:42,240
let's just use our variable.

91
00:04:42,240 --> 00:04:44,970
Now we're using a Number 5.

92
00:04:44,970 --> 00:04:49,570
We can control it all the way
from the top of our script.

93
00:04:49,580 --> 00:04:53,520
As you can see, the

94
00:04:53,520 --> 00:04:56,800
random movement it's
happening every five frames.

95
00:04:56,800 --> 00:05:00,085
There's nothing
stopping this rectangle

96
00:05:00,085 --> 00:05:03,080
to get out of the Canvas.

97
00:05:03,390 --> 00:05:07,090
That's something that
perhaps we want to avoid,

98
00:05:07,090 --> 00:05:09,760
but certainly it's working.

99
00:05:09,760 --> 00:05:12,520
We can actually do
something slightly smaller.

100
00:05:12,520 --> 00:05:14,690
There we go; three.

101
00:05:15,810 --> 00:05:20,740
You can see that this random
behavior is in fact working.

102
00:05:20,740 --> 00:05:22,960
But what happens is
that the change of

103
00:05:22,960 --> 00:05:26,215
direction is happening
every three frames,

104
00:05:26,215 --> 00:05:28,960
all the time, no matter what.

105
00:05:28,960 --> 00:05:32,830
We're moving
left-right basically

106
00:05:32,830 --> 00:05:35,425
in a random direction
every three frames.

107
00:05:35,425 --> 00:05:38,020
What if we would like
sometimes this distance

108
00:05:38,020 --> 00:05:41,450
to be small and
sometimes to be large.

109
00:05:41,450 --> 00:05:45,685
I like the sense of

110
00:05:45,685 --> 00:05:51,085
pixel graphic that is emerging
out of this behavior.

111
00:05:51,085 --> 00:05:54,310
But there's layers to

112
00:05:54,310 --> 00:05:55,945
the randomness that
we are producing.

113
00:05:55,945 --> 00:05:59,815
Because this is a
variable, now we can use

114
00:05:59,815 --> 00:06:03,790
the same random function
once more here.

115
00:06:03,790 --> 00:06:06,805
We could say that
the random flip,

116
00:06:06,805 --> 00:06:13,675
it's going to be also a
random int, a random value.

117
00:06:13,675 --> 00:06:17,170
Let's say when we were
working with three pixels,

118
00:06:17,170 --> 00:06:18,940
when we wanted to be very small.

119
00:06:18,940 --> 00:06:21,475
But maybe when we
want it to be larger,

120
00:06:21,475 --> 00:06:23,545
we want to make 20 pixels.

121
00:06:23,545 --> 00:06:24,925
It's going to be
a value between.

122
00:06:24,925 --> 00:06:29,515
Every time that we
calculate a new flip.

123
00:06:29,515 --> 00:06:32,020
We spend three frames in

124
00:06:32,020 --> 00:06:35,650
the first flip or in the
first change of direction,

125
00:06:35,650 --> 00:06:38,680
we calculate a new orientation
and we calculate how

126
00:06:38,680 --> 00:06:42,325
long it's going to
be the next cycle.

127
00:06:42,325 --> 00:06:45,700
If it's a 20 frame cycle,

128
00:06:45,700 --> 00:06:49,825
the motion is going to continue
straight for 20 frames,

129
00:06:49,825 --> 00:06:51,925
if it's a short cycle,
it's going to be three,

130
00:06:51,925 --> 00:06:55,585
but every cycle will
determine a random size

131
00:06:55,585 --> 00:07:00,025
or the random length of a
new cycle that comes after.

132
00:07:00,025 --> 00:07:01,825
This is a way of layering

133
00:07:01,825 --> 00:07:05,750
two different forms
of randomness.

134
00:07:06,090 --> 00:07:09,610
You can see some
of them are short.

135
00:07:09,610 --> 00:07:15,085
We're not seeing too
many longer ones.

136
00:07:15,085 --> 00:07:20,665
Let's just include this

137
00:07:20,665 --> 00:07:22,735
here to make sure that we are

138
00:07:22,735 --> 00:07:25,045
using in fact, the
global variable.

139
00:07:25,045 --> 00:07:27,340
You can see here now it's
actually registering.

140
00:07:27,340 --> 00:07:29,770
Some of them are long,
some of them are short.

141
00:07:29,770 --> 00:07:31,240
But we're starting to control

142
00:07:31,240 --> 00:07:33,250
that there's some
detail to the drawing,

143
00:07:33,250 --> 00:07:35,395
but sometimes there's a stretch.

144
00:07:35,395 --> 00:07:38,050
If we want the
stretch to be higher,

145
00:07:38,050 --> 00:07:41,960
we can put a much
larger number here,

146
00:07:43,260 --> 00:07:47,815
and you see here that the
drawing is heavily affected,

147
00:07:47,815 --> 00:07:49,720
I mean, if it stays
within the screen.

148
00:07:49,720 --> 00:07:52,180
Let's just do a function
that would actually

149
00:07:52,180 --> 00:07:55,750
fix the staying within
the screen situation.

150
00:07:55,750 --> 00:08:00,100
What we actually need is
a function that would be,

151
00:08:00,100 --> 00:08:03,830
let's call it stay
within canvas.

152
00:08:04,320 --> 00:08:06,920
Define.

153
00:08:14,520 --> 00:08:16,030
We have done

154
00:08:16,030 --> 00:08:17,290
a function like this before.

155
00:08:17,290 --> 00:08:21,100
We would like to say that
if the vector of position,

156
00:08:21,100 --> 00:08:24,650
let's just find the
variable that we are,

157
00:08:29,640 --> 00:08:33,010
the x coordinate of
the vector position,

158
00:08:33,010 --> 00:08:37,720
is bigger than the
size of the canvas.

159
00:08:37,720 --> 00:08:39,280
Let's find that variable.

160
00:08:39,280 --> 00:08:40,870
That's why everything we have

161
00:08:40,870 --> 00:08:42,940
done has been done with
variables because we

162
00:08:42,940 --> 00:08:45,130
want to make sure that
in case you decide to

163
00:08:45,130 --> 00:08:48,655
change the size of your
screen, you can do so.

164
00:08:48,655 --> 00:08:53,140
What happens if we reach
the limit of the canvas?

165
00:08:53,140 --> 00:08:55,975
Well, we want to make sure
that the velocity vector,

166
00:08:55,975 --> 00:09:01,540
let's find the velocity vector
which we are using here,

167
00:09:01,540 --> 00:09:05,020
the velocity vector
gets inverted.

168
00:09:05,020 --> 00:09:13,570
We can say velocity
vector.x *= -1.

169
00:09:13,570 --> 00:09:18,865
We flip the orientation
of the x axis.

170
00:09:18,865 --> 00:09:20,005
That's because we're reaching

171
00:09:20,005 --> 00:09:22,285
this particular boundary on x.

172
00:09:22,285 --> 00:09:24,490
Just for good measure as well,

173
00:09:24,490 --> 00:09:27,595
in case we added

174
00:09:27,595 --> 00:09:29,110
a large amount and
we somehow ended

175
00:09:29,110 --> 00:09:31,240
up quite far away in the canvas,

176
00:09:31,240 --> 00:09:34,700
we want to make sure
that the position,

177
00:09:35,300 --> 00:09:41,165
it's never bigger than
the position in x,

178
00:09:41,165 --> 00:09:44,545
is never bigger than
the size of the canvas.

179
00:09:44,545 --> 00:09:46,585
In case, for whatever reason

180
00:09:46,585 --> 00:09:48,220
we add a vector
that is let's say

181
00:09:48,220 --> 00:09:52,075
20 pixels or 20 units
outside the canvas,

182
00:09:52,075 --> 00:09:53,740
we want to make sure
that the vector

183
00:09:53,740 --> 00:09:56,125
never gets outside
that condition.

184
00:09:56,125 --> 00:09:58,450
That's the condition for one of

185
00:09:58,450 --> 00:10:04,690
the thresholds of the screen.

186
00:10:04,690 --> 00:10:07,240
We have to repeat
these four times.

187
00:10:07,240 --> 00:10:12,985
We're going to do, if x
is smaller, times zero,

188
00:10:12,985 --> 00:10:20,065
zero being the leftmost
edge of the screen.

189
00:10:20,065 --> 00:10:22,770
We will make sure the vector

190
00:10:22,770 --> 00:10:25,590
doesn't become anything
smaller than zero,

191
00:10:25,590 --> 00:10:26,910
and we also invert,

192
00:10:26,910 --> 00:10:29,655
maintain the inversion
of the velocity.

193
00:10:29,655 --> 00:10:34,255
With then these two
conditions for the x and y,

194
00:10:34,255 --> 00:10:36,010
we can do that now for

195
00:10:36,010 --> 00:10:41,320
the x in both sides

196
00:10:41,320 --> 00:10:45,800
and now we're going to do it
to the y coordinate as well.

197
00:10:45,800 --> 00:10:48,890
Let's make sure we add.

198
00:10:51,990 --> 00:10:55,700
Y everywhere, here.

199
00:11:00,630 --> 00:11:05,740
I think this staying canvas
function should work,

200
00:11:05,740 --> 00:11:07,660
is just a series of if
statements that are

201
00:11:07,660 --> 00:11:11,230
creating certain constraints
for our velocity.

202
00:11:11,230 --> 00:11:12,790
We do need to invoke

203
00:11:12,790 --> 00:11:17,755
this function somewhere
within our draw.

204
00:11:17,755 --> 00:11:19,480
Stay within canvas.

205
00:11:19,480 --> 00:11:25,330
We'll do it just after
the velocity gets added.

206
00:11:25,330 --> 00:11:31,040
We could do it actually
just before here,

207
00:11:31,110 --> 00:11:37,210
making sure that the
velocities are correct.

208
00:11:37,210 --> 00:11:39,850
Let's see if we get,

209
00:11:39,850 --> 00:11:42,650
we have this motion.

210
00:11:42,750 --> 00:11:45,280
Sometimes it's randomly very

211
00:11:45,280 --> 00:11:48,770
small and sometimes
actually stretch,

212
00:11:49,980 --> 00:11:53,930
but we could see that as
much as it might want to.

213
00:11:55,020 --> 00:11:58,615
I do see some diagonals
here and some errors here.

214
00:11:58,615 --> 00:12:00,640
I think our function,

215
00:12:00,640 --> 00:12:03,290
it's having some errors.

216
00:12:03,840 --> 00:12:07,075
Let's just double check.

217
00:12:07,075 --> 00:12:09,880
I spent a bit of time debugging

218
00:12:09,880 --> 00:12:12,325
and really calibrating
the behavior.

219
00:12:12,325 --> 00:12:14,695
I think that we
realized that we had

220
00:12:14,695 --> 00:12:18,010
a few missing elements here.

221
00:12:18,010 --> 00:12:19,960
Let's just make sure
that we include

222
00:12:19,960 --> 00:12:22,910
some of the global flag here.

223
00:12:25,290 --> 00:12:27,700
Make sure that we're
affecting in fact

224
00:12:27,700 --> 00:12:31,390
the position and
the actual position

225
00:12:31,390 --> 00:12:34,370
of the entity and the velocity.

226
00:12:35,190 --> 00:12:38,710
That's one thing. The
other important thing,

227
00:12:38,710 --> 00:12:40,495
you can play with some
of these variables.

228
00:12:40,495 --> 00:12:42,115
I don't think the
bouncing effect

229
00:12:42,115 --> 00:12:44,080
is necessarily what
we're looking for.

230
00:12:44,080 --> 00:12:46,510
We just want to make
sure that we want

231
00:12:46,510 --> 00:12:47,710
the behavior of the entity

232
00:12:47,710 --> 00:12:49,975
never to go outside the canvas.

233
00:12:49,975 --> 00:12:57,715
I'm going to comment out
the velocity change.

234
00:12:57,715 --> 00:13:00,910
We're only going to constrain
the position of the vector

235
00:13:00,910 --> 00:13:04,645
at the moment with the
size of the canvas.

236
00:13:04,645 --> 00:13:08,230
The caveat here is that
because the rectangle is

237
00:13:08,230 --> 00:13:11,530
drawn from the top
left most corner,

238
00:13:11,530 --> 00:13:13,270
if you want to

239
00:13:13,270 --> 00:13:17,635
consider that the rectangle
itself doesn't get out,

240
00:13:17,635 --> 00:13:19,165
it would look in the bottom,

241
00:13:19,165 --> 00:13:22,060
and in the right it
actually gets out,

242
00:13:22,060 --> 00:13:24,220
but it would actually
just be on the edge.

243
00:13:24,220 --> 00:13:28,210
You might want to
include an offset for

244
00:13:28,210 --> 00:13:33,520
the size y and the size x.

245
00:13:33,520 --> 00:13:36,865
The offset should be the
size of the rectangle,

246
00:13:36,865 --> 00:13:41,125
which in our case is all the
way down here, value of 50.

247
00:13:41,125 --> 00:13:43,375
Let's just see if
this is working,

248
00:13:43,375 --> 00:13:45,220
and then we can add the offset

249
00:13:45,220 --> 00:13:48,805
and we can actually discuss
the final behavior.

250
00:13:48,805 --> 00:13:54,010
As you can see here, we have
the two forms of randomness,

251
00:13:54,010 --> 00:13:56,650
one being very small,

252
00:13:56,650 --> 00:13:59,450
another one being larger.

253
00:13:59,520 --> 00:14:03,730
We can actually get very
granular moments in the piece,

254
00:14:03,730 --> 00:14:06,115
but sometimes we actually
get this kind of stretch.

255
00:14:06,115 --> 00:14:08,320
Of course, it looks something
like a screen saver,

256
00:14:08,320 --> 00:14:10,975
something like a snake game.

257
00:14:10,975 --> 00:14:12,820
But there's so many
places where you can

258
00:14:12,820 --> 00:14:14,635
take a design like this.

259
00:14:14,635 --> 00:14:17,785
You are having the
power to define

260
00:14:17,785 --> 00:14:22,660
very specific vectors that
define your composition.

261
00:14:22,660 --> 00:14:28,310
You are also looking
at ingredient of time,

262
00:14:28,310 --> 00:14:31,365
basically color
being manipulated by

263
00:14:31,365 --> 00:14:33,690
the bouncing effect of colors

264
00:14:33,690 --> 00:14:37,120
operating between
the spectrum of RGB.

265
00:14:37,130 --> 00:14:44,230
You are also randomizing
the intervals of movement.

266
00:14:44,230 --> 00:14:46,240
You can actually have
very regular movements

267
00:14:46,240 --> 00:14:47,740
as we saw in the last screen,

268
00:14:47,740 --> 00:14:49,990
where you could actually
create a rectangle

269
00:14:49,990 --> 00:14:52,645
or open up the door to do

270
00:14:52,645 --> 00:14:57,450
something quite abstract with

271
00:14:57,450 --> 00:14:59,160
a sense of randomness to it.

272
00:14:59,160 --> 00:15:00,480
We really wanted to provide

273
00:15:00,480 --> 00:15:02,385
a tool in the second lesson that

274
00:15:02,385 --> 00:15:05,590
use vectors not only in
a very fluid motion,

275
00:15:05,590 --> 00:15:06,970
which is certainly impossible,

276
00:15:06,970 --> 00:15:10,120
but also something that
could be very compositional

277
00:15:10,120 --> 00:15:15,355
and a good driver for
interesting graphic design.

278
00:15:15,355 --> 00:15:16,930
We're going to leave
this session here.

279
00:15:16,930 --> 00:15:18,940
We're going to be having
a discussion about

280
00:15:18,940 --> 00:15:20,230
the design outputs and what you

281
00:15:20,230 --> 00:15:22,135
will be doing with the content.

282
00:15:22,135 --> 00:15:23,800
But I'll see you in

283
00:15:23,800 --> 00:15:25,615
the next week where we're
going to start looking at

284
00:15:25,615 --> 00:15:31,190
object oriented code and
classes. I'll see you then.