- Hello, welcome to a coding challenge, Angry Birds.

Although, my birds won't be angry,

they're going to be loving loving birds.

But maybe they won't even be birds,

they'll be like cute little Coding

Train characters, but that's not the point.

I am going to program a version,

a much simpler simplified version

of an Angry Bird style clone.

I'm going to use p5.js, I'm going to use a physics

library called matter.js, and I'm going to

get started in one moment.

But first (laughs) let me diagram out what I need.

So, I'm going to use an object-oriented programing approach.

I'm going to need something called like a box.

So, this will be a box class.

I'm going to need something like a bird,

we'll just call it a bird for right now.

And I also need,

the ground.

So, I'm going to start my simplified Angry Birds,

it's going to have a single box, a single bird.

The box is sitting on the ground.

I'm going to want to toss the bird at the box

and knock it over.

And from there, the glorious games

throughout the universe that you will make

maybe will follow.

This is the p5 web editor, I'm going to use p5

for all of the drawing stuff,

and I'm going to use the physics library matter.js

for handling all of the physics.

Now, matter.js does have rendering built into it

but I'm going to do things my sort of way

of combining both libraries

so that I can do all the rendering custom in p5,

and maybe by the end of this video,

have some of my Coding Train characters

inside of this little game that we make.

Alright, so, first I want to take

an object-oriented approach

and I'm going to do Add File, and I want to add,

I need a bird.js, and I'm going to make

something called a box.js.

And I think I'm going to be able to use

the box for both.

I'm going to use the box class for both

this thing that can actually get knocked over,

and the ground, which needs

to be something immobile, static.

So, what does a box need to have?

It needs to have an x, it needs to have a y,

it needs to have a width, and it needs to have a height.

And I'm going to require that all of those arguments

are passed in, via the constructor.

Then I'm going to, oh, and so I need

to put the arguments in here, x, y, w, h,

and I need to, what do I need to do?

I'm going to write a show function,

and in here, I'm just going to say,

I'm going to use fill to make it white

and I'm going to say rectangle this.x,

this.y, this.w, this.h.

Okay, so, this is the basic idea of a box class,

with no physics, this is just the data

about a box and this is me drawing it.

So, now, in the main sketch, I'm going to say,

let ground, I'm going to have a global variable called ground.

I'm going to say ground equals a new Box,

and it's going to be, the x is going to be at zero,

the y is going to be at like height minus 20,

and the width will be the full width of the window,

and the height will be 20.

And then I'm going to say ground.show.

Now, it's giving me all sorts of errors

like it has no idea what a box is,

and the reason why it has no idea what a box is,

is because even though I added a new JavaScript file,

I didn't add it to my index.html.

So, let me go and add it to index.html, box.js.

And there we go look.

(bell ringing)

Step one is done.

I have the ground.

The ground is there.

Now, the next thing I'm going to do,

is I'm going to have a box.

I'm going to just call it a box.

A box is another new Box,

and let's put it over to the side

in some arbitrary place.

And say box.show, there it is.

I want it to be tall.

I don't know what I'm doing exactly yet,

but something like this, there we go.

Okay, so that's the thing that I need to throw my bird at.

Now, I need another class.

I'm going to do Add File, and I'm going to call this bird,

oh, look when did I?

It like knows what I'm going to do in advance,

isn't that crazy?

I think I've written other things

in the p5 editor with a bird.js.

bird.js, class Bird, and I'm just, you know,

I probably could maybe use inheritance here,

where I made some videos about recently,

but I'm just going to do like a sort

of horrible copy paste job.

But I'm going to change this to an r,

to indicate radius, because my bird

is going to be a circle, and this dot r.

And now I can say let bird, bird equals new Bird,

and it'll be at like 50 pixels over, 300 pixels down,

and with a radius of 25, and oh, doesn't know

what bird is yet again because

I now also need to add bird.js to my index.html file.

So, I've got the bird, I've got the box,

these are all the elements.

So, I have all the elements that I want in my scene.

Ultimately, I'm going to want to have like a stack of boxes

and use images to make this have more personality.

But the next thing that I need to do,

is add physics.

Now, I could use, you know, I could start doing,

