1
00:00:03,560 --> 00:00:09,020
All right, we've reached the pinnacle of our course where we're going to take everything that we've

2
00:00:09,020 --> 00:00:12,740
learned and put it into building an application that does something.

3
00:00:15,420 --> 00:00:16,810
So we're going to put it all together.

4
00:00:18,060 --> 00:00:19,500
We're going to build on our app.

5
00:00:21,150 --> 00:00:25,980
And what we do is we're going to build out the app we've been working on in these other advanced lectures,

6
00:00:26,370 --> 00:00:28,230
which is the shape app.

7
00:00:31,580 --> 00:00:36,080
So we're going to be able to draw shapes with a low resolution, kind of like we did earlier in the

8
00:00:36,080 --> 00:00:41,150
course with lines where we're going to use asterisks as dots of the shape.

9
00:00:44,920 --> 00:00:48,280
So we're going to draw it into a matrix using logical operators.

10
00:00:48,910 --> 00:00:54,070
So in other words, if you have one shape and you're overlaying it on top of another shape, be able

11
00:00:54,070 --> 00:01:04,720
to or it so that if if there's dots in both, they both show up or end it or do the knot operation of

12
00:01:04,720 --> 00:01:08,860
that so that you can essentially draw an outline.

13
00:01:13,800 --> 00:01:17,210
And then be able to display the matrix in an e-mail text area.

14
00:01:18,200 --> 00:01:20,770
So we'll be able to see the shape on the screen.

15
00:01:21,760 --> 00:01:22,630
So let's get started.

16
00:01:25,750 --> 00:01:31,150
So here we are back in our shape's application and we're going to make a few changes here, but the

17
00:01:31,150 --> 00:01:40,580
first thing I do is to have a class or a library that can handle a surface that we're going to display.

18
00:01:41,500 --> 00:01:43,780
So we're going to create a new file.

19
00:01:44,890 --> 00:01:52,270
I'm going to call it surface code, which is called surface to keep it simple.

20
00:01:54,250 --> 00:02:03,370
And what surface is going to have is the ability to take shapes and map them onto a matrix and then

21
00:02:03,370 --> 00:02:07,600
be able to take that matrix and return a string that we can display in the text area.

22
00:02:08,680 --> 00:02:12,280
So we're going to a class expert class

23
00:02:16,660 --> 00:02:17,350
service.

24
00:02:19,480 --> 00:02:23,920
And one thing that the service going to have is its drawing area.

25
00:02:24,790 --> 00:02:26,280
So that drawing area.

26
00:02:28,000 --> 00:02:32,080
So the final array and the array is going to need to be two dimensions.

27
00:02:32,080 --> 00:02:36,610
But in JavaScript, a two dimensional array is an array of arrays.

28
00:02:37,240 --> 00:02:42,040
So we're going to have to add rows to this in each rows, going to have multiple columns.

29
00:02:43,150 --> 00:02:45,520
So we're now we're going to need to know what the width is

30
00:02:50,440 --> 00:02:51,680
and the height.

31
00:02:52,720 --> 00:02:54,820
So it's a rectangle of sorts.

32
00:02:55,750 --> 00:02:57,790
And so then we'll go in here and we'll say constructor

33
00:03:00,580 --> 00:03:02,350
with height,

34
00:03:06,040 --> 00:03:08,980
and then we'll initialize the array and set the width.

35
00:03:08,980 --> 00:03:18,710
And so that with equals with this, that height equals height.

36
00:03:20,080 --> 00:03:22,650
And then we need to initialize the array.

37
00:03:22,960 --> 00:03:28,020
And what this is going to be is an array of booleans because we want to set each point in the array.

38
00:03:28,540 --> 00:03:31,920
Is this thought on or is it off to true or false?

39
00:03:32,410 --> 00:03:34,630
So we initialize it with a bunch of falsies.

40
00:03:36,130 --> 00:03:37,270
So we're going to say.

41
00:03:39,120 --> 00:03:51,660
We will first loop on the hype, so we'll set for what I equals zero less than hype I first and then

