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

2
00:00:07,920 --> 00:00:10,760
on our programming
for designers course.

3
00:00:10,760 --> 00:00:12,525
We're starting Week 2,

4
00:00:12,525 --> 00:00:16,260
and we are going to be
revisiting primitives.

5
00:00:16,260 --> 00:00:19,060
We actually ended
up with primitives

6
00:00:19,060 --> 00:00:22,555
and we drew a line at
the end of Week 1.

7
00:00:22,555 --> 00:00:24,000
But let's go back a little

8
00:00:24,000 --> 00:00:25,120
bit and understand how you would

9
00:00:25,120 --> 00:00:28,300
draw primitives with
processing in Python.

10
00:00:28,300 --> 00:00:32,380
As we have seen, we start
by creating a canvas,

11
00:00:32,380 --> 00:00:36,050
which is a window that has a
specific height and width.

12
00:00:36,050 --> 00:00:39,795
Within that, we can
specify coordinates.

13
00:00:39,795 --> 00:00:42,920
If we have a point, we
have an x and y value,

14
00:00:42,920 --> 00:00:46,720
we can specify a particular
point in this canvas.

15
00:00:46,720 --> 00:00:48,620
What is important
to remember is that

16
00:00:48,620 --> 00:00:52,105
the zero coordinate starts
on the top left corner.

17
00:00:52,105 --> 00:00:56,200
If you have a point in
space such as this one,

18
00:00:56,200 --> 00:00:58,635
like 100, 40,

19
00:00:58,635 --> 00:01:00,375
that's the x and y.

20
00:01:00,375 --> 00:01:04,740
We calculate that
from the top left.

21
00:01:04,740 --> 00:01:08,380
We move 100 units to the right,

22
00:01:08,380 --> 00:01:11,265
and that is our x-axis.

23
00:01:11,265 --> 00:01:14,805
Then y-axis is starting
from the top, moving down.

24
00:01:14,805 --> 00:01:17,400
That's the way we
calculate a point.

25
00:01:17,430 --> 00:01:20,790
We can actually have
certain primitives,

26
00:01:20,790 --> 00:01:23,105
certain geometries
such as a line,

27
00:01:23,105 --> 00:01:26,130
rectangle, circles,
ellipses, and so on,

28
00:01:26,130 --> 00:01:29,430
that have their own
specific construct.

29
00:01:29,430 --> 00:01:31,390
If you're wondering, how do I

30
00:01:31,390 --> 00:01:33,830
learn about these requirements?

31
00:01:33,830 --> 00:01:36,890
Well, processing has, as
we have been discussing,

32
00:01:36,890 --> 00:01:39,450
a reference file, a website,

33
00:01:39,450 --> 00:01:41,450
where you can actually
go specifically

34
00:01:41,450 --> 00:01:42,050
and see what are

35
00:01:42,050 --> 00:01:43,670
the functions that are
available for you.

36
00:01:43,670 --> 00:01:46,705
In the case of the line, you
will see the keyword line,

37
00:01:46,705 --> 00:01:51,415
non-capital, l. Requires
two pieces of information,

38
00:01:51,415 --> 00:01:53,990
an x and a y,

39
00:01:54,140 --> 00:01:56,700
basically two
points, each one of

40
00:01:56,700 --> 00:02:00,465
them being a coordinate.

41
00:02:00,465 --> 00:02:02,505
How would we specify

42
00:02:02,505 --> 00:02:06,550
those two coordinates that
are required for the line?

43
00:02:06,550 --> 00:02:10,230
As we saw already
in the last videos,

44
00:02:10,230 --> 00:02:13,150
we can actually draw
a line between 0,

45
00:02:13,150 --> 00:02:15,210
0 and a particular point,

46
00:02:15,210 --> 00:02:17,150
which would be the
position of the mouse.

47
00:02:17,150 --> 00:02:20,060
That's providing four values, x,

48
00:02:20,060 --> 00:02:23,620
y, x, y, for those two points.

