(train whistle sound) - 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. And my rectangle is in a weird place. But I'm not going to worry
about that right now, I'm going to position
stuff and I obviously could use some math to get it to rest perfectly on the ground. But I'm not going to worry about that. Still, there's no physics happening. Why is there no physics happening? I created the body, I
added it to the world. It's because I'm not running the engine. So, what I need to do, draw is my loop. So, basically I need to say every time through draw step forward in time. So, I think I can just say engine.run, no. (bell ringing) I looked it up. I probably could have
shown you me looking it up, but it's not, how do
you look this stuff up? Let me show you, looking it up. So, if I go here and I go under engine, and I scroll through here. I could be like, oh, where's
that engine.run function. Oh, it is there, how interesting. But that's not, oh I forgot
to say Matter.engine, but that's actually not
what I want. (laughs) I want to use update. I think there's two different
ways of doing things. Engine.run will just
set the engine running. But I want to lock step
my p5 animation loop with my matter physics engine, so I'm going to use update. So, and what I'm going to do then is in here, I'm going
to say Engine.update, but I need to say Matter.Engine.update and there we go, oh, did you see that. The physics is happening. (sighing) But the ground fell out below
us, we're sinking. (laughs) It's okay everybody, we can
violate the laws of physics and create an object with
infinite mass that never moves. The ground can be known as a static, it can be a static object. So, objects that you create in matter.js, the physics engines can
be static or dynamic, by default they're dynamic. So, the tricky thing here is I'm using the same box class to describe both the ground, and that rectangle. So, I could separate them if they really are different, or use inheritance, but maybe, why not? Let's use inheritance. This will be fun. I've been talking about
inheritance, let's use it. So, I'm going to add another file. I don't know if this
is the best technique. I'm going to call it ground. And I'm going to say class Ground, oh there's a problem with
this idea but it's fine, extends Box (laughs) and then
I'm going to say constructor. It's going to get a x,
y, width, and a height. I'm going to say super
x, y, width, and height. So, now, the ground is a class that inherits everything from box. If you don't know about inheritance, I'll refer you to my video about that. And I can go into sketch, and I can now say ground
equals new Ground, and it's not defined because I have to add it to my index.html, there it is, hello. Alright, now, what still? Still. (bell ringing) Wow, something really crazy happened. I kind of forgot that the order, it usually doesn't matter for me because I don't have
anything really happen until the setup function in
draw, and everything has loaded. But I can't reference the
Ground.js JavaScript file before box.js 'cause it's extending box, and as it's loading the DOM, it's got to look at the box file first. So, this actually is one
of the rare instances where I've got to put this script tag before that one, no. (laughs) Oh no, that's the bird. Yes, this is going to work any second now. Yes. Okay, oh, it still goes away. So, now I need to figure out how do I just change one thing to make this static? Can I do this? this.body is static equals true. Yay. Okay, so, this is the idea of I have a whole other kind of
body that extends box, it does everything the same way, but I can set an additional
variable isStatic to true. And so, now, when this runs, we've got our Angry Bird box thing over there, and now we're ready to
start working with our bird. Oh, okay. So, let's work with our bird now. So, we need to get rid of the x and the y. I'm going to say this.body equals Matter.Bodies.circle, x, y, r. I'm going to do the same thing. I'll actually worry about rotation. So, I'm going to sort
of cheat a little bit, by just copying this over, 'cause I don't feel like typing right now, and then just change this
to circle, and this dot r, and there we go. And then I also should
say Matter.World.add this.body to the world, or this.body to the world. There we go. Ah, it's rolling away. Alright, excellent. So, I want to be able to toss this bird over here to this rectangle, how do I do that? Well okay, maybe I do an if statement to see if I click the mouse
inside it, then I grab it. Well, one of the nice things
that matter.js provides is this very general thing
called a MouseConstraint. So, I can add, I'm going to add,
and this is a little tricky. I'm definitely going to
have to look this up. I'm going to call this
mConstraint for mouse constraint, and then I'm going to say
mConstraint equals matter dot, alright we're going to
have to look this up. I want a MouseConstraint. Create engine options, okay. So, this is what I want,
matter.MouseConstraint.create. So, I'm going to say,
Matter.MouseConstraint, was capital, MouseConstraint.create, and give it the engine. Okay, so, look at this,
options.mouse was undefined, options.element was undefined. May not function as expected. So, matter.js is giving
me a nice warning here, explaining that well you
made this mouse constraint, but you need tell me
where you're going to be clicking the mouse, I need to know where you're clicking the mouse. And where I am clicking
the mouse is in the canvas. So, I could like if the
canvas is a DOM element, does it have an ID. Well, one of the nice
things about using p5 is I can just store in a variable, the result of createCanvas
which is this canvas object. And I should be able to now say, I should be able to give it some options. And then so I can add
a second argument here, which is options, and I think I need to
just give it mouse null. I'm just going to put things as null, and then element null. (bell ringing) Alright I'm back, after
looking up what I need to do. So, what I forgot is
that I need this mouse. So, I need a separate mouse object that I can use to create and manipulate those mouse inputs. One of the interesting
things, there's a live chat going on right now as I'm recording this. And Alka wrote a nice
suggestion for aliasing all these matter dot things, you'll notice how I'm driving to write matter dot, matter dot, matter dot everywhere. So, I'm going to actually
just go over here and take. I forget what this is called, but this is kind of a new fangled JavaScript thing, where I can basically
just make a nice list of all these objects I want. I'm at Engine, World, MouseConstraint and I'm maybe going to use Constraint, and I can just set that
all equal to Matter. So, basically, this is me aliasing everything that's matter.Engine, matter.World, matter.Bodies. So, in theory, I should be able
to just say Engine now here, this makes things a little bit easier, just MouseConstraint here. So, my code is a little bit more succinct and I'll go back and fix that in other places, as necessary. But, what I need here is a Mouse, and I need to say constant Matter mouse, I'll just call it mouse equals
Mouse.create canvas.elt. So, I need to make a mouse
object with the DOM element associated with the canvas. And then I believe, I can just
put this here, under options. And now, here we go, let me
bring this all the way back. Dare I say, oh no, oh, so close. Oh, what did I forget? I probably have to add it to the world. World.add world, mConstraint. Yay, look. Now, I can pick this stuff up and I can toss it, oh look come on. I can do better. Yay, oh, goodbye. What's left to do? I want to add a few more boxes. I want to put images instead of these, just these boxes and circles, and I think I should try to add a slingshot,
even though right now, I could kind of just toss it. Okay, the first thing would
be just adding more boxes. So, I'm going to change box to boxes, and I am going to now
have a little for loop, i is zero, i is less
than three, i plus plus. And then I'm going to say
instead of a single box, I'm going to say boxes
index i equals a new Box, and then here I am going to then say for let box of boxes,
little for loop, draw them all. So, now you can see, look at that, What's so crazy, is when I start
them all at the same point, the two objects cannot appear, cannot occupy the same
space in a world of physics. So, they like burst off from each other. But let's do something like
say, 300 minus i times 75, which will stack them. So, now I have little stack of boxes, and then I can toss it, and there we go, I didn't knock them over. Oh, whoa, I threw it over. So there's some nuance here
to how physics engines work and how I'm going to need to
create some balance in the system. And you know, one of the things there is I probably need to increase
the number of iterations per update in order for
it not to be able to move so fast, just to jump over the stuff. But let me just run this again. I want to really see if I
can knock those things over. Yay, I knocked them over. I could also play around
with the properties like restitution and friction, which are physics attributes of
each of these objects, restitution being
elasticity or bouncyness. So, maybe towards the end of this video, I'll try adding that. But now we're in pretty good shape. So, let me add the slingshot. So, what I did right now, is I created this idea of a MouseConstraint, and a MouseConstraint is
this very generic constraint that just like, any time
I click on something it'll make a little spring like connection between where I click the
mouse, and the object, so I can move it around. But what I want, is actually to introduce, a constraint maybe right here,
that's fixed to this point, and only attached to this particular bird. And I think it's probably
smart for me to wrap this into a class. Because I'm really going all in on this object-orientated
programming approach. So, let me make another JavaScript
file called slingshot.js, and let me just right out the outset, remember that I need to
refer to slingshot.js, then class SlingShot. So, what does a slingshot need? So, I think it needs an x and a y, like where is the point from which this object will be attached? And then it needs. Oh, no no,
that's not where these go. It needs an x and a y,
and then it needs a body. So, now, I'm going to create,
let's call this this.sling, equals Constraint.create and then options. I think this is how that works. And this should be Constraint. (laughs) Constraint. So, I'm going to make up some options now. So, I need to configure that Constraint. The two things I want to be connected, with this constraint are a point, which I'll call pointA,
this is in the matter.js documentation specs,
pointA, which is an object with an x, which will be what I pass in, and a y, which will be what I pass in, and then also it needs to be connected to something else, bodyB. I think it could be bodyA and bodyB, or pointA and bodyB. There's different ways
you can configure it, but I want a point and a body. I could make another body
that's static body I guess, but a point is the equivalent to that. So, then the body is going to be, oh, I don't think I need an object here, just this particular body. Then I want to say
World.add, this to the world, this.sling. And the other things that
are part of a constraint, I believe, I forget the actual stiffness, like, it's like a spring connection, how stiff is it? So, I think that's actually
just called stiffness. A value of one means the constraint should be very stiff, a value of 0.2, means the constraint
acts like a soft spring. So, let's just try, just to
start with, let's try 0.5. And then, a length is very important. What is the rest length of that spring? Let's make it like 20 pixels. So, now, I've created this slingshot. I also think it would make
sense for me to draw it. So, I'm going to do a show, I'm
going to make show function, and I'm going to say stroke 255,
and I'm going to draw a line, well, let's make posA
equal this.sling.pointA. And posB equals this.sling.body.position. These are the two things that the sling, the string, the spring, the connection, the constraint is attached to. So, draw a line from posA.x,
posA.y, posB.x, posB.y. Oh, so, I think, by the
way I'm writing this class, I didn't even make the slingshot. So, now, I need to go into sketch.js and I'm going to make a
variable called slingshot. I'm going to say slingshot
equals a new SlingShot. And I need to give it a x and a y, which where did I make the bird 5300? Let's just put it in the same place. And then, I need to connect
it to the bird's body. You can see already, look, this is kind of like
stuck somewhere, right. This is great. But let me draw it, 'cause I think that'll make it more obvious. slingshot slash show, and what did I call it? slingshot show, ah PosB. Oh, bodyB, it's pointA and bodyB. So, if I do this. Right, you can see there it is. Now, okay, this was some goofiness here. So, one thing that's really weird is that if I drag the mouse off, the mouse constraint gets confused, and thinks it's stuck. So, that's just an
interaction design problem, that I have to iron out at some point. Let's change a few things like let's make the bird much smaller. Let's move everything over a little bit. Just to give me little space here. So, now, we can see and maybe
I should make that rest length a little bit longer, there we go. And maybe the stiffness should be a little bit less, there we go. So, I'm pulling this back. The idea is that I'm going to pull it back and let go, and I want it to fly. So, we're getting there. I have this slingshot now. Now, how do I release it? I have to come up with
a way of releasing this. I need a way somehow, to launch this bird off of the slingshot. Like the slingshot should be broken, and the constraint should be broken, and it should go flying. So, first let me least
create a mechanism for that. So, let me write a function here. I'm going to call it fly. And I think if I just say
this.sling.bodyB equals null. Like if I just detach the body then the thing that's attached
to it, will go flying. So, let's just try in, let's
just add, just as a test, a keyPressed function. If key equals space, then slingshot.fly. So, again, I need to figure
out when it should be flying. But if I just hit the space bar, cannot read property position
of null, slingshot line 24. So, okay, so only if
there is a body attached, then should I bother to draw the line. Okay, so, I need to also not draw the line if there's no body. So, let me run it, there we go. We can see (laughs) now
could I possibly time it? Like now my interaction
is, I have to do this. Yeah, but I shouldn't have
to hit the space bar, right. I shouldn't have to hit the space bar. So, how can I determine a time where I should have it fly? What if I were to get
the body's speed right. So, a suggestion came in the chat to just look at when
the mouse is released. I think this isn't going
to work, timing wise. But let's try it. What if I just write
function mouseReleased which is a global p5 event
for when I release the mouse. And there I could just say, slingshot fly. So now, I'm pulling this
back and release the mouse. See, it didn't have a chance to move, before it could start pulling it. So, I could use like setTimeout,
this is kind of ridiculous. I could and then, like do it
in like 50 milliseconds later. Is that right? Maybe it should be more like
a 100 milliseconds later. Oh, that's actually kind of great. That worked. Weirdly, just giving
it a little time later. I was going to go through this whole thing of testing its speed. You know what? This is good enough. I think you could probably, those of you watching, you might want to come up with a different solution. But I'm surprised that
this actually worked, just the little setTimeout, just give it a 100 milliseconds later, thank you to Betatester704, who maybe was the one who suggested that. So, this is great. We have Angry Birds. Now, one thing I should
say, is like, at some point I want to be able to like have a new bird, and so, there's a variety
of ways I could do that. Let's use keyPressed. We'll just use a key press right now. And I could say, remake the bird, and then I could say, slingshot.attach this bird.body, and then in bird, I mean
sorry, in slingshot, I could say, attach, get a body, and I could say this.sling.bodyB
equals that new body. So here, now, what I
should be able to do is I should be able to let it
fly, knock the stuff over, and then, oh sure I
want to probably detect when it should do this. I can hit space, oh no sorry, oops. Space and then, oh there
is, there's a big flaw here in my system, I'm not
going to worry about it, this is good enough because
I could like, first of all, I can use the MouseConstraint (laughs) the MouseConstraint
will let me do anything. And then I can also release, when I release the box,
also the bird gets released. But you, the viewer, these
things can be cleaned up. These are interaction design problems. There are better solutions. This is kind of exciting. I've got the basics of Angry Birds here. Alma writes, you should utilize
the concept of potential and kinetic energy for it, it's just a pure projectile thing. So, I would love to see somebody
make a variation on this, and submit it to thecodingtrain.com. There's a way that you can submit your versions and doing that. But I just got one more
thing I want to do. I want to add some images to this. Before I add the images, there
is kind of a big bug here that I really should
fix, which is that when I put the new bird in, there's actually another bird, that old bird is still here, I'm just not drawing it anymore. Maybe I want it there, or
maybe I should remove it. But probably right now, I should just say World.remove bird.body world. And its always the other way around. So, I believe this. Right, let me see if I
can show you what I mean. Right, I'm going to shoot this over there. Now, notice this is here, I'm
not going to see it anymore, but I'm going to try to shoot
it right over there again. (laughs) See how it hit
the invisible thing. So, let me remove it. And that should fix that. So, if I do this. And it's there, and then
I do this again. (laughs) I do this again. Anyway, you can see it's
gone, it's removing it. So, there are different ways
that I could approach this. A Simon in the chat is pointing out that instead of just making the bodyB of the slingshot null, I could actually remove the slingshot, I could reuse the same bird by just
resetting its position. So, again, you might make, have a different take on this, refactor this in a different way. But I've got the basic idea down. Now, I want to start adding images. Alright, so, I have all these
Coding Train character images designed by Jason Hegland,
thank you for that. I'm going to use the dot for
the bird, a little smiley dot, and the angry equals sign for the block. Now, this block is square
I think, not rectangular, so I'll probably have to
adjust the dimensions. But the first thing I need to do, is upload these images to the web editor. So, the way that I will do that, is by just going over
here, doing Add File, and then I can just drag
these two images in. You know, I could put them
in a folder or something, and we can see they're there. So, now I have dot png and equals png. And you know, there's
probably a thoughtful way, that I could think about what if I want different blocks
to show different images, but I'm just going to
in a very simple way, use the preload function of p5. I'm going to have a
variable called dotImage, and a variable called boxImage. And I'm going to say dot image
equals loadImage dot.png, and boxImage equals loadImage, what is it called? equals.png. And let's first just
change the bird to show, instead of a circle, instead of fill, I'm just going to say image and
then I'm, what was the name? dotImg. Oh, and then I want to
say, imageMode CENTER, and then I'm going to have to say this.r. And this should be
this.r times two really. If I'm thinking about that as a radius. So, there we go. So, we can see now I've got
the little dot, it's so tiny. I should make it bigger. And I think what I
would prefer to do also, is draw the slingshot behind the bird. Okay. So, now, I have my dot. There it goes. Now, I just need to replace those blocks. So, the boxes. When I make the box, I am in sketch.js. When I make the box, I'm
giving them an x and a y, and a width, and a height. Let's just make them square right now. I could have an image that's not square. So, they're much larger
now, but that's fine. And then, what I'm going to do is in box, let's change I to image. image, what did I call it? boxImage, there we go. Oh, we've got a problem. (laughs) So, the ground is messed up now 'cause the ground is also the equals. So, and we also have to say
imageMode CENTER, (laughs) the ground is this like
smooshed equals, but guess what? Not to worry, I used inheritance. Oh, I'm so happy I used inheritance. Then I could just override
the show function, and there's probably a more
thoughtful way I could do this, but I am just going to
put this all in here, and I'm just going to
put this back TO rect, and back to this. And now, there we go. So, I now, here we go. (drum beating) I have my Angry Birds
clone with p5 and matter.js and I'm going to pull
this back, release and, oh wait why did it make
it so small? (laughs) So, one thing I really need to do a lot of
(energetic rock music) refactoring of this, because I did something very silly here, where I remake the bird,
but I use a different size. Which having a hard coded
value here is pretty bad. Right, let's try this one more time. (drum beating) Right. Wait, wait, wait, wait. I have an idea, I have an idea. Let's add restitution. So, I'm going to go to the
bird, and when I make the body, I could also add some options. For example, one option
might be restitution, which is like elasticity. Let's give that a value of one. (laughs) Let's look it up in the documentation. Always positive and in
the range, zero to one. A value of zero means the collision would be perfectly
inelastic and no bouncing would may occur. A value of 0.8 means
the body may bounce back with approximately 80 percent
of its kinetic energy. So, let's try giving it a value of 0.8. Oh, guess what? I can make up this variable called options till the cows come home, but if I don't actually put
it in creating the body, it's not going to make any difference. So, now, let's see how
that changes things. There we go. (laughs) It's kind of like Jenga, where it just like slid out a little bit. Oh, wait a sec, it's even bigger. Whoa, okay, oh, things have
gone really off the rails here. This is supposed to be 25. And let's be a little bit more kind, let's give it 0.5 and
let's also go to the box, and let's give that also a restitution. Okay, here we go. (drum beating) This is my angry birds game, made with p5 and matter.js, and Coding Train characters. (laughs) Oh, fall, fall, fall. Yes. (triumphant classical music) Thank you for watching
this coding challenge. Sorry to interrupt, I'm
about to wrap this video up, but I want to show you two quick
improvements before I finish. The first one is, when
I loaded my Coding Train equals character, it was a square image, and there's actually a lot
of additional extra space on the width, and so there
is some funny physics happening that looked a little bit off. So, I'm now actually cropped
and re-uploaded that image. So, that it's 84 pixels by 100. The other thing that,
thanks to a suggestion, I increased the mass of the bird's body. So, the matter.js will give elements a sort of default mass,
probably based on their size and their geometry, and
I just take the bodies and set its mass to its
own mass times four. And so, now, if I were to play my game. (drum beating) One more time. Let's zoom in on this. And go. Boom. Yeah. I am so angry dot Shiffman coding. Oops sorry bonk. So, this is my version,
there are so many flaws to what I've done here, in terms of how I've organized the code,
there's some like weirdness in the physics, I haven't really been sort of thoughtful about the design. The whole slingshot
mechanic is kind of off. So, there's a couple things
you could do for me here. Number one, go to
thecodingtrain.com, find the page for this challenge, the
source code will be there, as well as any other supplementary links, and you can submit your own version. Maybe you just want to improve
the way I wrote the code, to make it better organized. So, that people could see that. Maybe you want to make your own delightful design of a scene. Maybe you have a totally
other game mechanic and idea for how the physics
of this world should work. Maybe you actually want
to build this out to be, you have more features,
and levels, and score. There's so many possibilities. So, make your own version of this, you don't need to use p5, you
don't even need to use matter. These kind of concepts will extend to other drawing libraries
and game engines. Phaser might be one that
you should take a look at. Even perhaps, you can check out the video from Catt Small, about using Phaser and
codependents on this channel. And I will see you in a
future coding challenge. Thank you. Mwah, goodbye. (energetic electronic music) (bell ringing)