42
00:03:51,660 --> 00:03:52,710
we'll move on with.

43
00:03:54,810 --> 00:04:00,790
So we'll say for but J equals zero.

44
00:04:00,810 --> 00:04:05,700
J, let's start with J plus plus

45
00:04:08,760 --> 00:04:18,030
and then what we want to do is for each row we will start that up here, actually will say drawing area

46
00:04:19,230 --> 00:04:23,250
that push it up here at.

47
00:04:25,550 --> 00:04:33,260
So we're going to add a new empty array into it and then for that new empty array, we're going to fill

48
00:04:33,260 --> 00:04:35,340
it up with false values.

49
00:04:36,320 --> 00:04:50,070
So here we're just going to say this drawing area, subi that has a value now that push false.

50
00:04:52,130 --> 00:04:57,050
And so what that's going to do is push a bunch of falsus in going across that column that's going to

51
00:04:57,050 --> 00:04:58,460
go to the next one did the same thing.

52
00:04:59,690 --> 00:05:01,670
So this is enough to get us started.

53
00:05:02,870 --> 00:05:12,590
So let's go back to our start up of Sydney's first started that e-mail and we want to include this as

54
00:05:12,590 --> 00:05:13,100
a module.

55
00:05:15,020 --> 00:05:20,590
covid said, we want surface details, OK?

56
00:05:20,990 --> 00:05:23,890
And then we'll go into our Hello World Initializes.

57
00:05:23,900 --> 00:05:25,430
We want to import

58
00:05:30,290 --> 00:05:38,870
surface from backslash surface gess.

59
00:05:41,380 --> 00:05:52,780
All right, so before we do any of this stuff, we will create our surface, so we will say flat surface

60
00:05:52,900 --> 00:05:59,000
equals new surface will say a hundred by a hundred.

61
00:06:00,940 --> 00:06:01,410
All right.

62
00:06:02,800 --> 00:06:07,170
Now, at this point, I just want to walk through this and prove that it works.

63
00:06:08,300 --> 00:06:11,350
So this is maximizers.

64
00:06:12,800 --> 00:06:13,690
Our source.

65
00:06:15,100 --> 00:06:17,230
Brake and click, run.

66
00:06:18,840 --> 00:06:26,160
So step in, we initialize our drawing area so we have a drawing here that's an empty array, certainly

67
00:06:26,160 --> 00:06:28,130
locals we have right.

68
00:06:28,140 --> 00:06:29,160
We have our width.

69
00:06:30,870 --> 00:06:32,670
Now we're going to get our width and height.

70
00:06:35,570 --> 00:06:39,350
So we have those values and by the way, these are all under this.

71
00:06:40,400 --> 00:06:42,280
So with drawing area.

72
00:06:43,890 --> 00:06:48,420
So going here will first pushing up to your right.

73
00:06:49,620 --> 00:06:55,240
So now we have our drawing area, has one at the ready in it, and then and there is nothing.

74
00:06:56,460 --> 00:07:00,330
So we will start going through this for a loop.

75
00:07:00,990 --> 00:07:06,300
And it's going to add, you can see just having more false values into it.

76
00:07:07,080 --> 00:07:13,140
So let's celebrate back here so we don't have to step 100 times and continue.

77
00:07:14,220 --> 00:07:18,350
So now we have one in here, so we're going to put another one.

78
00:07:20,010 --> 00:07:25,360
So we have a second Acura sommat continue again.

79
00:07:26,250 --> 00:07:32,670
Now we have two, three, four, five, and we added up to get to 100.

80
00:07:33,790 --> 00:07:36,810
So I'm going to go ahead and step out of the car and function.

81
00:07:38,760 --> 00:07:46,260
And once we I guess we're not stepping out far enough to stop this break just about.

82
00:07:47,130 --> 00:07:56,050
And now our surface has a drawing area that has one hundred rows and one hundred columns.

83
00:07:57,810 --> 00:07:58,210
All right.

