1
00:00:05,180 --> 00:00:07,540
Welcome to this new video.

2
00:00:07,540 --> 00:00:10,420
In this conclusion of Week 1,

3
00:00:10,420 --> 00:00:12,360
we are going to be putting
everything together.

4
00:00:12,360 --> 00:00:14,860
We're going to start
building a drawing,

5
00:00:14,860 --> 00:00:18,020
really thinking through
design problems,

6
00:00:18,020 --> 00:00:20,340
and really trying to
use data structures

7
00:00:20,340 --> 00:00:23,280
in a way in which we could
be creative with them.

8
00:00:23,280 --> 00:00:24,420
We're going to be using

9
00:00:24,420 --> 00:00:26,160
all the different tools
that we learned this week.

10
00:00:26,160 --> 00:00:28,040
We're going to learn about how

11
00:00:28,040 --> 00:00:30,255
to use typography
together with lists,

12
00:00:30,255 --> 00:00:32,340
at the same time, how do
we use color palettes

13
00:00:32,340 --> 00:00:35,105
to incorporate color
and some interactivity.

14
00:00:35,105 --> 00:00:38,540
Let's get started. We're
here in processing,

15
00:00:38,540 --> 00:00:42,260
let's just start our canvas by

16
00:00:42,260 --> 00:00:45,800
defining the image size

17
00:00:45,800 --> 00:00:47,460
that we're going to
be working with.

18
00:00:47,460 --> 00:00:51,665
We've been working with
this size of 1,200,

19
00:00:51,665 --> 00:00:53,960
we're going to do
actually an image size

20
00:00:53,960 --> 00:00:56,510
in X just to be more

21
00:00:56,510 --> 00:01:02,895
specific and Y it's
going to be 600.

22
00:01:02,895 --> 00:01:04,970
This is something that you
will be able to change,

23
00:01:04,970 --> 00:01:06,690
but again, we want to create

24
00:01:06,690 --> 00:01:08,790
a template that would
be useful for us.

25
00:01:08,790 --> 00:01:10,490
Let's just make sure that we can

26
00:01:10,490 --> 00:01:14,380
get started with the
set up as we often do.

27
00:01:15,500 --> 00:01:19,030
We're going to do a background.

28
00:01:19,340 --> 00:01:26,250
Let's just start with
a black background,

29
00:01:26,250 --> 00:01:31,395
and size, we'll do
our variables here.

30
00:01:31,395 --> 00:01:34,300
We have something to work with

31
00:01:35,030 --> 00:01:39,480
and we will be
taking it as we go.

32
00:01:39,480 --> 00:01:41,160
We have a black background.

33
00:01:41,160 --> 00:01:43,600
If you want to make
it more visible,

34
00:01:43,600 --> 00:01:47,400
you can make it red background.

35
00:01:47,400 --> 00:01:48,990
with our RGBs.

36
00:01:48,990 --> 00:01:50,580
But we will be replacing

37
00:01:50,580 --> 00:01:53,080
this with hexadecimal
system that we've

38
00:01:53,080 --> 00:01:54,400
been using so far in

39
00:01:54,400 --> 00:01:55,880
the past so that we

40
00:01:55,880 --> 00:01:57,900
could actually connect
it to a color palette.

41
00:01:57,900 --> 00:02:00,300
What do we want to do here?

42
00:02:00,300 --> 00:02:02,640
The drawing that I'm going
to try to work with you here

43
00:02:02,640 --> 00:02:04,380
is very similar to

44
00:02:04,380 --> 00:02:06,060
what we've been doing
before but really,

45
00:02:06,060 --> 00:02:08,260
I want to be able to paint with

46
00:02:08,260 --> 00:02:12,220
fonts in the screen using
our color palette system.

47
00:02:12,220 --> 00:02:16,000
It's still a very abstract
drawing in a way,

48
00:02:16,000 --> 00:02:18,220
but it's trying to be aware of

49
00:02:18,220 --> 00:02:22,000
how different a finite
number of symbols,

50
00:02:22,000 --> 00:02:25,000
in this case text symbols,

51
00:02:25,000 --> 00:02:29,445
could actually be used for
a form of painting tool.

52
00:02:29,445 --> 00:02:31,180
I think that that
could actually be

53
00:02:31,180 --> 00:02:32,500
an interesting exercise putting

