1
00:00:05,040 --> 00:00:09,110
Hi, welcome to the
second video of Week 4.

2
00:00:09,110 --> 00:00:11,160
In this video, we're
going to be learning

3
00:00:11,160 --> 00:00:13,940
the notion of push
and pop matrix,

4
00:00:13,940 --> 00:00:18,740
which is a very powerful
idea that allows us

5
00:00:18,740 --> 00:00:23,880
to temporarily create a
new coordinate system,

6
00:00:23,880 --> 00:00:25,280
change the origin or

7
00:00:25,280 --> 00:00:29,460
the pivot point we're going
to be working from and

8
00:00:29,460 --> 00:00:33,600
then restore the
coordinate system

9
00:00:33,600 --> 00:00:35,700
that we come by default.

10
00:00:35,700 --> 00:00:40,955
Let's see how this works.
The push matrix operation.

11
00:00:40,955 --> 00:00:43,750
Imagine that what this function

12
00:00:43,750 --> 00:00:46,470
would do is opens
up a new canvas or

13
00:00:46,470 --> 00:00:48,790
creates a new layer on top of

14
00:00:48,790 --> 00:00:52,060
your processing or in
your canvas screen.

15
00:00:52,060 --> 00:00:55,375
In this point, you
could do translations,

16
00:00:55,375 --> 00:00:58,710
we'll see how to do rotations
as well, other things.

17
00:00:58,710 --> 00:01:00,690
But you're basically creating

18
00:01:00,690 --> 00:01:05,250
a temporary space where the
matrix transformations,

19
00:01:05,250 --> 00:01:08,415
meaning the
translations, scales,

20
00:01:08,415 --> 00:01:11,970
and rotations are
going to be stored.

21
00:01:12,210 --> 00:01:16,270
After the push matrix operator,

22
00:01:16,270 --> 00:01:17,430
we can pop the matrix,

23
00:01:17,430 --> 00:01:21,890
meaning we can close that
temporary space and say,

24
00:01:21,890 --> 00:01:23,230
well, we're going
to restore back

25
00:01:23,230 --> 00:01:26,855
the default coordinate space
that we had originally.

26
00:01:26,855 --> 00:01:28,870
Between those two lines,

27
00:01:28,870 --> 00:01:30,670
push matrix and pop matrix,

28
00:01:30,670 --> 00:01:33,590
we can do things like
translate and start working in

29
00:01:33,590 --> 00:01:35,450
a new coordinate system and

30
00:01:35,450 --> 00:01:38,590
then return to our
default state.

31
00:01:38,590 --> 00:01:42,075
Let's see how that would
look. Traditionally, without

32
00:01:42,075 --> 00:01:43,530
any push-and-pop matrix,

33
00:01:43,530 --> 00:01:44,550
we would have
something like this.

34
00:01:44,550 --> 00:01:48,090
We would have a canvas
of 200 by 100 pixels.

35
00:01:48,090 --> 00:01:51,010
If we do a rectangle
in the 0,0 coordinate,

36
00:01:51,010 --> 00:01:53,175
it would be located in
the top left corner.

37
00:01:53,175 --> 00:01:57,210
If we do a push-and-pop matrix,

38
00:01:57,210 --> 00:02:00,170
we use it as a
beginning statement.

39
00:02:00,170 --> 00:02:01,590
We open a push matrix,

40
00:02:01,590 --> 00:02:04,710
we can use something
like translate to change

41
00:02:04,710 --> 00:02:06,430
the origin point to

42
00:02:06,430 --> 00:02:09,110
a new location and then
draw the rectangle.

43
00:02:09,110 --> 00:02:10,590
As we learned, we translate,

44
00:02:10,590 --> 00:02:12,810
it would be located at

45
00:02:12,810 --> 00:02:14,400
the pivot point where this new

46
00:02:14,400 --> 00:02:16,170
translate location
has been established.

47
00:02:16,170 --> 00:02:17,630
Once we pop the matrix,