84
00:07:58,860 --> 00:07:59,790
So that's the first step.

85
00:08:00,300 --> 00:08:07,320
The second step is will be able to take our rectangle, our square and send it to the surface, positioning

86
00:08:07,400 --> 00:08:13,100
a certain position and tying it to draw it into the ends of the surface.

87
00:08:14,790 --> 00:08:17,550
So we need a couple of things.

88
00:08:17,820 --> 00:08:19,260
We can do it a couple of different ways.

89
00:08:20,520 --> 00:08:27,210
One thing is we might just add this on later is we might want to know whether we want to fill it or

90
00:08:27,210 --> 00:08:27,500
not.

91
00:08:27,510 --> 00:08:28,710
There's just an outline.

92
00:08:29,610 --> 00:08:33,060
And for the default right now, we'll just say we're going to fill everything.

93
00:08:33,900 --> 00:08:42,630
And now we want to say, let's see, oh, the position, the position in the surface.

94
00:08:42,630 --> 00:08:44,540
And we'll says from the upper left hand corner.

95
00:08:45,570 --> 00:08:49,510
So zero zero, meaning that it's at the upper left hand corner.

96
00:08:51,210 --> 00:08:58,530
So we need to add that to our rectangle and our square or we just added when we draw it.

97
00:08:59,610 --> 00:09:01,860
So to be flexible, let's add it when we drive.

98
00:09:03,030 --> 00:09:10,720
So going back to our surface, we want to add a method called draw.

99
00:09:15,090 --> 00:09:28,260
So we'll say draw and we will just specify an X and Y position and then the shape.

100
00:09:30,030 --> 00:09:31,360
So what shape are we going to draw?

101
00:09:34,950 --> 00:09:38,080
Now each shape could be drawn differently.

102
00:09:38,970 --> 00:09:41,000
So let's think about this for a second.

103
00:09:42,030 --> 00:09:50,130
We need to position that shape at this X and Y and then overlay what's already there.

104
00:09:50,610 --> 00:09:57,330
So right now, if we say if we say for each point, we have a false value already there and we want

105
00:09:57,330 --> 00:09:59,200
to overlay it to true value.

106
00:09:59,400 --> 00:10:02,370
So we just say false or true and it becomes true.

107
00:10:03,330 --> 00:10:04,280
So here's what we're going to do.

108
00:10:04,290 --> 00:10:09,560
We're going to go back to the shapes and I'm going to say shape draw yourself.

109
00:10:09,930 --> 00:10:16,800
And by that we mean return an array of arrays or a two dimensional array that describes your shape.

110
00:10:18,330 --> 00:10:20,770
So let's go in here and we will create out.

111
00:10:20,860 --> 00:10:21,640
What do we got here?

112
00:10:21,810 --> 00:10:24,630
This is a rectangle will do it on the rectangle first.

113
00:10:25,860 --> 00:10:28,390
And really, that's the same thing as for a square.

114
00:10:29,250 --> 00:10:31,620
So we'll say draw

115
00:10:35,070 --> 00:10:37,540
and we know the width and height.

116
00:10:37,560 --> 00:10:41,080
So we need a matrix of that dimension.

117
00:10:42,450 --> 00:10:48,660
So we'll say what shape equals an array.

118
00:10:49,440 --> 00:10:52,660
So we want to do the same thing is what the surface does here.

119
00:10:53,400 --> 00:10:57,360
So let's build in a static function into the surface to do this.

120
00:11:00,100 --> 00:11:01,900
So we're going to say static

121
00:11:04,630 --> 00:11:06,940
build surface

122
00:11:09,370 --> 00:11:11,200
with clay,

123
00:11:14,560 --> 00:11:17,170
making it static because I want to be able to use it in other places.

124
00:11:17,860 --> 00:11:19,090
So we're going to.

125
00:11:21,000 --> 00:11:23,400
Cut, cut this and put it down here.

126
00:11:27,010 --> 00:11:28,730
We're aware of our width.