54
00:02:32,500 --> 00:02:34,020
together everything
that we've done.

55
00:02:34,020 --> 00:02:36,400
We will start by

56
00:02:36,400 --> 00:02:40,505
creating what I would
call possible characters.

57
00:02:40,505 --> 00:02:47,220
Here, the possible characters is

58
00:02:47,220 --> 00:02:50,550
going to be a list
of finite elements,

59
00:02:50,550 --> 00:02:53,520
and I'm going to do an X,

60
00:02:53,520 --> 00:02:58,200
I'm going to use capital O,

61
00:02:58,200 --> 00:03:02,980
I'm going to use an underscore,

62
00:03:04,280 --> 00:03:06,400
and these are arbitrary

63
00:03:06,400 --> 00:03:08,190
symbols that I'm
going to be using

64
00:03:08,190 --> 00:03:10,160
so you feel free to change

65
00:03:10,160 --> 00:03:12,360
them and see what
results you get.

66
00:03:12,360 --> 00:03:16,480
I'm going to pick four
string symbols that have

67
00:03:16,480 --> 00:03:21,150
been written in the
syntax of a list.

68
00:03:21,150 --> 00:03:24,600
What I want to be able to do
is that I will be able to

69
00:03:24,600 --> 00:03:27,960
pick any one of these
symbols at random, again,

70
00:03:27,960 --> 00:03:29,780
with the idea that
random could be

71
00:03:29,780 --> 00:03:32,820
a great variety of
things but we can

72
00:03:32,820 --> 00:03:34,560
also use randomness to select

73
00:03:34,560 --> 00:03:37,990
between a pre-specified
list of things,

74
00:03:37,990 --> 00:03:41,150
that's how lists in
this case are coming in

75
00:03:41,150 --> 00:03:42,520
and we're going to try to

76
00:03:42,520 --> 00:03:44,580
create a drawing tool with them.

77
00:03:44,580 --> 00:03:47,640
We're going to just stamp
these symbols as fonts in

78
00:03:47,640 --> 00:03:51,295
the screen as we drag
the cursor around.

79
00:03:51,295 --> 00:03:53,715
That would be our first step.

80
00:03:53,715 --> 00:03:55,440
Let's just go ahead and create

81
00:03:55,440 --> 00:03:57,400
a font. We've done this before.

82
00:03:57,400 --> 00:04:02,290
We're going to use F
for the font variable,

83
00:04:02,920 --> 00:04:07,245
we're going to create
the font, oops,

84
00:04:07,245 --> 00:04:09,970
there we go, and
we're going to use

85
00:04:09,970 --> 00:04:13,930
the Corbel Bold font,

86
00:04:13,930 --> 00:04:19,785
which I think it's going
to have a size of 24.

87
00:04:19,785 --> 00:04:21,810
We're creating a
font that we will

88
00:04:21,810 --> 00:04:24,930
use and as we learned before,

89
00:04:24,930 --> 00:04:30,740
let's define that font
as a text font F,

90
00:04:30,740 --> 00:04:33,010
and finally we're going to

91
00:04:33,010 --> 00:04:38,990
define text line,
sorry for that.

92
00:04:38,990 --> 00:04:43,300
We're going to do
left and center.

93
00:04:43,340 --> 00:04:46,810
All these attributes contribute

94
00:04:46,810 --> 00:04:50,015
to the way the font is
presented in the screen.

95
00:04:50,015 --> 00:04:54,690
If you are always wondering
what the changes would be,

96
00:04:54,690 --> 00:04:56,710
go into the processing
documentation

97
00:04:56,710 --> 00:04:57,810
reference and see what

98
00:04:57,810 --> 00:05:01,275
are the other options for
different text alignments.

99
00:05:01,275 --> 00:05:04,020
An experiment of how
changing that might change

100
00:05:04,020 --> 00:05:07,420
the look of your composition.

101
00:05:08,030 --> 00:05:11,040
I will go back to this set up,

102
00:05:11,040 --> 00:05:12,480
but I think at this point,

103
00:05:12,480 --> 00:05:15,105
I would like to see some of
these fonts in the screen.

104
00:05:15,105 --> 00:05:16,950
We want to just transition

105
00:05:16,950 --> 00:05:19,230
to moving to the draw function,

106
00:05:19,230 --> 00:05:24,555
which is where we're going to be

