All right, we've reached the pinnacle of our course where we're going to take everything that we've
learned and put it into building an application that does something.
So we're going to put it all together.
We're going to build on our app.
And what we do is we're going to build out the app we've been working on in these other advanced lectures,
which is the shape app.
So we're going to be able to draw shapes with a low resolution, kind of like we did earlier in the
course with lines where we're going to use asterisks as dots of the shape.
So we're going to draw it into a matrix using logical operators.
So in other words, if you have one shape and you're overlaying it on top of another shape, be able
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
that so that you can essentially draw an outline.
And then be able to display the matrix in an e-mail text area.
So we'll be able to see the shape on the screen.
So let's get started.
So here we are back in our shape's application and we're going to make a few changes here, but the
first thing I do is to have a class or a library that can handle a surface that we're going to display.
So we're going to create a new file.
I'm going to call it surface code, which is called surface to keep it simple.
And what surface is going to have is the ability to take shapes and map them onto a matrix and then
be able to take that matrix and return a string that we can display in the text area.
So we're going to a class expert class
service.
And one thing that the service going to have is its drawing area.
So that drawing area.
So the final array and the array is going to need to be two dimensions.
But in JavaScript, a two dimensional array is an array of arrays.
So we're going to have to add rows to this in each rows, going to have multiple columns.
So we're now we're going to need to know what the width is
and the height.
So it's a rectangle of sorts.
And so then we'll go in here and we'll say constructor
with height,
and then we'll initialize the array and set the width.
And so that with equals with this, that height equals height.
And then we need to initialize the array.
And what this is going to be is an array of booleans because we want to set each point in the array.
Is this thought on or is it off to true or false?
So we initialize it with a bunch of falsies.
So we're going to say.
We will first loop on the hype, so we'll set for what I equals zero less than hype I first and then
we'll move on with.
So we'll say for but J equals zero.
J, let's start with J plus plus
and then what we want to do is for each row we will start that up here, actually will say drawing area
that push it up here at.
So we're going to add a new empty array into it and then for that new empty array, we're going to fill
it up with false values.
So here we're just going to say this drawing area, subi that has a value now that push false.
And so what that's going to do is push a bunch of falsus in going across that column that's going to
go to the next one did the same thing.
So this is enough to get us started.
So let's go back to our start up of Sydney's first started that e-mail and we want to include this as
a module.
covid said, we want surface details, OK?
And then we'll go into our Hello World Initializes.
We want to import
surface from backslash surface gess.
All right, so before we do any of this stuff, we will create our surface, so we will say flat surface
equals new surface will say a hundred by a hundred.
All right.
Now, at this point, I just want to walk through this and prove that it works.
So this is maximizers.
Our source.
Brake and click, run.
So step in, we initialize our drawing area so we have a drawing here that's an empty array, certainly
locals we have right.
We have our width.
Now we're going to get our width and height.
So we have those values and by the way, these are all under this.
So with drawing area.
So going here will first pushing up to your right.
So now we have our drawing area, has one at the ready in it, and then and there is nothing.
So we will start going through this for a loop.
And it's going to add, you can see just having more false values into it.
So let's celebrate back here so we don't have to step 100 times and continue.
So now we have one in here, so we're going to put another one.
So we have a second Acura sommat continue again.
Now we have two, three, four, five, and we added up to get to 100.
So I'm going to go ahead and step out of the car and function.
And once we I guess we're not stepping out far enough to stop this break just about.
And now our surface has a drawing area that has one hundred rows and one hundred columns.
All right.
So that's the first step.
The second step is will be able to take our rectangle, our square and send it to the surface, positioning
a certain position and tying it to draw it into the ends of the surface.
So we need a couple of things.
We can do it a couple of different ways.
One thing is we might just add this on later is we might want to know whether we want to fill it or
not.
There's just an outline.
And for the default right now, we'll just say we're going to fill everything.
And now we want to say, let's see, oh, the position, the position in the surface.
And we'll says from the upper left hand corner.
So zero zero, meaning that it's at the upper left hand corner.
So we need to add that to our rectangle and our square or we just added when we draw it.
So to be flexible, let's add it when we drive.
So going back to our surface, we want to add a method called draw.
So we'll say draw and we will just specify an X and Y position and then the shape.
So what shape are we going to draw?
Now each shape could be drawn differently.
So let's think about this for a second.
We need to position that shape at this X and Y and then overlay what's already there.
So right now, if we say if we say for each point, we have a false value already there and we want
to overlay it to true value.
So we just say false or true and it becomes true.
So here's what we're going to do.
We're going to go back to the shapes and I'm going to say shape draw yourself.
And by that we mean return an array of arrays or a two dimensional array that describes your shape.
So let's go in here and we will create out.
What do we got here?
This is a rectangle will do it on the rectangle first.
And really, that's the same thing as for a square.
So we'll say draw
and we know the width and height.
So we need a matrix of that dimension.
So we'll say what shape equals an array.
So we want to do the same thing is what the surface does here.
So let's build in a static function into the surface to do this.
So we're going to say static
build surface
with clay,
making it static because I want to be able to use it in other places.
So we're going to.
Cut, cut this and put it down here.
We're aware of our width.
We just need a local growing area of growing area because that and then down at the end, we're going
to return it.
All right.
Then up here, we're going to say this.
That drawing area
equals
surface that build surface
with height.
And so that's going to build our drawing area there.
But it's also going to let us use it inside the shape.
So when you go back and import this.
Um,
she's from.
That's a surface.
OK.
So down here where we draw, we won't be able to get our drawing surface the right size, so we're just
going to say surface start, build
this start with this tight height.
So there's our surface.
And because it's a rectangle or a square, we just want to fill the whole thing in.
So let's go back to this and make it a little bit easier on ourselves.
We're filling it in with false here, but let's give it a value that we want to fold in with
called and we'll push our fill.
And up here, our fill will be false.
And then here our film will be true.
And so that is effectively built our shape, so we just can return it.
All right.
So we have a shape for returning when we draw it.
Let's go ahead and put this in the square to.
Actually, we don't need to when we drove the square, we just use the rectangles version of that.
All right.
One thing I think I missed here that I'm using this on the drawing area when I was really a local variable.
Just from the copy and paste.
All right.
All right, so we're turning our shape, so once we have a rectangle, we want to be able to draw that
into the surface.
So let's go to the surface and be able to receive that.
So we're going to say X Y, and we're not going to receive a shape.
We're going to we're going to see the shape.
Sorry, and our shaped.
There's going to be able to be drawn, so I say let
drawing equals shape that draw.
So now we have a matrix.
So we want to do is put it into the other matrix, which is our drawing area.
So I started X and Y and then just copied it.
And so let's do this very easily.
We'll say we'll do the Fahri for J.
Loop four equals zero less than.
So we want to go across.
We want to go down the road so less than this that know this are drawing like I was close
and then we would do the same thing except go across the columns.
And because every row has the same number of columns, we can just look at the first row and say, I've
got let up here
so that J equals zero J less than drawing.
Look at the first row that like J was.
And actually we could prepare for the idea that we don't have the same line for everyone to save drawings
in the box.
So we're going to walk across the shape and we want to do is map it into the drawing area so the drawing
air is mapped into by adding the X and Y values so that this drawing area.
So how we specify this is using the bracket for the row.
So it's X plus five and then a bracket for the count.
Why plus J.
And that equals the value from the shape, which is the drawing I.
J.
I've got ecocide.
All right, so we'll go back to our world and we'll say we want to draw this and say surfers that draw,
you know, pull a 10 comma 10 in the rectangle.
So it's going to subtract.
Stop here.
So let's step in and see what he's doing.
We've got our shape that we're going to draw.
So we get our drawing, which I see that worked, looks like to get a bunch of trews going down 20.
If we look at one of them, we got 10 trees coming across.
So then we will go.
And it's a growing area, so, yes, there's our first true.
All right, let's let's just assume this is going to do its job and step out.
So we have our surface.
We've got our drawing area.
And if I go down here to say row 11.
You can see we got a bunch of truths so on.
Row 12 thing, presumably.
All right, so let's assume we've drawn a rectangle in the surface, so now we're going to be able to
do string of fires so we can put it into a text area.
All right, so go back to the surface and we will say we want to string of this.
And it's not a static string of high.
And all we want to do is create a string with this phone number, we got the backslash end, so we're
going do essentially this for loop thing again and create our our map.
So we'll say let Aschiana equals an empty string and we'll set four, but I equals zero.
I've lost.
And we'll start drawing area that line I suppose.
And then for what J equals zero J less than the start drawing area.
So I like J plus first and then we're just going to create a string based off of each of these.
So we're just going to on the string say next year plus equals.
And then if it's true, we're going to draw a star otherwise with space.
So we'll use our conditional operator and say this, that drawing area.
So I said, OK.
So if that's true, we're going to return an asterisk, otherwise a space.
And then after each one of these fathers insert a new line.
And then at the end of this, we're just going to return the straight.
OK, so but the whole world, we've drawn it.
Let's get our string, but still star equals surfaced extremophile.
All right, let's try that and see what we get back.
Just stop here.
And let's see if we're lucky.
So here's our string and you can see just looking at this in the pop up, that we have our rectangle
in there.
So that's nice.
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.
So we've got all this stuff here.
Let's create another device
and we're going to create a text area
and let's look at the documentation of text area.
So the three schools, we need to give it an idea.
We have to this document that came along with the ID and we want to do the rows and columns who make
the same size as what we want.
So let's go ahead and just copy this, make it a little bit easier on ourselves.
So instead of every three review, we're going to call it shape area and the same name.
All that doesn't matter for us.
And we're going to say we want 100 rows and one hundred columns.
So let's see what that looks like.
So there's our text area and text rows is a lot bigger than columns, obviously.
All right.
So we've got that and then we want to get that.
So what we need to do.
Is going to our whole world after we hit our string.
Let's go ahead and get this element so we'll see what to do for text area because document that get
oh, no idea of what's called the draw or the shape area.
So then we want to do is assign the string to the value of the text area.
And there's a rectangle.
Hopefully it's 10 wide, 20 tall.
All right, let's add another one in here.
We'll say another one of the same shape, experts will say at 50 30.
We haven't done anything to prevent going outside the bounds, so we don't want to mess with that right
now.
So it could draw outside of the area.
And there's our second one so we could draw our square
this up
and we'll draw a square.
You know, put this at 15, 20.
You
can combine things together first out a little bit.
Let's make it a little bit smaller square.
We'll just make it a 10 and make it five
and let's make it twenty eight
square.
There are other rectangles so we can keep playing with that this and do whatever we want with it.
One of the interesting things that might be to do would be if you draw, if you draw a shape on top
of another shape, flip it the other way.
So let's just try that and then we'll wrap up.
So we'll just make that the default way it does things.
So when we draw right now, I'm saying or equals.
But let's say so.
This is true and this is true.
We want to be false and this is false.
And this is true to be true.
If this is false and this is false, we still want to be false.
So I think I'm searching for what's called an exclusive or or an X or operator, which means that if
both are true, it's false.
If one is true, is true.
If both are false, it's false.
And that operator is the little carrot.
So let's see how that works
and let's draw this on top of square to be bigger.
So we'll still like a thirty and a square.
We want to start it at,
say, 15, 15,
and there we go.
So this section is where it overdrew the other section.
So to show this little more succinctly, let's create another square
called Square two, and we'll make it 10 and we will draw it at 25.
Come at twenty five.
OK, so there's our square that's in the middle of the other square.
So there's a lot more things we could do with this, and I challenge you to do them and give them a
try.
I will put a link for this in the lecture so you can download and play with it.