127
00:11:28,930 --> 00:11:39,730
We just need a local growing area of growing area because that and then down at the end, we're going

128
00:11:39,730 --> 00:11:40,330
to return it.

129
00:11:47,730 --> 00:11:48,130
All right.

130
00:11:48,160 --> 00:11:49,690
Then up here, we're going to say this.

131
00:11:49,690 --> 00:11:50,680
That drawing area

132
00:11:53,710 --> 00:11:54,520
equals

133
00:11:56,680 --> 00:11:59,860
surface that build surface

134
00:12:02,890 --> 00:12:04,470
with height.

135
00:12:05,620 --> 00:12:07,660
And so that's going to build our drawing area there.

136
00:12:07,660 --> 00:12:10,210
But it's also going to let us use it inside the shape.

137
00:12:12,280 --> 00:12:14,320
So when you go back and import this.

138
00:12:18,990 --> 00:12:19,710
Um,

139
00:12:23,310 --> 00:12:25,140
she's from.

140
00:12:30,930 --> 00:12:32,220
That's a surface.

141
00:12:46,090 --> 00:12:46,650
OK.

142
00:12:52,450 --> 00:12:59,710
So down here where we draw, we won't be able to get our drawing surface the right size, so we're just

143
00:12:59,710 --> 00:13:05,440
going to say surface start, build

144
00:13:08,200 --> 00:13:11,670
this start with this tight height.

145
00:13:14,650 --> 00:13:16,090
So there's our surface.

146
00:13:16,360 --> 00:13:21,050
And because it's a rectangle or a square, we just want to fill the whole thing in.

147
00:13:22,000 --> 00:13:26,010
So let's go back to this and make it a little bit easier on ourselves.

148
00:13:26,560 --> 00:13:30,940
We're filling it in with false here, but let's give it a value that we want to fold in with

149
00:13:33,670 --> 00:13:37,300
called and we'll push our fill.

150
00:13:38,920 --> 00:13:41,500
And up here, our fill will be false.

151
00:13:44,920 --> 00:13:48,910
And then here our film will be true.

152
00:13:52,850 --> 00:13:56,510
And so that is effectively built our shape, so we just can return it.

153
00:14:02,180 --> 00:14:02,480
All right.

154
00:14:02,480 --> 00:14:05,330
So we have a shape for returning when we draw it.

155
00:14:06,080 --> 00:14:08,090
Let's go ahead and put this in the square to.

156
00:14:14,320 --> 00:14:20,170
Actually, we don't need to when we drove the square, we just use the rectangles version of that.

157
00:14:22,050 --> 00:14:22,710
All right.

158
00:14:26,010 --> 00:14:31,890
One thing I think I missed here that I'm using this on the drawing area when I was really a local variable.

159
00:14:35,440 --> 00:14:36,880
Just from the copy and paste.

160
00:14:41,080 --> 00:14:41,980
All right.

161
00:14:47,640 --> 00:14:58,110
All right, so we're turning our shape, so once we have a rectangle, we want to be able to draw that

162
00:14:58,110 --> 00:14:59,140
into the surface.

163
00:14:59,820 --> 00:15:02,320
So let's go to the surface and be able to receive that.

164
00:15:03,360 --> 00:15:07,200
So we're going to say X Y, and we're not going to receive a shape.

165
00:15:07,200 --> 00:15:09,090
We're going to we're going to see the shape.

166
00:15:09,690 --> 00:15:12,720
Sorry, and our shaped.

167
00:15:14,580 --> 00:15:19,080
There's going to be able to be drawn, so I say let

168
00:15:21,420 --> 00:15:24,870
drawing equals shape that draw.

169
00:15:28,710 --> 00:15:30,300
So now we have a matrix.

170
00:15:30,840 --> 00:15:37,390
So we want to do is put it into the other matrix, which is our drawing area.

171
00:15:38,430 --> 00:15:42,140
So I started X and Y and then just copied it.

172
00:15:42,660 --> 00:15:45,840
And so let's do this very easily.