49
00:02:23,620 --> 00:02:25,820
But we can also look at,

50
00:02:25,820 --> 00:02:27,820
in the case of a
rectangle for instance,

51
00:02:27,820 --> 00:02:29,760
which is a different primitive,

52
00:02:29,760 --> 00:02:31,960
we have to read
the documentation.

53
00:02:31,960 --> 00:02:34,400
Because it might be
counterintuitive to think, well,

54
00:02:34,400 --> 00:02:38,480
perhaps the beginning of
the rectangle is a point,

55
00:02:38,480 --> 00:02:40,840
and the other information

56
00:02:40,840 --> 00:02:42,060
that we have to
provide is a point.

57
00:02:42,060 --> 00:02:44,020
But it is in fact
actually that you have to

58
00:02:44,020 --> 00:02:46,935
provide the width and the
height of a rectangle.

59
00:02:46,935 --> 00:02:50,460
It's really important that we
look at the documentation.

60
00:02:50,860 --> 00:02:54,885
What do these numbers mean
when I say rectangle or rect?

61
00:02:54,885 --> 00:02:58,155
40, 20, 60, 70, as
you can see here.

62
00:02:58,155 --> 00:02:59,530
The 40, 20 is

63
00:02:59,530 --> 00:03:02,995
the starting point on the
top left of the rectangle.

64
00:03:02,995 --> 00:03:05,910
Then the 60 is the width,

65
00:03:05,910 --> 00:03:09,045
calculating it in the x-axis.

66
00:03:09,045 --> 00:03:12,695
Then moving down in the y-axis,

67
00:03:12,695 --> 00:03:15,150
we actually have the
height of the rectangle.

68
00:03:15,150 --> 00:03:17,050
Like that, all constructs,

69
00:03:17,050 --> 00:03:18,930
all primitives will have
their own construct.

70
00:03:18,930 --> 00:03:20,630
Will have their
own data required.

71
00:03:20,630 --> 00:03:22,270
It's important that we
look at the reference.

72
00:03:22,270 --> 00:03:24,155
Some of them you will
start memorizing.

73
00:03:24,155 --> 00:03:25,750
But often you might
start working

74
00:03:25,750 --> 00:03:27,730
with a different library
that will require

75
00:03:27,730 --> 00:03:29,970
a different requirement or

76
00:03:29,970 --> 00:03:32,850
some new information that
you might need to provide.

77
00:03:32,850 --> 00:03:34,150
It's always important
to be able to

78
00:03:34,150 --> 00:03:36,250
access the documentation files,

79
00:03:36,250 --> 00:03:38,190
the reference files, and

80
00:03:38,190 --> 00:03:40,940
understand what information
can you provide.

81
00:03:40,940 --> 00:03:43,450
Let's just do some examples

82
00:03:43,450 --> 00:03:46,300
of that in code
within processing.

83
00:03:46,300 --> 00:03:48,075
Here we are in processing.

84
00:03:48,075 --> 00:03:49,950
As we have done before,

85
00:03:49,950 --> 00:03:53,590
we're going to just start
with some variables.

86
00:03:54,310 --> 00:03:56,510
I always recommend you to have

87
00:03:56,510 --> 00:03:59,020
a template for this material,

88
00:03:59,020 --> 00:04:01,690
the width and the height,

89
00:04:04,160 --> 00:04:07,550
if you don't want to be writing

90
00:04:07,550 --> 00:04:11,290
this boilerplate
code all the time.

91
00:04:16,100 --> 00:04:19,170
We have the size.

92
00:04:19,170 --> 00:04:21,270
This is, if you remember,

93
00:04:21,270 --> 00:04:25,030
the construction of our canvas.

94
00:04:26,480 --> 00:04:31,730
I'm going to be copy
pasting those variables in.

95
00:04:31,950 --> 00:04:34,230
Let's just give it a color.

96
00:04:34,230 --> 00:04:39,850
The background, we've talked

97
00:04:39,850 --> 00:04:42,150
about color a little bit before.

