1
00:00:05,120 --> 00:00:10,315
Hi, welcome to this
final video of Week 2.

2
00:00:10,315 --> 00:00:13,260
We have been covering
a series of topics.

3
00:00:13,260 --> 00:00:14,480
We're going to try to put those

4
00:00:14,480 --> 00:00:16,600
together in a way in which we

5
00:00:16,600 --> 00:00:20,520
really start designing with
maybe an abstract painting,

6
00:00:20,520 --> 00:00:23,880
an abstract drawing with
some of those principles.

7
00:00:23,880 --> 00:00:26,860
Again, we have been covering
things like randomness,

8
00:00:26,860 --> 00:00:30,810
iteration, loops, nested loops.

9
00:00:30,810 --> 00:00:33,630
We're going to continue
from last session.

10
00:00:33,630 --> 00:00:35,780
If you have the code

11
00:00:35,780 --> 00:00:37,200
from the previous session,

12
00:00:37,200 --> 00:00:38,200
that's going to be very useful.

13
00:00:38,200 --> 00:00:39,540
We're going to take
it up from there

14
00:00:39,540 --> 00:00:41,800
and see where we
could actually start

15
00:00:41,800 --> 00:00:44,520
infusing a little bit of
the different concepts that

16
00:00:44,520 --> 00:00:46,880
we've learned to actually
make a composition.

17
00:00:46,880 --> 00:00:48,660
Again, this is an invitation for

18
00:00:48,660 --> 00:00:50,660
you to start making
this code your

19
00:00:50,660 --> 00:00:54,760
own and start deriving
what would you do with it,

20
00:00:54,760 --> 00:00:57,960
what would you do
differently, and so on.

21
00:00:57,960 --> 00:01:00,090
Let's jump into the code.

22
00:01:00,090 --> 00:01:04,200
Let's do a quick recap
of what we have.

23
00:01:04,200 --> 00:01:06,360
If we press "Play" here,

24
00:01:06,360 --> 00:01:10,060
we have a grid that is

25
00:01:10,060 --> 00:01:14,420
being produced by a
series of ellipses,

26
00:01:14,420 --> 00:01:16,360
and the grid is achieved by

27
00:01:16,360 --> 00:01:18,720
a nested loop where we're
actually controlling

28
00:01:18,720 --> 00:01:22,100
the x and y variable and we have

29
00:01:22,100 --> 00:01:27,140
some variables like
the columns and

30
00:01:27,140 --> 00:01:29,720
rows that determines how

31
00:01:29,720 --> 00:01:33,960
much we iterate and we
have the ellipse size.

32
00:01:34,430 --> 00:01:37,140
Let's change this concept.

33
00:01:37,140 --> 00:01:40,450
Let's just move
into a rectangle.

34
00:01:40,450 --> 00:01:42,670
That's the first
thing or you can try

35
00:01:42,670 --> 00:01:45,240
different geometries,
by all means,

36
00:01:45,240 --> 00:01:47,820
playing with
different primitives,

37
00:01:47,820 --> 00:01:50,240
it's certainly one of

38
00:01:50,240 --> 00:01:52,070
the first things that you
might want to evaluate.

39
00:01:52,070 --> 00:01:54,380
I'm going to go with the
theme of a rectangle here.

40
00:01:54,380 --> 00:01:57,790
I'm just going to try to
create something that

41
00:01:57,790 --> 00:02:01,480
will look a little
bit like a DNA or

42
00:02:01,480 --> 00:02:04,710
a sequence of information that

43
00:02:04,850 --> 00:02:10,410
when you actually try to
sort your hard drive,

44
00:02:10,410 --> 00:02:12,140
sometimes there's
visualizations that

45
00:02:12,140 --> 00:02:14,810
can show scattered information
within a computer,

46
00:02:14,810 --> 00:02:17,180
perhaps something
along those lines.

47
00:02:17,870 --> 00:02:20,110
We have this rectangle,