173
00:15:47,290 --> 00:15:49,860
We'll say we'll do the Fahri for J.

174
00:15:49,860 --> 00:15:55,770
Loop four equals zero less than.

175
00:15:59,050 --> 00:16:00,230
So we want to go across.

176
00:16:00,250 --> 00:16:12,040
We want to go down the road so less than this that know this are drawing like I was close

177
00:16:14,800 --> 00:16:18,070
and then we would do the same thing except go across the columns.

178
00:16:19,090 --> 00:16:26,020
And because every row has the same number of columns, we can just look at the first row and say, I've

179
00:16:26,020 --> 00:16:26,920
got let up here

180
00:16:33,370 --> 00:16:38,880
so that J equals zero J less than drawing.

181
00:16:39,770 --> 00:16:44,760
Look at the first row that like J was.

182
00:16:46,780 --> 00:16:52,840
And actually we could prepare for the idea that we don't have the same line for everyone to save drawings

183
00:16:52,840 --> 00:16:53,340
in the box.

184
00:16:55,600 --> 00:17:02,170
So we're going to walk across the shape and we want to do is map it into the drawing area so the drawing

185
00:17:02,170 --> 00:17:11,090
air is mapped into by adding the X and Y values so that this drawing area.

186
00:17:16,780 --> 00:17:23,890
So how we specify this is using the bracket for the row.

187
00:17:25,630 --> 00:17:31,210
So it's X plus five and then a bracket for the count.

188
00:17:33,230 --> 00:17:35,380
Why plus J.

189
00:17:37,730 --> 00:17:46,280
And that equals the value from the shape, which is the drawing I.

190
00:17:48,290 --> 00:17:48,660
J.

191
00:17:50,210 --> 00:17:51,170
I've got ecocide.

192
00:17:54,460 --> 00:18:07,720
All right, so we'll go back to our world and we'll say we want to draw this and say surfers that draw,

193
00:18:08,740 --> 00:18:13,100
you know, pull a 10 comma 10 in the rectangle.

194
00:18:15,490 --> 00:18:16,540
So it's going to subtract.

195
00:18:22,650 --> 00:18:23,640
Stop here.

196
00:18:26,830 --> 00:18:29,080
So let's step in and see what he's doing.

197
00:18:29,560 --> 00:18:31,520
We've got our shape that we're going to draw.

198
00:18:32,590 --> 00:18:40,000
So we get our drawing, which I see that worked, looks like to get a bunch of trews going down 20.

199
00:18:40,000 --> 00:18:43,710
If we look at one of them, we got 10 trees coming across.

200
00:18:44,950 --> 00:18:46,480
So then we will go.

201
00:18:51,240 --> 00:18:59,970
And it's a growing area, so, yes, there's our first true.

202
00:19:01,530 --> 00:19:05,430
All right, let's let's just assume this is going to do its job and step out.

203
00:19:06,240 --> 00:19:07,860
So we have our surface.

204
00:19:08,070 --> 00:19:09,720
We've got our drawing area.

205
00:19:11,450 --> 00:19:14,360
And if I go down here to say row 11.

206
00:19:15,430 --> 00:19:17,800
You can see we got a bunch of truths so on.

207
00:19:19,460 --> 00:19:22,370
Row 12 thing, presumably.

208
00:19:23,720 --> 00:19:30,370
All right, so let's assume we've drawn a rectangle in the surface, so now we're going to be able to

209
00:19:30,370 --> 00:19:33,220
do string of fires so we can put it into a text area.

210
00:19:35,390 --> 00:19:40,850
All right, so go back to the surface and we will say we want to string of this.

211
00:19:42,670 --> 00:19:46,300
And it's not a static string of high.

212
00:19:51,320 --> 00:19:56,180
And all we want to do is create a string with this phone number, we got the backslash end, so we're

213
00:19:56,200 --> 00:20:02,360
going do essentially this for loop thing again and create our our map.

214
00:20:03,380 --> 00:20:17,950
So we'll say let Aschiana equals an empty string and we'll set four, but I equals zero.