98
00:04:42,150 --> 00:04:44,730
We could do a black
background with a zero,

99
00:04:44,730 --> 00:04:46,730
but let's just
create an arbitrary

100
00:04:46,730 --> 00:04:50,285
color, something like this.

101
00:04:50,285 --> 00:04:53,310
Let's see what we're
getting at this point.

102
00:04:53,570 --> 00:04:57,465
We have a pink screen,

103
00:04:57,465 --> 00:05:00,150
a vibrant color here.

104
00:05:00,150 --> 00:05:02,370
We can stop this.

105
00:05:02,370 --> 00:05:06,130
Let's just construct
some primitives.

106
00:05:06,710 --> 00:05:11,290
We don't need to necessarily
draw this in the draw loop.

107
00:05:11,290 --> 00:05:15,570
We're not going to be doing
anything animated just yet.

108
00:05:15,570 --> 00:05:18,270
As a matter of fact, we can
actually just do it here.

109
00:05:18,270 --> 00:05:20,575
Let's just talk about
primitives, specifically.

110
00:05:20,575 --> 00:05:23,370
If we do a rectangle
as we've been seeing,

111
00:05:23,370 --> 00:05:25,330
let's just draw a rectangle.

112
00:05:25,330 --> 00:05:26,730
Let's start by placing

113
00:05:26,730 --> 00:05:28,790
the rectangle in
something arbitrary.

114
00:05:28,790 --> 00:05:31,150
Again, 200, 200,
that's coordinate

115
00:05:31,150 --> 00:05:34,050
of the top left corner
of the rectangle.

116
00:05:34,050 --> 00:05:38,810
Let's do a small
rectangle of 20*20,

117
00:05:41,550 --> 00:05:45,260
as you can see here.

118
00:05:47,350 --> 00:05:51,260
You can see this very small
rectangle currently has

119
00:05:51,260 --> 00:05:57,500
a white background and a
black outline or stroke.

120
00:05:57,500 --> 00:05:59,285
Let's see how we could actually

121
00:05:59,285 --> 00:06:00,860
modify some of these rectangle,

122
00:06:00,860 --> 00:06:02,825
some of these primitives
as we construct them,

123
00:06:02,825 --> 00:06:05,690
we can give them attributes
and some properties.

124
00:06:05,690 --> 00:06:10,295
One of the things that we
can do is say no stroke.

125
00:06:10,295 --> 00:06:14,780
This will actually eliminate
the stroke completely.

126
00:06:14,780 --> 00:06:17,210
If we don't want
to have a stroke,

127
00:06:17,210 --> 00:06:19,910
meaning the outline
of the rectangle,

128
00:06:19,910 --> 00:06:21,785
that would be the
way to do that.

129
00:06:21,785 --> 00:06:23,720
One of the things that we
can do is comment that

130
00:06:23,720 --> 00:06:27,465
out and say stroke.

131
00:06:27,465 --> 00:06:29,950
Maybe we want to give
it a specific color,

132
00:06:29,950 --> 00:06:34,585
something like 0, 0, 120.

133
00:06:34,585 --> 00:06:39,470
Like a dark blue.

134
00:06:39,470 --> 00:06:41,735
Again, maybe we cannot
see it too much.

135
00:06:41,735 --> 00:06:43,505
Let's just make this rectangle

136
00:06:43,505 --> 00:06:46,910
bigger by increasing the
width and the height.

137
00:06:46,910 --> 00:06:49,490
Let's just do 100 units in

138
00:06:49,490 --> 00:06:54,425
this direction and 100 units
in this other direction,

139
00:06:54,425 --> 00:06:56,060
so we have a bigger rectangle.

140
00:06:56,060 --> 00:06:57,560
But what if we want to increase

141
00:06:57,560 --> 00:07:01,835
the thickness of the
stroke or the outline?

142
00:07:01,835 --> 00:07:06,780
Well, there's a property
which is stroke weight.

143
00:07:07,060 --> 00:07:09,635
That is the term,