48
00:02:17,630 --> 00:02:20,290
that means that we come back to

49
00:02:20,290 --> 00:02:21,950
the default where the

50
00:02:21,950 --> 00:02:24,805
coordinate 0,0 would be
in the top left corner.

51
00:02:24,805 --> 00:02:26,930
Let's see how that
would play out if

52
00:02:26,930 --> 00:02:30,200
the rectangle would be drawn
outside the pop matrix.

53
00:02:30,200 --> 00:02:34,730
If you see the rectangle is
drawn outside the pop matrix,

54
00:02:34,730 --> 00:02:37,270
it would be drawn exactly

55
00:02:38,000 --> 00:02:42,115
as if we didn't have
any translate in place.

56
00:02:42,115 --> 00:02:44,040
This operation is incredibly

57
00:02:44,040 --> 00:02:45,540
powerful because it allows us

58
00:02:45,540 --> 00:02:49,500
to temporarily open up
this new coordinate space,

59
00:02:49,500 --> 00:02:52,880
do some design work,
some graphics,

60
00:02:52,880 --> 00:02:55,180
and there could be a series
of geometries operating

61
00:02:55,180 --> 00:02:58,470
under that matrix
transformation.

62
00:02:58,470 --> 00:03:01,940
Then when we close it
through the pop matrix line,

63
00:03:01,940 --> 00:03:03,840
we basically restore the script

64
00:03:03,840 --> 00:03:06,160
to be running the
way we started.

65
00:03:06,160 --> 00:03:08,640
This is an incredibly
powerful technique.

66
00:03:08,640 --> 00:03:12,425
Let's see how we put it
in place within Python.

67
00:03:12,425 --> 00:03:18,615
Here we are again in
our template canvas.

68
00:03:18,615 --> 00:03:23,900
Let's start by consolidating

69
00:03:23,900 --> 00:03:26,955
this idea of push
and pop matrix.

70
00:03:26,955 --> 00:03:29,700
Let's repeat what
we just covered.

71
00:03:29,700 --> 00:03:34,600
Let's do a rectangle
at 0,0 and 200, 200.

72
00:03:34,700 --> 00:03:43,680
Let's do a field that has a
little bit of transparency,

73
00:03:45,950 --> 00:03:48,735
maybe something like that.

74
00:03:48,735 --> 00:03:50,685
Yeah, it's still quite visible.

75
00:03:50,685 --> 00:03:55,050
You can see a rectangle
on the top left corner.

76
00:03:56,840 --> 00:04:01,180
If we would actually do
something like translate,

77
00:04:04,250 --> 00:04:08,825
let's say we're going
to move this rectangle,

78
00:04:08,825 --> 00:04:10,940
600 pixels and 300

79
00:04:10,940 --> 00:04:13,920
so that would be in the
center of the screen.

80
00:04:16,880 --> 00:04:22,290
We would be locating it in
the center of the screen,

81
00:04:22,290 --> 00:04:24,050
and this would be our
new coordinate system.

82
00:04:24,050 --> 00:04:33,010
But let's add to that a push
matrix and a pop matrix.

83
00:04:35,570 --> 00:04:37,720
At this point, if we run this,

84
00:04:37,720 --> 00:04:39,700
it would be exactly the same.

85
00:04:39,700 --> 00:04:42,740
The new coordinate
system is on the center.

86
00:04:42,740 --> 00:04:45,900
There's no real reason for
this push-and-pop matrix.

87
00:04:45,900 --> 00:04:49,080
But let's repeat this line where

88
00:04:49,080 --> 00:04:52,965
the rectangle is drawn
outside the pop matrix.

89
00:04:52,965 --> 00:04:55,680
We have to translate
the rectangle

90
00:04:55,680 --> 00:04:58,100
which is drawn at the center of

91
00:04:58,100 --> 00:05:00,820
the screen and then
another rectangle

92
00:05:00,820 --> 00:05:03,725
that is drawn outside
the pop matrix.