107
00:05:24,555 --> 00:05:31,180
doing most of the dynamic
parts of the code.

108
00:05:38,540 --> 00:05:41,865
Let's define a position
where the font will be,

109
00:05:41,865 --> 00:05:45,135
which is going to be based
on the mouse position.

110
00:05:45,135 --> 00:05:50,230
We could say that
the position x,

111
00:05:50,540 --> 00:05:54,615
let's just do it with
underscores to be consistent.

112
00:05:54,615 --> 00:06:03,300
Here, we could say
something like mouse X.

113
00:06:03,300 --> 00:06:12,060
Position y, it could
be mouse y like that.

114
00:06:12,060 --> 00:06:14,550
Now, we can actually
use our font.

115
00:06:14,550 --> 00:06:16,680
Let me just create a little
bit of space so we can

116
00:06:16,680 --> 00:06:20,290
keep the code in the middle.

117
00:06:20,300 --> 00:06:24,690
We can use our text command and

118
00:06:24,690 --> 00:06:30,705
say the font that we want
out of the possible fonts.

119
00:06:30,705 --> 00:06:34,320
We will use one of these
characters for now,

120
00:06:34,320 --> 00:06:36,495
copy that in here.

121
00:06:36,495 --> 00:06:38,130
The text that we're going
to use is going to be

122
00:06:38,130 --> 00:06:40,995
the first character
of that list.

123
00:06:40,995 --> 00:06:43,290
It's going to be this x.

124
00:06:43,290 --> 00:06:46,590
The position we're
going to place

125
00:06:46,590 --> 00:06:49,740
it in the screen
will be position x.

126
00:06:49,740 --> 00:06:56,115
Position y would be
the y coordinate.

127
00:06:56,115 --> 00:06:58,020
We need to specify
which character we are

128
00:06:58,020 --> 00:07:01,575
using and which position
x and which position y.

129
00:07:01,575 --> 00:07:04,005
At this point as well,

130
00:07:04,005 --> 00:07:11,070
we might want to define the
fill or basically the color.

131
00:07:11,070 --> 00:07:13,110
Because we haven't brought in

132
00:07:13,110 --> 00:07:14,655
the idea of the
color palette yet,

133
00:07:14,655 --> 00:07:16,740
we're going to use a
simple placeholder.

134
00:07:16,740 --> 00:07:21,375
Let's use something
like green or white.

135
00:07:21,375 --> 00:07:23,745
Basically, a 255 would
give us a white.

136
00:07:23,745 --> 00:07:25,185
Let's see what we have so far.

137
00:07:25,185 --> 00:07:27,410
I always like testing

138
00:07:27,410 --> 00:07:30,395
a few lines of code,
seeing what we have.

139
00:07:30,395 --> 00:07:33,050
At this point, you see we have

140
00:07:33,050 --> 00:07:35,915
the Xs following the mouse.

141
00:07:35,915 --> 00:07:40,210
We can print them
wherever we want.

142
00:07:40,210 --> 00:07:43,050
That's maybe not too exciting,

143
00:07:43,050 --> 00:07:46,965
but that's a place to start
about our drawing tool.

144
00:07:46,965 --> 00:07:48,990
We are able to print

145
00:07:48,990 --> 00:07:52,950
these fonts into the screen

146
00:07:52,950 --> 00:07:55,635
at any position
where the mouse is.

147
00:07:55,635 --> 00:07:58,665
One of the things that I
want to start doing here is

148
00:07:58,665 --> 00:08:02,160
control a little bit more
of how that is presented.

149
00:08:02,160 --> 00:08:06,915
Instead of thinking that
anywhere where the mouse is,

150
00:08:06,915 --> 00:08:11,610
we're going to start
placing these fonts with

151
00:08:11,610 --> 00:08:16,995
some degree of alignment
to the screen.

152
00:08:16,995 --> 00:08:19,230
If we really start
thinking, this is going

153
00:08:19,230 --> 00:08:20,580
to be a segue to what
it's going to be

154
00:08:20,580 --> 00:08:24,495
Week 2 where we actually
start talking about grids.

155
00:08:24,495 --> 00:08:26,520
But here, I would like

156
00:08:26,520 --> 00:08:28,830
to start thinking what
would be the cell size if

157
00:08:28,830 --> 00:08:32,700
we would have
something like a grid

158
00:08:32,700 --> 00:08:35,160
in the background and
I could only place