48
00:02:20,110 --> 00:02:23,350
we know the position
in which they will be,

49
00:02:23,470 --> 00:02:25,670
but let's just give

50
00:02:25,670 --> 00:02:31,710
this rectangle a size of
maybe 20 to start and also

51
00:02:31,710 --> 00:02:42,100
20 or so in x 20 and in y 20.

52
00:02:42,100 --> 00:02:49,965
Let's just do the feel
here of that rectangle.

53
00:02:49,965 --> 00:02:55,510
Let's start with a solid white.

54
00:02:55,510 --> 00:02:57,770
We don't really need
this line here anymore.

55
00:02:57,770 --> 00:02:59,110
We're going to be putting

56
00:02:59,110 --> 00:03:01,970
the feel for this
rectangle down here

57
00:03:01,970 --> 00:03:03,670
because we're going
to be changing

58
00:03:03,670 --> 00:03:06,850
the color of each one
of those rectangles.

59
00:03:06,850 --> 00:03:09,890
If we wanted to change
the stroke type,

60
00:03:09,890 --> 00:03:12,770
perhaps we would do
that down here as well

61
00:03:12,770 --> 00:03:14,750
and this variable here it's

62
00:03:14,750 --> 00:03:17,465
not going to be needed anymore.

63
00:03:17,465 --> 00:03:20,010
Let's see what we have
and where we're at.

64
00:03:20,010 --> 00:03:23,310
We have a solid canvas

65
00:03:23,310 --> 00:03:25,345
made out of a series
of rectangles.

66
00:03:25,345 --> 00:03:28,430
How can we start revealing
a little bit of a gap?

67
00:03:28,430 --> 00:03:32,750
Let's do a little gap
between the rectangles in

68
00:03:32,750 --> 00:03:35,730
this direction and
you can see if I

69
00:03:35,730 --> 00:03:39,110
actually do a little
bit short of 20 pixels,

70
00:03:39,110 --> 00:03:43,380
I can actually create a small
gap in this orientation.

71
00:03:43,380 --> 00:03:48,090
If I would do that 18
also here we would

72
00:03:48,090 --> 00:03:52,560
have a grid more regularly.

73
00:03:52,560 --> 00:03:54,100
What we're seeing is these are

74
00:03:54,100 --> 00:03:55,960
not black lines in
a white background

75
00:03:55,960 --> 00:04:00,380
but rather white rectangles
in a black background.

76
00:04:02,090 --> 00:04:06,340
Let's play with this
variable x first of all.

77
00:04:07,940 --> 00:04:10,280
What are we going to be doing is

78
00:04:10,280 --> 00:04:13,160
importing all the
way to the top here,

79
00:04:13,160 --> 00:04:20,190
I'm going to import
random because with

80
00:04:20,190 --> 00:04:22,690
that we can actually start
playing with some of

81
00:04:22,690 --> 00:04:28,470
the random functions
that we can introduce.

82
00:04:28,860 --> 00:04:31,650
Maybe we start with creating

83
00:04:31,650 --> 00:04:33,340
a little bit of a random color

84
00:04:33,340 --> 00:04:38,200
to just create a variable called

85
00:04:38,200 --> 00:04:42,165
random_blue just to play with

86
00:04:42,165 --> 00:04:44,850
one channel at the moment
and we're going to

87
00:04:44,850 --> 00:04:48,940
say that to be random.uniform.

88
00:04:52,100 --> 00:04:55,665
Technically we could
use just an integer.

89
00:04:55,665 --> 00:04:57,630
Actually, yeah, let's do

90
00:04:57,630 --> 00:05:01,130
a random range
because colors don't

91
00:05:01,130 --> 00:05:06,550
have a decimal value
but for coordinates,

92
00:05:06,550 --> 00:05:08,830
we might want to use a
uniform which will give

93
00:05:08,830 --> 00:05:13,060
us a floating point.