93
00:05:03,725 --> 00:05:06,170
You see that the second
rectangle now it is

94
00:05:06,170 --> 00:05:09,510
drawn back at its origin.

95
00:05:09,550 --> 00:05:12,065
The new coordinate system

96
00:05:12,065 --> 00:05:14,855
of the center of the
screen being 0, 0,

97
00:05:14,855 --> 00:05:20,765
it's only in effect between
this line and this line.

98
00:05:20,765 --> 00:05:23,630
That's why we talk
about almost a layer,

99
00:05:23,630 --> 00:05:25,505
thinking that these few lines

100
00:05:25,505 --> 00:05:28,475
represent a new
coordinate system.

101
00:05:28,475 --> 00:05:30,170
Within this space,
we could actually do

102
00:05:30,170 --> 00:05:32,675
a series of geometries
would be like,

103
00:05:32,675 --> 00:05:34,610
again, circles, text, anything.

104
00:05:34,610 --> 00:05:36,350
It's really useful
if you're really

105
00:05:36,350 --> 00:05:38,000
trying to create, let's say,

106
00:05:38,000 --> 00:05:39,830
a figure or something
that it's like

107
00:05:39,830 --> 00:05:42,650
a group that you want all
these pieces to move together.

108
00:05:42,650 --> 00:05:44,120
Instead of trying to figure

109
00:05:44,120 --> 00:05:45,620
out the coordinates
of each one of

110
00:05:45,620 --> 00:05:49,775
those pieces independently in

111
00:05:49,775 --> 00:05:51,140
wherever you want to
place them in the screen,

112
00:05:51,140 --> 00:05:52,670
you just do them
in relation to 0,

113
00:05:52,670 --> 00:05:55,550
0, so that they all
work in relation to 0,

114
00:05:55,550 --> 00:05:58,400
0 but then the translate
allows you to move

115
00:05:58,400 --> 00:06:00,410
those series of objects

116
00:06:00,410 --> 00:06:03,680
altogether into the location
that you really want them.

117
00:06:03,680 --> 00:06:08,270
Let's see how to use this
concept within a for loop,

118
00:06:08,270 --> 00:06:10,940
because sometimes it might

119
00:06:10,940 --> 00:06:15,485
be counterintuitive of how

120
00:06:15,485 --> 00:06:18,240
much can we actually use
this push and pop matrix.

121
00:06:18,240 --> 00:06:21,920
Let's do for I in range,

122
00:06:21,920 --> 00:06:25,730
and I'm going to
do 0-100 for now,

123
00:06:25,730 --> 00:06:27,990
this is good to start.

124
00:06:28,360 --> 00:06:32,390
Let's make all the code

125
00:06:32,390 --> 00:06:36,570
here within a push
and pop matrix.

126
00:06:40,090 --> 00:06:44,040
Let's import the random
function as well.

127
00:06:46,510 --> 00:06:52,830
We have import random.randrange.

128
00:06:53,860 --> 00:06:56,660
We're going to do
just zero to 1,200,

129
00:06:56,660 --> 00:06:59,070
you can put the variable canvas,

130
00:06:59,320 --> 00:07:02,225
weight it on canvas
height if you want.

131
00:07:02,225 --> 00:07:05,880
Just trying to write
it relatively quickly.

132
00:07:11,050 --> 00:07:15,650
We're going to draw always
the rectangle at 0, 0,

133
00:07:15,650 --> 00:07:20,195
and let's do only maybe
20 pixels and 20 pixels.

134
00:07:20,195 --> 00:07:22,100
It's always going to be at 0, 0,

135
00:07:22,100 --> 00:07:28,460
but let's translate to be x, y.

136
00:07:29,800 --> 00:07:31,880
We can actually get rid of

137
00:07:31,880 --> 00:07:34,805
this second rectangle that
we were using for reference.

138
00:07:34,805 --> 00:07:37,820
What's going on here is
that within the for loop,