215
00:20:18,000 --> 00:20:18,920
I've lost.

216
00:20:18,920 --> 00:20:26,870
And we'll start drawing area that line I suppose.

217
00:20:27,990 --> 00:20:35,820
And then for what J equals zero J less than the start drawing area.

218
00:20:36,350 --> 00:20:47,320
So I like J plus first and then we're just going to create a string based off of each of these.

219
00:20:48,230 --> 00:20:56,900
So we're just going to on the string say next year plus equals.

220
00:20:57,620 --> 00:21:03,220
And then if it's true, we're going to draw a star otherwise with space.

221
00:21:04,310 --> 00:21:13,230
So we'll use our conditional operator and say this, that drawing area.

222
00:21:14,150 --> 00:21:17,270
So I said, OK.

223
00:21:19,190 --> 00:21:26,720
So if that's true, we're going to return an asterisk, otherwise a space.

224
00:21:29,110 --> 00:21:34,240
And then after each one of these fathers insert a new line.

225
00:21:43,370 --> 00:21:45,800
And then at the end of this, we're just going to return the straight.

226
00:21:49,460 --> 00:21:53,960
OK, so but the whole world, we've drawn it.

227
00:21:55,280 --> 00:22:05,140
Let's get our string, but still star equals surfaced extremophile.

228
00:22:08,060 --> 00:22:11,200
All right, let's try that and see what we get back.

229
00:22:17,270 --> 00:22:18,230
Just stop here.

230
00:22:20,220 --> 00:22:21,600
And let's see if we're lucky.

231
00:22:23,010 --> 00:22:27,990
So here's our string and you can see just looking at this in the pop up, that we have our rectangle

232
00:22:27,990 --> 00:22:28,350
in there.

233
00:22:29,830 --> 00:22:30,800
So that's nice.

234
00:22:31,540 --> 00:22:39,070
So next thing we would do is put this into a text area on the e-mail, so let's add that to the original.

235
00:22:44,100 --> 00:22:45,460
So we've got all this stuff here.

236
00:22:45,480 --> 00:22:46,740
Let's create another device

237
00:22:51,450 --> 00:22:53,150
and we're going to create a text area

238
00:22:57,870 --> 00:23:00,380
and let's look at the documentation of text area.

239
00:23:01,230 --> 00:23:04,500
So the three schools, we need to give it an idea.

240
00:23:04,650 --> 00:23:09,580
We have to this document that came along with the ID and we want to do the rows and columns who make

241
00:23:09,660 --> 00:23:11,790
the same size as what we want.

242
00:23:12,840 --> 00:23:17,370
So let's go ahead and just copy this, make it a little bit easier on ourselves.

243
00:23:26,040 --> 00:23:35,630
So instead of every three review, we're going to call it shape area and the same name.

244
00:23:35,670 --> 00:23:37,230
All that doesn't matter for us.

245
00:23:38,130 --> 00:23:46,160
And we're going to say we want 100 rows and one hundred columns.

246
00:23:46,860 --> 00:23:48,070
So let's see what that looks like.

247
00:23:52,680 --> 00:24:00,240
So there's our text area and text rows is a lot bigger than columns, obviously.

248
00:24:01,470 --> 00:24:01,850
All right.

249
00:24:04,920 --> 00:24:08,880
So we've got that and then we want to get that.

250
00:24:10,650 --> 00:24:12,270
So what we need to do.

251
00:24:13,350 --> 00:24:17,490
Is going to our whole world after we hit our string.

252
00:24:18,330 --> 00:24:30,150
Let's go ahead and get this element so we'll see what to do for text area because document that get

253
00:24:31,110 --> 00:24:36,130
oh, no idea of what's called the draw or the shape area.

254
00:24:38,310 --> 00:24:44,150
So then we want to do is assign the string to the value of the text area.

255
00:24:51,760 --> 00:24:52,930
And there's a rectangle.

256
00:24:52,960 --> 00:24:54,910
Hopefully it's 10 wide, 20 tall.