159
00:08:35,160 --> 00:08:37,725
these fonts in specific
locations in that grid?

160
00:08:37,725 --> 00:08:40,890
Maybe I would define
the cell size in

161
00:08:40,890 --> 00:08:48,960
x as a proportion
of the image size.

162
00:08:48,960 --> 00:08:53,745
I could say the image size is
the entirety of the canvas.

163
00:08:53,745 --> 00:08:56,860
What if I divide that by 60?

164
00:08:56,930 --> 00:08:59,955
That would be how big I want

165
00:08:59,955 --> 00:09:03,060
a particular cell to be in x.

166
00:09:03,060 --> 00:09:06,150
In order to do a similar
proportion in y,

167
00:09:06,150 --> 00:09:07,710
I'm going to copy paste that.

168
00:09:07,710 --> 00:09:11,010
I'm going to define that

169
00:09:11,010 --> 00:09:15,555
the image size in y which I
know is half the size of x,

170
00:09:15,555 --> 00:09:19,575
because we're using a
1,200 by 600 canvas.

171
00:09:19,575 --> 00:09:21,960
I'm going to divide this by 30.

172
00:09:21,960 --> 00:09:26,040
Now, I have basically
some piece of

173
00:09:26,040 --> 00:09:28,275
information that's a proportion

174
00:09:28,275 --> 00:09:30,600
of the entirety of the screen.

175
00:09:30,600 --> 00:09:33,135
What we're going to do
is use that information

176
00:09:33,135 --> 00:09:37,725
to influence the
position of this xs.

177
00:09:37,725 --> 00:09:41,850
We're going to start by
dividing this information

178
00:09:41,850 --> 00:09:46,805
by cell x here.

179
00:09:46,805 --> 00:09:48,770
The mouse position divided by

180
00:09:48,770 --> 00:09:51,230
the cell position and
then we're going to also

181
00:09:51,230 --> 00:09:55,975
multiply it times
the cell position.

182
00:09:55,975 --> 00:09:59,115
This is going to start
making the position of

183
00:09:59,115 --> 00:10:05,165
the mouse be always
fitting within

184
00:10:05,165 --> 00:10:10,235
the proportion of the
screen as if it had

185
00:10:10,235 --> 00:10:17,630
a snapping to an invisible grid.

186
00:10:17,630 --> 00:10:21,575
Let's just go through
this math together again.

187
00:10:21,575 --> 00:10:24,320
There we go. We have
this information.

188
00:10:24,320 --> 00:10:27,420
This division could be

189
00:10:27,420 --> 00:10:29,280
a decimal place because
the mouse position

190
00:10:29,280 --> 00:10:31,575
could be like infinitely small.

191
00:10:31,575 --> 00:10:34,335
If we want to make
also sure that we keep

192
00:10:34,335 --> 00:10:37,455
a rigid grid a little
bit more organized,

193
00:10:37,455 --> 00:10:39,735
we would do something
like round.

194
00:10:39,735 --> 00:10:44,265
Round, it's a way of
approximating a number,

195
00:10:44,265 --> 00:10:47,770
a decimal, a float
towards an integer.

196
00:10:48,080 --> 00:10:51,435
This position now, let's
see what we have here.

197
00:10:51,435 --> 00:10:54,150
We are basically
changing the way we are

198
00:10:54,150 --> 00:11:00,000
positioning these
Xs in the screen.

199
00:11:00,000 --> 00:11:02,430
You can see now I'm
starting to do something

200
00:11:02,430 --> 00:11:06,940
that the cursor could
be incredibly small,

201
00:11:08,570 --> 00:11:11,610
meaning the movement could
be incredibly precise,

202
00:11:11,610 --> 00:11:14,610
but I cannot move away from

203
00:11:14,610 --> 00:11:18,645
positions that fit
an invisible grid.

204
00:11:18,645 --> 00:11:22,005
I'm using this X as a form of

205
00:11:22,005 --> 00:11:27,160
ASCII form of drawing
and form of painting.

206
00:11:27,530 --> 00:11:31,140
It's been used by a lot
of graphic designers.

207
00:11:31,140 --> 00:11:34,020
It's been using a lot
in video games as well.

208
00:11:34,020 --> 00:11:36,210
We could start getting
something quite interesting.