144
00:07:09,635 --> 00:07:13,055
this variable if you look
into the documentation,

145
00:07:13,055 --> 00:07:16,220
you can actually specify
the thickness by default.

146
00:07:16,220 --> 00:07:17,720
We're working with a number one.

147
00:07:17,720 --> 00:07:20,720
If we use something
like a number three,

148
00:07:20,720 --> 00:07:24,140
you will see that
we start getting

149
00:07:24,140 --> 00:07:28,505
a thicker border, or
a thicker outline.

150
00:07:28,505 --> 00:07:30,875
We have control over the color.

151
00:07:30,875 --> 00:07:33,905
If this outline exists
or if it doesn't exist.

152
00:07:33,905 --> 00:07:35,660
You might be thinking,
well, what about

153
00:07:35,660 --> 00:07:37,100
the color inside the rectangle?

154
00:07:37,100 --> 00:07:39,410
What if I want to
just change the color

155
00:07:39,410 --> 00:07:42,005
of the rectangle itself?

156
00:07:42,005 --> 00:07:44,135
Well, let's do the feel.

157
00:07:44,135 --> 00:07:48,080
Feel color by default
in this case is white.

158
00:07:48,080 --> 00:07:50,090
We might be able to say, well,

159
00:07:50,090 --> 00:07:58,895
what if we want to also give
it some hue of blue, RGB.

160
00:07:58,895 --> 00:08:00,890
Who remember RGB?

161
00:08:00,890 --> 00:08:02,135
The last channel.

162
00:08:02,135 --> 00:08:05,220
The third channel.
It's a blue channel.

163
00:08:05,350 --> 00:08:07,820
I'm going for something darker,

164
00:08:07,820 --> 00:08:09,710
maybe like that
doesn't really create

165
00:08:09,710 --> 00:08:13,880
too much contrast with
the actual outline.

166
00:08:13,880 --> 00:08:16,490
Maybe do brighter
than the outline.

167
00:08:16,490 --> 00:08:18,290
We're losing those.

168
00:08:18,290 --> 00:08:20,450
We're creating some
vibrance there.

169
00:08:20,450 --> 00:08:25,400
But as you can see, perhaps
again, playing with color,

170
00:08:25,400 --> 00:08:27,965
it's always an
interesting thing to do,

171
00:08:27,965 --> 00:08:29,975
to start creating,

172
00:08:29,975 --> 00:08:33,325
as you can see here,
just some variation.

173
00:08:33,325 --> 00:08:35,965
We have control over the feel.

174
00:08:35,965 --> 00:08:38,410
If you're look at the
documentation many times,

175
00:08:38,410 --> 00:08:39,925
some of these values,

176
00:08:39,925 --> 00:08:42,340
the documentation might
offer that you can provide

177
00:08:42,340 --> 00:08:44,420
three arguments as we do here

178
00:08:44,420 --> 00:08:47,510
which represents RGB or four.

179
00:08:47,510 --> 00:08:49,430
There are options here.

180
00:08:49,430 --> 00:08:51,455
It's not mandatory that
we do the fourth one.

181
00:08:51,455 --> 00:08:53,840
What did we do the
fourth one as a 50?

182
00:08:53,840 --> 00:08:55,760
Let's look at what
that would do.

183
00:08:55,760 --> 00:08:57,500
What you could see
here is that we

184
00:08:57,500 --> 00:09:01,715
started almost loose the
field, but not completely.

185
00:09:01,715 --> 00:09:06,710
When we actually use four
values in the color definition,

186
00:09:06,710 --> 00:09:08,030
we're doing an alpha,

187
00:09:08,030 --> 00:09:10,565
which this represents
the transparency.

188
00:09:10,565 --> 00:09:12,620
If we would do a value of zero,

189
00:09:12,620 --> 00:09:15,455
that would be
completely transparent.

190
00:09:15,455 --> 00:09:19,445
Or if we do a value of 255,

191
00:09:19,445 --> 00:09:22,430
we can actually make
it completely solid.