139
00:07:37,820 --> 00:07:41,090
we create a random location.

140
00:07:41,090 --> 00:07:43,085
We push the matrix,

141
00:07:43,085 --> 00:07:44,900
we translate the matrix,

142
00:07:44,900 --> 00:07:48,120
so we change the origin
point to a new location.

143
00:07:48,460 --> 00:07:52,475
Let's do two figures so
it's a little bit clearer.

144
00:07:52,475 --> 00:07:59,370
We draw a rectangle
and an ellipse from 0,

145
00:07:59,370 --> 00:08:06,890
0, 20, 20. If we want it,

146
00:08:06,890 --> 00:08:13,200
we could say the ellipse
mode, it's corner.

147
00:08:13,510 --> 00:08:16,610
We're going to draw
a rectangle and

148
00:08:16,610 --> 00:08:19,700
an ellipse inside it,

149
00:08:19,700 --> 00:08:23,315
and then we pop the
matrix and we start over.

150
00:08:23,315 --> 00:08:25,670
We find a random point,
we push the matrix,

151
00:08:25,670 --> 00:08:27,965
we translate the pivot point,

152
00:08:27,965 --> 00:08:29,840
and we draw these
two figures that

153
00:08:29,840 --> 00:08:31,580
we always want them
to be together.

154
00:08:31,580 --> 00:08:34,910
Let's see if this is
actually working.

155
00:08:34,910 --> 00:08:37,760
As you can see here,
it's actually working,

156
00:08:37,760 --> 00:08:40,925
but the graphics
are not very good.

157
00:08:40,925 --> 00:08:43,400
It seems to be working.

158
00:08:43,400 --> 00:08:48,180
Let's just do a maybe
50 in the field.

159
00:08:50,170 --> 00:08:52,535
Hopefully you can
see that we have

160
00:08:52,535 --> 00:08:56,610
a rectangle and a
circle inside it.

161
00:08:58,540 --> 00:09:02,615
What we could do here is
actually that the ellipse,

162
00:09:02,615 --> 00:09:04,505
let's do them without a feel,

163
00:09:04,505 --> 00:09:12,900
so maybe stroke and no feel.

164
00:09:15,760 --> 00:09:18,350
That's a little
bit more readable.

165
00:09:18,350 --> 00:09:19,880
The figure that we're ultimately

166
00:09:19,880 --> 00:09:22,460
achieving these two drawings,

167
00:09:22,460 --> 00:09:24,410
they're moving always
together because they're

168
00:09:24,410 --> 00:09:28,310
drawn in a new origin point.

169
00:09:28,310 --> 00:09:30,290
We can do that
infinite number of

170
00:09:30,290 --> 00:09:34,340
times with this function,
push and pop matrix.

171
00:09:34,340 --> 00:09:36,305
We're always restoring back

172
00:09:36,305 --> 00:09:39,305
to a default and next
time we look around,

173
00:09:39,305 --> 00:09:42,065
we can create a new
coordinate system.

174
00:09:42,065 --> 00:09:45,065
We can certainly use this
technique within a for loop,

175
00:09:45,065 --> 00:09:48,680
we could use it without it
and really use it to group

176
00:09:48,680 --> 00:09:50,300
a series of elements
that maybe have

177
00:09:50,300 --> 00:09:53,435
a similar coordinate
relation to one another,

178
00:09:53,435 --> 00:09:56,210
and being drawn in a way
that it's a lot easier

179
00:09:56,210 --> 00:09:58,625
than really finding the
right coordinates for them.

180
00:09:58,625 --> 00:10:00,140
We're going to be
continuing using

181
00:10:00,140 --> 00:10:01,445
push and pop matrix throughout

182
00:10:01,445 --> 00:10:03,230
the following videos and
learn how we can actually

183
00:10:03,230 --> 00:10:05,300
introduce things like
rotation at scale.

184
00:10:05,300 --> 00:10:07,920
I'll see you in the next video.