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.

Let’s first set up the scene. All of our javascript can go inside the PhysicsJS world initializer.

So all further javascript in this tutorial should be placed there.

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 (eg: `jQuery.ready()`).

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 (remember to `require` the `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 `constant-acceleration` behavior.

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 `edge-collision-detection`, and `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 `1.0`. Let’s play with the restitution of the edge collision a bit and make it `0.3`.

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!