209
00:11:36,210 --> 00:11:38,805
It's a drawing tool that has
certain constraints to it.

210
00:11:38,805 --> 00:11:41,220
It's not absolutely free.

211
00:11:41,220 --> 00:11:43,350
But again, it's a system that we

212
00:11:43,350 --> 00:11:45,405
could actually
manipulate quite a bit.

213
00:11:45,405 --> 00:11:48,780
I invite you to play
with this system.

214
00:11:48,780 --> 00:11:51,060
For instance, currently we are

215
00:11:51,060 --> 00:11:53,955
only using one of
the characters,

216
00:11:53,955 --> 00:11:55,980
X, because we are picking

217
00:11:55,980 --> 00:11:58,215
up the first entity
of that list here.

218
00:11:58,215 --> 00:12:00,270
We're using the first entity X,

219
00:12:00,270 --> 00:12:02,670
but if you want to do the
same with the second entity,

220
00:12:02,670 --> 00:12:04,450
we can put a one here,

221
00:12:04,450 --> 00:12:07,430
and you'll see that we
get the same system

222
00:12:07,430 --> 00:12:11,610
, but with circles.

223
00:12:16,820 --> 00:12:19,080
We are overlapping.

224
00:12:19,080 --> 00:12:23,160
If our mouse sticks
to a position,

225
00:12:23,160 --> 00:12:26,050
it remains there for a while.

226
00:12:28,870 --> 00:12:32,825
That circle gets redrawn
over and over again.

227
00:12:32,825 --> 00:12:34,790
That's something that we're
going to keep like this.

228
00:12:34,790 --> 00:12:36,650
I think that for these
first few lessons,

229
00:12:36,650 --> 00:12:37,940
it's going to be better for us

230
00:12:37,940 --> 00:12:40,345
to maintain these drawing tools.

231
00:12:40,345 --> 00:12:43,335
Rather simple, but certainly

232
00:12:43,335 --> 00:12:46,810
flexible to different
design-out.

233
00:12:48,050 --> 00:12:50,355
Again, you can change

234
00:12:50,355 --> 00:12:53,175
the different fonts
that you have here.

235
00:12:53,175 --> 00:12:55,905
The different sample characters.

236
00:12:55,905 --> 00:12:59,205
Why did we create these
possible characters?

237
00:12:59,205 --> 00:13:06,390
Well, currently, we are
drawing with one out of them.

238
00:13:06,390 --> 00:13:08,250
Let's do one final thing
that we're going to

239
00:13:08,250 --> 00:13:10,140
say that the current character,

240
00:13:10,140 --> 00:13:12,420
or the character that
we want to work with.

241
00:13:12,420 --> 00:13:16,650
Let's call that character.

242
00:13:16,650 --> 00:13:20,325
Let's pick a random entity,

243
00:13:20,325 --> 00:13:26,470
so a random symbol from that
possible characters list.

244
00:13:28,130 --> 00:13:32,340
Here we will need to
import the random module.

245
00:13:32,340 --> 00:13:33,480
This won't run.

246
00:13:33,480 --> 00:13:35,040
I think that I'm still haven't

247
00:13:35,040 --> 00:13:38,260
imported the random module.
Let's remember that.

248
00:13:38,990 --> 00:13:42,135
Rend range as we've
been using before.

249
00:13:42,135 --> 00:13:44,650
We could say from 0-4,

250
00:13:46,190 --> 00:13:49,440
which is the number of
characters we have.

251
00:13:49,440 --> 00:13:50,895
But if instead of that,

252
00:13:50,895 --> 00:13:52,440
let's say sometimes we want to

253
00:13:52,440 --> 00:13:54,795
have less characters
or more characters,

254
00:13:54,795 --> 00:13:58,620
the proper way of doing this
would be specifying with

255
00:13:58,620 --> 00:14:03,975
the rend function how
long would be this list.

256
00:14:03,975 --> 00:14:08,175
Let's calculate the length
of that list, like that.

257
00:14:08,175 --> 00:14:11,325
That would give us
a random character

258
00:14:11,325 --> 00:14:14,880
between zero and the
length of the list.

259
00:14:14,880 --> 00:14:17,685
If this list has more items,

260
00:14:17,685 --> 00:14:22,935
it will pick one random
out of a longer list.

261
00:14:22,935 --> 00:14:26,550
We don't have to worry about