94
00:05:13,060 --> 00:05:16,795
We have a random color which
is going to be our blue.

95
00:05:16,795 --> 00:05:25,610
Let's use 0,255,

96
00:05:26,780 --> 00:05:29,730
blue.

97
00:05:29,730 --> 00:05:33,085
Here I know that the red
channel is going to be zero,

98
00:05:33,085 --> 00:05:36,720
the green channel is going
to be all the way max out

99
00:05:36,720 --> 00:05:40,260
to 255 and the blue

100
00:05:40,260 --> 00:05:42,440
is going to be oscillating
in randomness,

101
00:05:42,440 --> 00:05:44,060
and finally, I'm going to

102
00:05:44,060 --> 00:05:46,830
give it a little bit
of transparency,

103
00:05:48,650 --> 00:05:51,990
150 just to see.

104
00:05:53,720 --> 00:05:57,110
One of the things
that we see here,

105
00:05:57,110 --> 00:05:59,305
it's a little bit of movement.

106
00:05:59,305 --> 00:06:01,530
This is changing because it's

107
00:06:01,530 --> 00:06:04,170
being calculated every frame.

108
00:06:04,170 --> 00:06:07,630
Let's just make sure that we
actually do it as a static.

109
00:06:07,630 --> 00:06:10,070
You might really
like the animation

110
00:06:10,070 --> 00:06:11,405
that we're achieving there.

111
00:06:11,405 --> 00:06:14,180
But let's just remove the
draw function for now just to

112
00:06:14,180 --> 00:06:17,855
get sure that we are
controlling the effect.

113
00:06:17,855 --> 00:06:19,730
That means that everything
will be executed

114
00:06:19,730 --> 00:06:23,540
within the setup
meaning like once.

115
00:06:23,540 --> 00:06:27,845
We can actually see the
result that we're obtaining.

116
00:06:27,845 --> 00:06:33,320
We do have some variability
of color right now.

117
00:06:33,320 --> 00:06:37,010
Again, the invitation is to
play with these parameters.

118
00:06:37,010 --> 00:06:38,420
If you put a zero here,

119
00:06:38,420 --> 00:06:40,325
you would see more clearly that

120
00:06:40,325 --> 00:06:43,040
the values of blue are
going all the way.

121
00:06:43,040 --> 00:06:44,780
Some of them very close to 255,

122
00:06:44,780 --> 00:06:46,085
some of them closer to zero.

123
00:06:46,085 --> 00:06:48,830
That's what the
randomness is giving us.

124
00:06:48,830 --> 00:06:52,415
Maybe you want to give it
somewhere in between something

125
00:06:52,415 --> 00:06:56,435
a little bit of green.
That's up to you.

126
00:06:56,435 --> 00:06:59,045
I'm going to leave it in your
hands. I do want to have

127
00:06:59,045 --> 00:07:00,710
a little bit more brightness

128
00:07:00,710 --> 00:07:05,130
here so I'm going
to put a 255 here.

129
00:07:06,400 --> 00:07:08,555
We have this environment but

130
00:07:08,555 --> 00:07:10,325
it's very rigid at the moment.

131
00:07:10,325 --> 00:07:12,035
It's quite rigid.

132
00:07:12,035 --> 00:07:14,885
I would like to
start playing with

133
00:07:14,885 --> 00:07:19,490
the positioning of
these rectangles

134
00:07:19,490 --> 00:07:21,770
and also the size
that they have.

135
00:07:21,770 --> 00:07:24,455
Maybe we play a little
bit with the size first,

136
00:07:24,455 --> 00:07:30,980
so let's just change
the x size to be,

137
00:07:30,980 --> 00:07:33,110
x size right now it's an 18.

138
00:07:33,110 --> 00:07:37,580
Let's do a random.uniform

139
00:07:37,580 --> 00:07:46,580
between something
like 10 and maybe 50.

140
00:07:46,580 --> 00:07:49,715
I'm thinking of something
that is slightly smaller,

