Physics

Now we're moving!

Why Physics?

Our drawing apps don't have physics built in.
It's also really math-y and annoying.
if (body.collidesWith(screenTop)) {
    body.setYVel(0);
} else if (body.collidesWith(screenLeft)) {
    body.setXVel(0);
} ... 

If we want actual physics, we turn to libraries.

Physics: Vectors

It's time for Intro to Physics 101 abridged edition.
Vectors are (x, y) pairs. We use them both for:

  • Position: (x,y) is relative to the origin (top left)
  • Movement: (x,y) is relative to current position, so
    magnitude + direction

Vectors add and subtract component wise.
It looks reasonable geometrically.

Physics: Forces

Objects move when we apply force.
Remember Newton? F = m * a

Applying force = giving acceleration (related to mass).
Giving acceleration = changing velocity.
Changing velocity = changing position.

Friction/air resistance and gravity work against us.

Other terminology: impulse is change in force over time.
Application of impulse is instant velocity change.

Physics: Angles

2D = 360 degrees of angles.
Objects have:

  • angle: where they're pointing
  • angular velocity: speed at which angle changes
  • rotational inertia: resistance to change in ang. vel.

Ever seen that spinning wheel experiment?
Also, torque is the word for angular force.

Box2D

Box2D is the ubiquitous 2D physics library.
It started out as Flash (game origins), but now it's everywhere.

Box2D functions as follows:
  • Create a world (or context, or canvas, or...)
  • Put bodies and fixtures in the world
  • Add constraints and controllers
  • ???
  • Physics!

Docs: http://www.box2dflash.org/docs/2.1a/reference/

[demo time!]

Worlds

A world contains bodies and other info, like gravity.
var world = new b2World(
   new b2Vec2(0, 10),    //gravity
   true                  //allow sleep
); 

The gravity vector defines how fast things fall.
Sleep is an optimization on non-moving bodies.

Bodies

Bodies are the building blocks of Box2D.
They're sets of physics properties about an object.
(but not shape or size!)

  • mass
  • position & linear velocity 
  • angle
  • rotational inertia
  • angular velocity

Fixtures

Fixtures define the size/shape/material of an object.
Why do these differ from bodies?

  • shape - polygon/circle
  • restitution - fancy word for bounciness
  • friction
  • density - mass = density / area

So, object = body + fixture

Creating an object

First, we create definitions for the body.
var bodyDef = new b2BodyDef();          // body definition
bodyDef.type = b2Body.b2_dynamicBody; // body is movable
bodyDef.position.x = 5;
bodyDef.position.y = 10;
bodyDef.angle = Math.PI / 2; 

Bodies can by dynamic, static, or kinematic.
Kinematic is like static, but it can have unchanging velocity.

Then, we define the fixture.
var fixDef = new b2FixtureDef();        // fixture definition

// fixture properties
fixDef.density = 1.0;
fixDef.friction = 0.5;
fixDef.restitution = 0.2; 

Creating an object

Define a shape for the fixture. Could be circle or polygon.
// fixture shape
fixDef.shape = new b2PolygonShape;
fixDef.shape.SetAsBox(1, 2); 

We can define custom polygons with arbitrary vertices.
Then, instantiate these definitions.
var body = world.CreateBody(bodyDef);
var fixture = body.CreateFixture(fixDef); 

Note that bodies can have multiple fixtures.

Creating an object

The final code:
var bodyDef = new b2BodyDef;          // body definition
bodyDef.type = b2Body.b2_dynamicBody; // body is movable
bodyDef.position.x = 5;
bodyDef.position.y = 10;
bodyDef.angle = Math.PI / 2;

var fixDef = new b2FixtureDef;        // fixture definition

// fixture properties
fixDef.density = 1.0;
fixDef.friction = 0.5;
fixDef.restitution = 0.2;

// fixture shape
fixDef.shape = new b2PolygonShape;
fixDef.shape.SetAsBox(1, 2);

var body = world.CreateBody(bodyDef);
var fixture = body.CreateFixture(fixDef); 

Joints

Joins connect two bodies in a number of ways.
Examples of joints:

  • Revolute: hinge/pin, rotate around 1 point
  • Distance: two bodies attached to ends of a stick
  • Prismatic: slide on axis
  • Wheel: revolute + prismatic (for cars)
  • Weld: two bodies at same orientation
  • Pulley: like a pulley (referencing a 3rd point in world)
  • Friction: less relative motion between bodies
  • Mouse: pulls body to a world location

Joint Code

Not too bad!
var joint = b2DistanceJointDef();

// set which bodies are connected
joint.bodyA = makeBody();
joint.bodyB = makeBody();

// set properties on the joint
joint.length = 5;
joint.collideConnected = true;

// instantiate
world.CreateJoint(joint); 

Drawing

(almost) nobody's done this!

Code Time!


Made with Slides.com