262
00:14:26,550 --> 00:14:29,970
changing a hard-coded
number like a four,

263
00:14:29,970 --> 00:14:32,520
or a five, or something
like that every

264
00:14:32,520 --> 00:14:33,960
time that we change

265
00:14:33,960 --> 00:14:36,430
the number of characters
we're working with.

266
00:14:36,710 --> 00:14:40,665
This is going to be represented
by the character value.

267
00:14:40,665 --> 00:14:43,230
Now instead of using this
hard-coded number one,

268
00:14:43,230 --> 00:14:45,135
which is the second
entity of the list,

269
00:14:45,135 --> 00:14:46,785
we're going to use
this character.

270
00:14:46,785 --> 00:14:53,200
This will create, hopefully,
something interesting.

271
00:14:53,750 --> 00:14:56,700
We just mentioned
that this is not

272
00:14:56,700 --> 00:14:58,800
working yet because we
have to import randomness.

273
00:14:58,800 --> 00:15:01,830
Import random.

274
00:15:01,830 --> 00:15:07,035
I think that we are still
having an error somewhere.

275
00:15:07,035 --> 00:15:09,600
Let's just find what that is.

276
00:15:09,600 --> 00:15:13,680
I think that we
had an error here.

277
00:15:13,680 --> 00:15:19,320
We actually misspelled
random rand range here.

278
00:15:19,320 --> 00:15:23,190
Let's see if that
works. There we go.

279
00:15:23,190 --> 00:15:25,020
It's a little bit messier
right now because

280
00:15:25,020 --> 00:15:26,640
you see this overlap is actually

281
00:15:26,640 --> 00:15:33,135
not really being very clear.

282
00:15:33,135 --> 00:15:36,510
But we are able to sample

283
00:15:36,510 --> 00:15:39,610
a random character
out of this list.

284
00:15:39,890 --> 00:15:42,060
One of the things that
we would actually

285
00:15:42,060 --> 00:15:44,340
do is reduce the speed.

286
00:15:44,340 --> 00:15:46,950
Processing is
actually running at

287
00:15:46,950 --> 00:15:50,385
an incredible speed,
frames per second.

288
00:15:50,385 --> 00:15:52,755
Maybe 60 frames per
second, maybe more.

289
00:15:52,755 --> 00:15:55,425
One of the things
that we could do is

290
00:15:55,425 --> 00:15:58,725
control the speed
of the sampling,

291
00:15:58,725 --> 00:16:02,325
so that we don't have as
much as that overlap.

292
00:16:02,325 --> 00:16:04,245
We could also, and this would be

293
00:16:04,245 --> 00:16:07,500
a good exploration for you,
is to start thinking, well,

294
00:16:07,500 --> 00:16:10,320
how can I identify
if I've already

295
00:16:10,320 --> 00:16:16,805
written a particular character
in a particular cell?

296
00:16:16,805 --> 00:16:18,950
This is exactly what we're
going to do in Week 2,

297
00:16:18,950 --> 00:16:20,450
which is understand grids as

298
00:16:20,450 --> 00:16:24,005
a data structure and how we
can allocate data into them.

299
00:16:24,005 --> 00:16:26,570
I'm also presenting here
a little bit of a problem

300
00:16:26,570 --> 00:16:28,100
that would be resolved
with the knowledge

301
00:16:28,100 --> 00:16:30,460
that we'll acquire later.

302
00:16:32,150 --> 00:16:39,945
How would we reduce how
much we iterate every time?

303
00:16:39,945 --> 00:16:45,430
Here in the draw, we're
going to say if frame count.

304
00:16:47,780 --> 00:16:51,150
We're going to use
the modular function.

305
00:16:51,150 --> 00:16:57,420
Here we could use
something like 10 = 0.

306
00:16:57,420 --> 00:17:00,390
This function here,
this if statement,

307
00:17:00,390 --> 00:17:05,685
says processing maintains
track of which frame we're in.

308
00:17:05,685 --> 00:17:09,570
The modular function, basically,

309
00:17:09,570 --> 00:17:11,580
it's a calculation
of the remainder.

310
00:17:11,580 --> 00:17:16,770
If the number 10 fits perfectly
into a number like 100,

311
00:17:16,770 --> 00:17:18,675
then there is no remainder.

312
00:17:18,675 --> 00:17:20,295
There is no accident,