141
00:07:49,715 --> 00:07:52,580
sometimes smaller
than the amount that

142
00:07:52,580 --> 00:07:55,760
we currently have 18
to be the rectangle.

143
00:07:55,760 --> 00:07:57,455
Sometimes bigger,
there's sometimes

144
00:07:57,455 --> 00:07:59,240
the possibility for an overlap.

145
00:07:59,240 --> 00:08:01,430
Maybe that overlap is a
bit too high right now.

146
00:08:01,430 --> 00:08:04,550
But let's just see
what we start getting.

147
00:08:04,550 --> 00:08:11,060
We're going to put that excise
variable replacing the 18.

148
00:08:11,060 --> 00:08:15,515
We're going to keep the
rows as we have them here.

149
00:08:15,515 --> 00:08:18,200
Here you see we're starting to

150
00:08:18,200 --> 00:08:20,090
get some of

151
00:08:20,090 --> 00:08:23,450
these rectangles shifting
around, overlapping.

152
00:08:23,450 --> 00:08:25,820
The fact that we added
some transparency ahead of

153
00:08:25,820 --> 00:08:28,000
time is giving us

154
00:08:28,000 --> 00:08:31,085
that we're able to read

155
00:08:31,085 --> 00:08:32,570
that interference that some of

156
00:08:32,570 --> 00:08:35,495
those rectangles are
giving to one another.

157
00:08:35,495 --> 00:08:37,730
If you didn't have
this transparency

158
00:08:37,730 --> 00:08:39,950
here, it would look a
little bit different.

159
00:08:39,950 --> 00:08:41,165
It would be more solid.

160
00:08:41,165 --> 00:08:43,700
It would feel more flat.

161
00:08:43,700 --> 00:08:46,055
Maybe that's what
you're going for.

162
00:08:46,055 --> 00:08:50,790
But consider that sometimes
blending transparencies

163
00:08:51,010 --> 00:08:57,545
might be a way to register
some of this variability.

164
00:08:57,545 --> 00:09:00,470
Again, we're playing
with randomness in

165
00:09:00,470 --> 00:09:03,020
the x-axis of this rectangle.

166
00:09:03,020 --> 00:09:06,575
Let's finally add a little
bit more randomness.

167
00:09:06,575 --> 00:09:08,570
I feel like it still
looks relatively

168
00:09:08,570 --> 00:09:10,790
rigid in terms of
columns and rows.

169
00:09:10,790 --> 00:09:13,370
I want to maintain a lot
of rigidity in one axis,

170
00:09:13,370 --> 00:09:14,540
but the other one, I wanted to

171
00:09:14,540 --> 00:09:17,340
feel like there's a
bit more playfulness.

172
00:09:18,160 --> 00:09:21,080
Let's add some to

173
00:09:21,080 --> 00:09:24,530
the x coordinate and like
sometimes whenever I do up,

174
00:09:24,530 --> 00:09:26,360
this might not be necessary.

175
00:09:26,360 --> 00:09:27,605
But just to be clear,

176
00:09:27,605 --> 00:09:30,530
this is the coordinate
that we have identified.

177
00:09:30,530 --> 00:09:34,100
Let's add a little
bit of wiggle room.

178
00:09:34,100 --> 00:09:38,405
A little bit of plus and
minus movement to the left or

179
00:09:38,405 --> 00:09:44,130
the right, so
random.uniform again.

180
00:09:44,860 --> 00:09:47,120
Here we could do something

181
00:09:47,120 --> 00:09:56,870
like -10.0, 10.0.

182
00:09:56,870 --> 00:09:59,720
If you want all the movement
to happen towards one side,

183
00:09:59,720 --> 00:10:02,225
you would say 0-20,

184
00:10:02,225 --> 00:10:03,830
and that you would actually be

185
00:10:03,830 --> 00:10:05,870
shifting from the
base point that we

