Creating a scene of interacting polygons
So… you want to see how polygons collide? Well then, let’s get started. First set up PhysicsJS as described in the Installation and Basic Usage documentation. You can use the editor on the home page to follow along with.
We need to add a canvas element for the renderer. (If you’re using the homepage editor this is already done) So we’ll add this to the html body:
Let’s set up the renderer and add it to the world. If the DOM is not expected to be ready,
you’ll need to place this code inside a function that checks for the readiness of the DOM
Next let’s add a body to the world to make sure everything is rendering properly.
We’ll use the
convex-polygon extension to create a square with edge 50px in length
convex-polygon extension if necessary).
Now you should see a square in the center of the canvas. So far we haven’t begun simulating
anything yet. We just rendered the current state of the world. We need to hook up
the world to a ticker (an animation loop) so that
world.step() gets repeatedly called.
Let’s do that:
We’ll also need to subscribe to the world’s “step” event and call
world.render() to refresh
the view every frame.
Aaaaand… nothing happened. That’s because our square has a velocity of (0, 0). So it won’t move. Let’s give it a small velocity in the x direction:
Hey! The square is moving! Fancy that.
This is a little bit boring. Let’s add some constant acceleration downwards (gravity) and watch the square fall to the ground.
For this we’ll need the
Okay, it falls, but now it’s falling through the ground. Well… not really. There is no ground. We need to define some boundaries and add a collision response behavior to get things looking “realistic”.
First let’s define a bounding box for the boundaries of our canvas:
Now, let’s add the
body-impulse-response behaviors and see what happens.
Woah! That square is bouncing all over the place now. That’s because we have perfectly
elastic collision responses by default. That corresponds to a restitution setting of
Let’s play with the restitution of the edge collision a bit and make it
That’s a bit better. Let’s add some more polygons and see what happens!
Interesting shapes… but they don’t collide with each other. That’s because we only
have the behavior for collision detection with edges not between bodies. For that
we’ll need the
body-collision-detection extension. We’ll also use it with the
sweep-prune broad phase collision detection to optimize things a bit. This is
generally always a good idea.
Now, we’re talking! Colliding polygons!