313
00:17:20,295 --> 00:17:22,035
in a way, in that equation.

314
00:17:22,035 --> 00:17:24,210
Therefore, the
result will be zero.

315
00:17:24,210 --> 00:17:29,210
If, for instance, we have
99 as the frame count,

316
00:17:29,210 --> 00:17:31,565
number 10 will fit nine times

317
00:17:31,565 --> 00:17:33,395
into the frame count

318
00:17:33,395 --> 00:17:34,745
and there will be a
remainder of nine.

319
00:17:34,745 --> 00:17:36,890
We wouldn't get this.
This is a way of

320
00:17:36,890 --> 00:17:39,230
saying do this every 10 frames.

321
00:17:39,230 --> 00:17:41,030
If you want to do it
every two frames,

322
00:17:41,030 --> 00:17:42,810
you do it every two,

323
00:17:42,810 --> 00:17:44,595
or every three, or every five.

324
00:17:44,595 --> 00:17:46,620
Let's just use a
number like five.

325
00:17:46,620 --> 00:17:50,895
If we indent all
of this code here,

326
00:17:50,895 --> 00:17:52,650
we're basically saying,

327
00:17:52,650 --> 00:17:55,350
only do this every five frames.

328
00:17:55,350 --> 00:17:57,120
In a way, we're not

329
00:17:57,120 --> 00:17:58,905
slowing down the way
the program runs.

330
00:17:58,905 --> 00:18:03,070
We're just reducing the amount
of sampling we're doing.

331
00:18:03,260 --> 00:18:06,240
We can actually navigate.

332
00:18:06,240 --> 00:18:07,800
If we still linger,

333
00:18:07,800 --> 00:18:12,390
you'll see that we can paint
on top of our drawing still.

334
00:18:12,390 --> 00:18:16,890
But we are able to create
a drawing tool that

335
00:18:16,890 --> 00:18:22,305
requires a sense of its own
pacing, its own momentum.

336
00:18:22,305 --> 00:18:24,705
We're bringing in a sense of,

337
00:18:24,705 --> 00:18:29,620
what is the speed by which
you navigate and move around?

338
00:18:30,020 --> 00:18:32,820
We're going to be leaving here,

339
00:18:32,820 --> 00:18:34,560
this first part of the video.

340
00:18:34,560 --> 00:18:37,035
Let's do a quick recap
of what we've done.

341
00:18:37,035 --> 00:18:38,910
We've identified or created

342
00:18:38,910 --> 00:18:41,490
a list of possible characters.

343
00:18:41,490 --> 00:18:44,040
These are arbitrary.
You can actually switch

344
00:18:44,040 --> 00:18:46,755
them and see how your drawing
would actually change.

345
00:18:46,755 --> 00:18:49,830
We've initiated a
font, in this case,

346
00:18:49,830 --> 00:18:52,680
the Corbel font, which
you can also change.

347
00:18:52,680 --> 00:18:55,380
You can decide and use
a different font style.

348
00:18:55,380 --> 00:18:59,430
We have been drawing

349
00:18:59,430 --> 00:19:02,895
these fonts, sampling
them randomly.

350
00:19:02,895 --> 00:19:05,490
It could be any of
those characters.

351
00:19:05,490 --> 00:19:07,500
We're sampling them,

352
00:19:07,500 --> 00:19:10,410
and we're printing them in
the position of the mouse.

353
00:19:10,410 --> 00:19:12,480
But we're not just printing
them where the mouse is,

354
00:19:12,480 --> 00:19:16,860
we're basically aligning
the mouse snapping

355
00:19:16,860 --> 00:19:21,790
to an invisible grid
that we created here.

356
00:19:21,790 --> 00:19:24,290
That's it for this first video.

357
00:19:24,290 --> 00:19:25,880
We're going to
continue this script

358
00:19:25,880 --> 00:19:27,680
in a second video
to complete that.

359
00:19:27,680 --> 00:19:29,360
Bringing back color palettes,

360
00:19:29,360 --> 00:19:31,910
being able to swap between
different color palettes,

361
00:19:31,910 --> 00:19:33,740
and see if we can finalize

362
00:19:33,740 --> 00:19:36,085
this first drawing as

363
00:19:36,085 --> 00:19:37,680
the conclusion of this Week 1.

364
00:19:37,680 --> 00:19:39,760
I'll see you in the next video.