186
00:10:05,870 --> 00:10:11,195
have all the rectangles to the
right to a certain degree.

187
00:10:11,195 --> 00:10:12,680
But in this case, we're
actually creating

188
00:10:12,680 --> 00:10:15,185
wiggle from the left
and to the right.

189
00:10:15,185 --> 00:10:19,490
If we actually get a
range between -10 and 10.

190
00:10:19,490 --> 00:10:21,800
Let's see what we're getting.

191
00:10:21,800 --> 00:10:24,155
You can see that we're
starting to break

192
00:10:24,155 --> 00:10:26,585
a little bit the notion of
a grid in one of the axes.

193
00:10:26,585 --> 00:10:30,510
In the other axis, it's
very readable as such,

194
00:10:30,510 --> 00:10:34,640
but we're starting to play

195
00:10:34,640 --> 00:10:38,420
and starting to
create a composition.

196
00:10:38,420 --> 00:10:41,765
There's so much more that
you can really do by really

197
00:10:41,765 --> 00:10:43,340
playing with some of
the ingredients that

198
00:10:43,340 --> 00:10:45,575
we have covered so far.

199
00:10:45,575 --> 00:10:47,540
The only final thing that I

200
00:10:47,540 --> 00:10:48,980
want to add to this, and again,

201
00:10:48,980 --> 00:10:49,700
I'm not going to go much

202
00:10:49,700 --> 00:10:50,960
further into this
because I really

203
00:10:50,960 --> 00:10:53,945
want to see what you
bring to the table.

204
00:10:53,945 --> 00:10:56,180
We will talk about
this a bit further,

205
00:10:56,180 --> 00:10:58,520
but once we start
using transparencies,

206
00:10:58,520 --> 00:11:01,550
there's different ways
of blending color.

207
00:11:01,550 --> 00:11:04,445
If you are familiar
with Photoshop,

208
00:11:04,445 --> 00:11:07,580
Photoshop has things
like blending modes that

209
00:11:07,580 --> 00:11:09,830
not all transparencies
need to be

210
00:11:09,830 --> 00:11:11,750
added to each other
and basically,

211
00:11:11,750 --> 00:11:14,555
the color arithmetic that
you have when you're

212
00:11:14,555 --> 00:11:17,270
overlaying filters or layers

213
00:11:17,270 --> 00:11:19,445
of color could be
done differently.

214
00:11:19,445 --> 00:11:23,070
I want to use blend mode.

215
00:11:23,950 --> 00:11:26,765
That is going to be an addition.

216
00:11:26,765 --> 00:11:29,270
This is going to be an optional,

217
00:11:29,270 --> 00:11:31,070
something to read about it,

218
00:11:31,070 --> 00:11:32,435
just to expose that there are

219
00:11:32,435 --> 00:11:35,795
different blending modes
also in programming.

220
00:11:35,795 --> 00:11:37,790
There's a small variation

221
00:11:37,790 --> 00:11:39,080
here but what you
should be starting

222
00:11:39,080 --> 00:11:42,650
to see is that when
there is overlap,

223
00:11:42,650 --> 00:11:44,210
you should start reading

224
00:11:44,210 --> 00:11:47,460
a little bit more
brightness into the image.

225
00:11:48,100 --> 00:11:50,600
Again, there's an invitation to

226
00:11:50,600 --> 00:11:53,420
start considering color schemes,

227
00:11:53,420 --> 00:11:57,110
different forms of using
randomness in conjunction to

228
00:11:57,110 --> 00:11:58,925
structures like a grid

229
00:11:58,925 --> 00:12:00,320
to determine what is

230
00:12:00,320 --> 00:12:01,895
a composition that
you're interested in.

231
00:12:01,895 --> 00:12:04,070
Again, we're going to
continue learning how

232
00:12:04,070 --> 00:12:06,275
to use programming
for designers.

233
00:12:06,275 --> 00:12:09,390
I'll see you in the next week.