192
00:09:22,430 --> 00:09:24,890
I think, yeah,

193
00:09:24,890 --> 00:09:27,425
that's actually something that

194
00:09:27,425 --> 00:09:29,120
we can control, but
that's optional.

195
00:09:29,120 --> 00:09:32,570
An alternative version
of doing let's say

196
00:09:32,570 --> 00:09:40,775
no feel would be to say no feel.

197
00:09:40,775 --> 00:09:43,790
That's a keyword that represents

198
00:09:43,790 --> 00:09:46,685
that we only care
about the outlined.

199
00:09:46,685 --> 00:09:51,470
We don't care about
the inner paint.

200
00:09:51,470 --> 00:09:57,050
Again, maybe for that we
want to do a thicker weight.

201
00:09:57,050 --> 00:09:59,960
It depends on what
you want to go for.

202
00:09:59,960 --> 00:10:01,820
Let's look at a different

203
00:10:01,820 --> 00:10:03,635
primitive that we
haven't covered yet.

204
00:10:03,635 --> 00:10:05,435
Let's look at an ellipse,

205
00:10:05,435 --> 00:10:08,420
because this will give a case.

206
00:10:08,420 --> 00:10:12,545
Let's do an ellipse of 200,

207
00:10:12,545 --> 00:10:14,190
also by 200,

208
00:10:14,190 --> 00:10:18,310
and 100, and 100.

209
00:10:18,310 --> 00:10:21,950
The same coordinates that
we have for the rectangle,

210
00:10:22,960 --> 00:10:25,775
but in this case,
for an ellipse.

211
00:10:25,775 --> 00:10:27,885
Those will overlap.

212
00:10:27,885 --> 00:10:32,860
But this actually illustrates
an interesting condition.

213
00:10:32,860 --> 00:10:35,560
Which is an ellipse when

214
00:10:35,560 --> 00:10:38,350
it's constructed, as
you can see here,

215
00:10:38,350 --> 00:10:41,980
it doesn't take the
top left corner as

216
00:10:41,980 --> 00:10:46,735
a construction protocol
just to call it something.

217
00:10:46,735 --> 00:10:50,110
It actually takes the center and

218
00:10:50,110 --> 00:10:53,290
you're actually giving it the
coordinate of the center,

219
00:10:53,290 --> 00:10:56,260
and then the width

220
00:10:56,260 --> 00:11:00,695
and the height in
diameter, not in radius.

221
00:11:00,695 --> 00:11:04,550
You can see that the circle
that we're obtaining

222
00:11:04,550 --> 00:11:08,585
is exactly the same
size of the rectangle,

223
00:11:08,585 --> 00:11:10,355
but it's actually
not in the right,

224
00:11:10,355 --> 00:11:12,020
in the exact location.

225
00:11:12,020 --> 00:11:14,225
This is something
that you should

226
00:11:14,225 --> 00:11:16,175
learn about in the
reference files.

227
00:11:16,175 --> 00:11:17,765
See what is the requirements.

228
00:11:17,765 --> 00:11:19,910
There are different ways of

229
00:11:19,910 --> 00:11:22,580
constructing something
like an ellipse.

230
00:11:22,580 --> 00:11:25,370
Basically can switch
the construction style.

231
00:11:25,370 --> 00:11:26,870
But obviously, we're getting

232
00:11:26,870 --> 00:11:28,700
into more advancement options.

233
00:11:28,700 --> 00:11:30,725
For now, I would
invite you to really

234
00:11:30,725 --> 00:11:32,330
revise the reference files

235
00:11:32,330 --> 00:11:33,695
every time that you
want to do a primitive,

236
00:11:33,695 --> 00:11:35,740
make sure that you
understand what are

237
00:11:35,740 --> 00:11:38,685
the options that
primitive is giving you.

238
00:11:38,685 --> 00:11:40,340
We're going to
leave this tutorial

239
00:11:40,340 --> 00:11:43,480
here and I'll see
you in the next one.