adding some functions to do all the physics myself,

but I would like to use a physics engine.

The matter.js library is released through NPM,

node package manager.

So, I can go, and everything NPM,

it's already like appearing in my,

'cause I looked for it before I started this.

But if I just go to unpkg, unpackage

which is the content delivery network

for NPM packages, and do matter.js,

and hit Enter, we can see this is the URL

for the matter.js library.

I want to get the minified version of it.

So, I'm going to also add .min.js.

So, now I have this particular URL.

I can go back to the p5 web editor, index and html

and I can, I'm just going to like paste it here

for a second.

I'm going to grab one of these.

These are the script tags for the p5 library, right.

And so, instead of, I've got p5, p5 dom, p5 sound

and now I want to add matter.js as a library.

So, these are now all of my libraries,

and all of my custom JavaScript code.

And if I go back to sketch.js.

Let's make sure the matter dot library has loaded.

If I just say console log Matter.

We can see yes, stuff is coming out here.

The library is loading.

That would obviously say if I hadn't loaded that library,

I don't know what you're talking about.

So, I have a whole bunch of tutorials

about the matter.js library.

So, I don't need to spend.

I can refer you to those if you want more background.

But basically, I need to establish

this idea of an engine object,

and a world object.

The world is talking about the environment,

and then, each one of these things

will be a body.

This will be a rectangular body,

this will be a rectangular body,

and this will be a circular body.

So, my classes, box and bird,

I'm going to make them wrappers

to have inside of them, a piece of data

which refers to the actual matter.js body.

So, the first thing that I need to do,

I think is let's have a world and an engine.

And then I think I say engine equals Matter.

Well, I think I better do this first.

engine equals Matter.Engine.create,

I don't know, I'm guessing.

I think that's right, having done this before.

And then I think the world is actually

created when I create the engine,

I can just grab it from the world.

So, now I have the matter engine,

and the matter world.

Then inside of my objects, what I want to do,

let's just do the box first.

So, here instead of having an x, a y

and a width, and a height.

Although, I think I might keep

the width and the height just to store it.

I now want to add this.body equals Matter.Bodies.rectangle.

This is a function that in the matter library,

will create a rectangular body object for me.

And I can give it,

I'm going to do this first.

Like, I don't, this box object no longer is going

to have its own x and y, it's just going

to give the matter body, the x and the y.

So, I'm going to say x, y,

I think this is actually what it gets.

And then I need to say

Matter.World.add to the world, this.body.

So, I need to actually put it in the world.

So, what happened to the box?

Oh, oh, oh, I took out this.x.y,

so now, the whole point of this

is in show, I want to ask,

I want to say hey, Matter. (laughs)

I want to say give me a position

which is this.body's position.

And now, I'm going to draw the rectangle at pos.x, and pos.y.

Now, there may be a way in fact,

that I could dig into the body

and get its width and height but I'm just going to store

those out of convenience for myself.

The size of these rectangles is never going to change,

so I can keep that.

There is a big issue here though.

Which is that, one, is that once I start adding the physics,

the box could wobble, meaning it could rotate,

so, I'm also wanting, I'm also going to want to get an angle.

And I am going to want to then draw it with rotation.

So, I'm going to say push, I'm going to say pop.

I'm going to say, translate pos.x, pos.y.

And then the rectangle's at zero, zero.

And I'm going to rotate by that angle.

There's another little weird nuance here.

So, I like for myself, I like to think about

placing the rectangle with the x, y in the corner,

and then the width and the height,

and that's the default behavior of p5.

But matter.js, when you make a rectangular

or circular object, the x, y position

for that object is always in the center.

So, this actually have told matter.js

where the object is and drawn it

in a different place.

So, I need to reconcile those two things.

So, to reconcile those two things.

There's a few different ways I could do it.

One, is first, I should say rectMode CENTER.

So, that I'm drawing.

But now you can see everything's off in a weird place,

which is maybe fine, maybe I just need to rethink

where I'm placing the stuff.

For example, the ground would be now at,

width divided by two, height minus 10.

So, that's the same thing.

So, that's fine.

(hands clapping)

(laughs) That's one way of doing it.