257
00:24:56,170 --> 00:24:58,110
All right, let's add another one in here.

258
00:25:00,180 --> 00:25:09,930
We'll say another one of the same shape, experts will say at 50 30.

259
00:25:13,630 --> 00:25:18,900
We haven't done anything to prevent going outside the bounds, so we don't want to mess with that right

260
00:25:18,900 --> 00:25:19,220
now.

261
00:25:21,030 --> 00:25:22,950
So it could draw outside of the area.

262
00:25:27,960 --> 00:25:31,920
And there's our second one so we could draw our square

263
00:25:34,830 --> 00:25:35,310
this up

264
00:25:41,760 --> 00:25:43,470
and we'll draw a square.

265
00:25:48,780 --> 00:25:55,230
You know, put this at 15, 20.

266
00:25:56,270 --> 00:25:56,510
You

267
00:26:05,250 --> 00:26:07,410
can combine things together first out a little bit.

268
00:26:08,440 --> 00:26:12,740
Let's make it a little bit smaller square.

269
00:26:12,750 --> 00:26:15,570
We'll just make it a 10 and make it five

270
00:26:19,170 --> 00:26:22,350
and let's make it twenty eight

271
00:26:33,390 --> 00:26:33,990
square.

272
00:26:34,020 --> 00:26:41,320
There are other rectangles so we can keep playing with that this and do whatever we want with it.

273
00:26:41,340 --> 00:26:46,410
One of the interesting things that might be to do would be if you draw, if you draw a shape on top

274
00:26:46,410 --> 00:26:48,960
of another shape, flip it the other way.

275
00:26:50,160 --> 00:26:52,770
So let's just try that and then we'll wrap up.

276
00:26:53,520 --> 00:26:56,690
So we'll just make that the default way it does things.

277
00:26:58,050 --> 00:27:01,890
So when we draw right now, I'm saying or equals.

278
00:27:02,850 --> 00:27:04,910
But let's say so.

279
00:27:04,930 --> 00:27:07,220
This is true and this is true.

280
00:27:07,230 --> 00:27:11,010
We want to be false and this is false.

281
00:27:11,010 --> 00:27:12,690
And this is true to be true.

282
00:27:13,530 --> 00:27:16,740
If this is false and this is false, we still want to be false.

283
00:27:17,520 --> 00:27:25,020
So I think I'm searching for what's called an exclusive or or an X or operator, which means that if

284
00:27:25,320 --> 00:27:27,150
both are true, it's false.

285
00:27:27,300 --> 00:27:29,130
If one is true, is true.

286
00:27:29,550 --> 00:27:31,230
If both are false, it's false.

287
00:27:32,100 --> 00:27:34,470
And that operator is the little carrot.

288
00:27:36,930 --> 00:27:38,490
So let's see how that works

289
00:27:45,120 --> 00:27:51,750
and let's draw this on top of square to be bigger.

290
00:27:52,860 --> 00:27:56,870
So we'll still like a thirty and a square.

291
00:27:56,880 --> 00:27:58,680
We want to start it at,

292
00:28:01,500 --> 00:28:06,900
say, 15, 15,

293
00:28:11,490 --> 00:28:12,360
and there we go.

294
00:28:16,140 --> 00:28:21,000
So this section is where it overdrew the other section.

295
00:28:22,260 --> 00:28:25,710
So to show this little more succinctly, let's create another square

296
00:28:30,990 --> 00:28:42,150
called Square two, and we'll make it 10 and we will draw it at 25.

297
00:28:42,150 --> 00:28:43,110
Come at twenty five.

298
00:28:56,570 --> 00:28:59,340
OK, so there's our square that's in the middle of the other square.

299
00:29:01,630 --> 00:29:07,120
So there's a lot more things we could do with this, and I challenge you to do them and give them a

300
00:29:07,120 --> 00:29:07,600
try.

301
00:29:07,840 --> 00:29:12,370
I will put a link for this in the lecture so you can download and play with it.