pbox2d this presentation is based on the underline ppt file 2013.5.16 [email protected]

PBox2D This presentation is based on the underline ppt file http://pds21.egloos.com/pds/201304/09/15/Class4-PhysicalLibrary.pptx 2013.5.16 [email protected]

7 http://en.wikipedia.org/wiki/Box2D

8 https://box2d.org/

9 https://code.google.com/p/box2d/

10 https://code.google.com/p/box2d/downloads/list/

Box2D Testbed 11

12 https://code.google.com/p/box2d-html5/

13 https://code.google.com/p/box2dweb/

14 http://www.iforce2d.net/b2dtut/

iforce2d advanced topics 15 http://www.iforce2d.net/b2dtut/

16 http://www.kerp.net/box2d/

17 http://paralaxer.com/box2d-physics/

18 http://box2d-js.sourceforge.net/index2.html

19 http://www.jangaroo.net/files/examples/flash/box2d/

20 http://gwtbox2d.appspot.com/

21 http://www.mrdoob.com/projects/chromeexperiments/google-gravity/

22 https://github.com/shiffman/PBox2D

23 http://natureofcode.com/book/chapter-5-physics-libraries/

What is the Box2D? Open-Source 2D Physics Engine C++ by Erin Catto for the Game Developers Conference in 2006. Box2D site (http://www.box2d.org/) for reference Crayon Physics Angry Birds JBox2D : Java Wrapper Box2D site (http://www.jbox2d.org//) for reference. Can be directly used in Processing PBox2D : Processing Wrapper Make it easy to use JBox2D A layer library between JBox2D and Processing a Processing Box2D helper library PBox2D is not a Processing wrapper for all of Box2D https://github.com/shiffman/PBox2D 24

Box2D Basics In old physical simulation SETUP: Create all the objects in our world. DRAW: Calculate all the forces in our world. Apply all the forces to our objects (F = M * A). Update the locations of all the objects based on their acceleration. Draw all of our objects. In Box2D SETUP: Create all the objects in our world. DRAW: Draw all of our objects. 25

Five core parts for using Box2D 1.World : Manages the physics simulation. It knows everything about the overall coordinate space and also stores lists of every element in the world 2.Body : Serves as the primary element in the Box2D world. It has a location. It has a velocity. Sound familiar? The Body is essentially the class weve been writing on our own in our vectors and forces examples. 3.Shape : Keeps track of all the necessary collision geometry attached to a body. 4.Fixture : Attaches a shape to a body and sets properties such as density, friction, and restitution. 5.Joint : Acts as a connection between two bodies (or between one body and the world itself). 26

A new Vector Class : Vec2 27 PVectorVec2 PVector a = new PVector(1,-1); PVector b = new PVector(3,4); a.add(b); Vec2 a = new Vec2(1,-1); Vec2 b = new Vec2(3,4); a.addLocal(b); PVector a = new PVector(1,-1); PVector b = new PVector(3,4); PVector c = PVector.add(a,b); Vec2 a = new Vec2(1,-1); Vec2 b = new Vec2(3,4); Vec2 c = a.add(b); PVector a = new PVector(1,-1); float n = 5; a.mult(n); Vec2 a = new Vec2(1,-1); float n = 5; a.mulLocal(n); PVector a = new PVector(1,-1); float n = 5; PVector c = PVector.mult(a,n); Vec2 a = new Vec2(1,-1); float n = 5; Vec2 c = a.mul(n); PVector a = new PVector(1,-1); float m = a.mag(); a.normalize(); Vec2 a = new Vec2(1,-1); float m = a.length(); a.normalize();

Box2D worlds 28 How can we convert between them?

Helper functions 29 TaskFunction Convert location from World to PixelsVec2 coordWorldToPixels(Vec2 world) Convert location from World to PixelsVec2 coordWorldToPixels(float worldX, float worldY) Convert location from Pixels to WorldVec2 coordPixelsToWorld(Vec2 screen) Convert location from Pixels to WorldVec2 coordPixelsToWorld(float pixelX, float pixelY) Scale a dimension (such as height, width, or radius) from Pixels to World float scalarPixelsToWorld(float val) Scale a dimension from World to Pixelsfloat scalarWorldToPixels(float val)

Set up the world 30 PBox2D box2d; void setup() { box2d = new PBox2D(this); //Initializes a Box2D world with default settings box2d.createWorld(); }

Set up the Body Step 1: Define a body. 31 //define the properties of the body we intend to make BodyDef bd = new BodyDef(); Vec2 center = box2d.coordPixelsToWorld(width/2,height/2)); bd.position.set(center); bd.fixedRotation = true; //Fixed, never rotating objects bd.linearDamping = 0.8; //Friction bd.angularDamping = 0.9; bd.bullet = true; //if it is FAST moving objects bd.type = BodyType.DYNAMIC; // body type Step 2: Configure the body definition.

Damping 32 A Damping node can be used to slow down a body (a Solid node with Physics). The speed of each body is reduced by the specified amount (between 0.0 and 1.0) every second. A value of 0.0 means "no slowing down" and value of 1.0 means a "complete stop", a value of 0.1 means that the speed should be decreased by 10 percent every second. A damped body will possibly come to rest and become disabled depending on the values specified in WorldInfo. Damping does not add any force in the simulation, it directly affects the velocity of the body. The damping effect is applied after all forces have been applied to the bodies. Damping can be used to reduce simulation instability.

Body types Dynamic (BodyType.DYNAMIC) a fully simulated body. A dynamic body moves around the world, collides with other bodies, and responds to the forces in its environment. Static (BodyType.STATIC) cannot move (as if it had an infinite mass). Well use static bodies for fixed platforms and boundaries. Kinematic(BodyType.KINEMATIC) can be moved manually by setting its velocity directly. If you have a user-controlled object in your world, you can use a kinematic body. Note that kinematic bodies collide only with dynamic bodies and not with other static or kinematic ones. 33

Body body = box2d.createBody(bd); Step 3: Create the body. Set up the Body Step 4: Set any other conditions for the bodys starting state. body.setLinearVelocity(new Vec2(0,3)); body.setAngularVelocity(1.2); 34

Linking Shape with Body Body does not have geometry We have to attach geometry shape to body with a Fixture We can attach multiple shapes to a single body in order to create more complex forms. Step 1: Define a shape 35 PolygonShape ps = new PolygonShape(); float box2Dw = box2d.scalarPixelsToWorld(150); float box2Dh = box2d.scalarPixelsToWorld(100); ps.setAsBox(box2Dw, box2Dh);

Width & Height 36 width height width Processing BOX2D

Step 2: Create a fixture. FixtureDef fd = new FixtureDef(); //The fixture is assigned the PolygonShape we just made. fd.shape = ps; fd.friction = 0.3; //The coefficient of friction for the shape, typically between 0 and 1 fd.restitution = 0.5; //The Shapes restitution (i.e. elasticity), typically between 0 and 1 fd.density = 1.0; //The Shapes density, measured in kilograms per meter squared Step 3: Attach the shape to the body with the fixture. body.createFixture(fd); Or you can use the default fixture body.createFixture(ps,1); // Creates the Fixture and attaches the Shape with a density of 1 37

Friction 38

Restitution(Elasticity) 39

Density 40

In summary 1.Define a body using a BodyDef object (set any properties, such as location). 2.Create the Body object from the body definition. 3.Define a Shape object using PolygonShape, CircleShape, or any other shape class. 4.Define a fixture using FixtureDef and assign the fixture a shape (set any properties, such as friction, density, and restitution). 5.Attach the shape to the body. 41

Shapes Circle Shapes Polygon Shapes 42 b2CircleShape circle; circle.m_p.Set(2.0f, 3.0f); circle.m_radius = 0.5f; // This defines a triangle in CCW order. b2Vec2 vertices[3]; vertices[0].Set(0.0f, 0.0f); vertices[1].Set(1.0f, 0.0f); vertices[2].Set(0.0f, 1.0f); int32 count = 3; b2PolygonShape polygon; polygon.Set(vertices, count);

Shapes Edge Shapes 43 // This an edge shape with ghost vertices. b2Vec2 v0(1.7f, 0.0f); b2Vec2 v1(1.0f, 0.25f); b2Vec2 v2(0.0f, 0.0f); b2Vec2 v3(-1.7f, 0.4f); b2EdgeShape edge; edge.Set(v1, v2); edge.m_hasVertex0 = true; edge.m_hasVertex3 = true; edge.m_vertex0 = v0; edge.m_vertex3 = v3;

Shapes Chain Shapes 44 // This a chain shape with isolated vertices b2Vec2 vs[4]; vs[0].Set(1.7f, 0.0f); vs[1].Set(1.0f, 0.25f); vs[2].Set(0.0f, 0.0f); vs[3].(-1.7f, 0.4f); b2ChainShape chain; chain.CreateChain(vs, 4);

In processing term. 45 //Step 1. Define the body. BodyDef bd = new BodyDef(); bd.position.set(box2d.coordPixelsToWorld(width/2,height/2)); //Step 2. Create the body. Body body = box2d.createBody(bd); //Step 3. Define the shape. PolygonShape ps = new PolygonShape(); float w = box2d.scalarPixelsToWorld(150); float h = box2d.scalarPixelsToWorld(100); ps.setAsBox(w, h) //Step 4. Define the fixture. FixtureDef fd = new FixtureDef(); fd.shape = ps; fd.density = 1; fd.friction = 0.3; fd.restitution = 0.5; //Step 5. Attach the shape to the body with the Fixture. body.createFixture(fd);

How can we keep tracking objects? Use the arrayList (Dynamic array) Exercise Making boxes on the fly whenever we move the box and put it on an arrayList. 46

// A list for all of our rectangles ArrayList boxes; void setup() { size(800,200); smooth(); // Create ArrayLists boxes = new ArrayList (); } void draw() { background(255); // When the mouse is clicked, add a new Box object if (mousePressed) { Box p = new Box(mouseX,mouseY); boxes.add(p); } // Display all the boxes for (Box b: boxes) { b.display(); } // A rectangular box class Box { float x,y; float w,h; // Constructor Box(float x_, float y_) { x = x_; y = y_; w = 16; h = 16; } // Drawing the box void display() { fill(127); stroke(0); strokeWeight(2); rectMode(CENTER); rect(x,y,w,h); } Class Design 47

Lets put those boxes on the Box2D world Revise the Box class Box size (8,8) fd.density = 1; fd.friction = 0.3; fd.restitution = 0.5; 48 class Box { Body body; float w,h; Box(float x, float y) { //initial position w = 16; h = 16; } display() { Vec2 pos = box2d.getBodyPixelCoord(body); float a = body.getAngle(); pushMatrix(); translate(pos.x,pos.y); // Box2D coordinate system considers rotation in the opposite direction from Processing rotate(-a); fill(127); stroke(0); strokeWeight(2); rectMode(CENTER); rect(0,0,w,h); popMatrix(); } // following the steps // Step 1. Define the body. // Step 2. Create the body.(bodyType=DYNAMIC) // Step 3. Define the shape. // Step 4. Define the fixture. // Step 5. Attach the shape to the body with the Fixture

Main function 49 import pbox2d.*; import org.jbox2d.collision.shapes.*; import org.jbox2d.common.*; import org.jbox2d.dynamics.*; // A list for all of our rectangles ArrayList boxes; PBox2D box2d; void setup() { size(800, 200); smooth(); // Initialize and create the Box2D world box2d = new PBox2D(this); box2d.createWorld(); // Create ArrayLists boxes = new ArrayList (); } void draw() { background(255); // We must always step through time! box2d.step(); // When the mouse is clicked, add a new Box object Box p = new Box(mouseX, mouseY); boxes.add(p); // Display all the boxes for (Box b: boxes) { b.display(); }

Lets put some boundaries. To create boundaries, we need to set BodyDef objects type to STATIC. 50

class Boundary { // A boundary is a simple rectangle with x,y,width,and height float x; float y; float w; float h; // But we also have to make a body for box2d to know about it Body b; Boundary(float x_,float y_, float w_, float h_) { x = x_; y = y_; w = w_; h = h_; } // Draw the boundary, if it were at an angle we'd have to do something fancier void display() { fill(0); stroke(0); rectMode(CENTER); rect(x,y,w,h); } Lets design Boundary class // following the steps // Step 1. Define the body. // Step 2. Create the body.(bodyType=DYNAMIC) // Step 3. Define the shape. // Step 4. Define the fixture. // Step 5. Attach the shape to the body with the Fixture 51

// A reference to our box2d world PBox2D box2d; // A list we'll use to track fixed objects ArrayList boundaries; // A list for all of our rectangles ArrayList boxes; void setup() { size(800, 200); smooth(); // Initialize and create the Box2D world box2d = new PBox2D(this); box2d.createWorld(); // Create ArrayLists boxes = new ArrayList (); boundaries = new ArrayList (); // Add a bunch of fixed boundaries boundaries.add(new Boundary(width/4,height-5,width/2-50,10)); boundaries.add(new Boundary(3*width/4,height-50,width/2-50,10)); } Lets design main function 52

One problem of this example Computationally expensive as we increase the number of boxes It is getting slow as it goes. How can we fix it? If the box is out of screen, remove it!! 53

void killBody() { box2d.destroyBody(body); //ask box2d to destroy the body } // Is the particle ready for deletion? boolean done() { // Let's find the screen position of the particle Vec2 pos = box2d.getBodyPixelCoord(body); // Is it off the bottom of the screen? if (pos.y > height+h) { killBody(); return true; } return false; } Lets modify Box class and main function for (int i = boxes.size()-1; i >= 0; i--) { Box b = boxes.get(i); if (b.done()) { boxes.remove(i); //remove from the array } BOX classDraw() in main function 54

Curvy Boundary If you want a fixed boundary that is a curved surface (as opposed to a polygon) Use the ChainShape 55

polygonShape : Convex moving object chainShape : static game world 56

Steps Step 1: Define a body. 57 BodyDef bd = new BodyDef(); Body body = box2d.world.createBody(bd); Step 2: Define the Shape. ChainShape chain = new ChainShape(); Step 3: Configure the Shape. Vec2[] vertices = new Vec2[2]; vertices[0] = box2d.coordPixelsToWorld(0,150); vertices[1] = box2d.coordPixelsToWorld(width,150); chain.createChain(vertices, vertices.length);

Steps Step 4: Attach the Shape to the body with a Fixture. 58 FixtureDef fd = new FixtureDef(); fd.shape = chain; fd.density = 1; fd.friction = 0.3; fd.restitution = 0.5; body.createFixture(fd);

Define a Surface 59 class Surface { // We'll keep track of all of the surface points ArrayList surface; Surface() { surface = new ArrayList (); // Here we keep track of the screen coordinates of the chain surface.add(new Vec2(0, height/2)); //surface.add(new Vec2(width/2, height/2+50)); surface.add(new Vec2(width, height/2)); // This is what box2d uses to put the surface in its world ChainShape chain = new ChainShape(); // We can add 3 vertices by making an array of 3 Vec2 objects Vec2[] vertices = new Vec2[surface.size()]; for (int i = 0; i < vertices.length; i++) { vertices[i] = box2d.coordPixelsToWorld(surface.get(i)); } chain.createChain(vertices, vertices.length); // The edge chain is now a body! BodyDef bd = new BodyDef(); Body body = box2d.world.createBody(bd); // Shortcut, we could define a fixture if we // want to specify frictions, restitution, etc. body.createFixture(chain, 1); }

How to draw it? 60 void display() { strokeWeight(1); stroke(0); fill(0); beginShape(); for (int i=0; i

pbox2d this presentation is based on the underline ppt file 2013.5.16 [email protected]

Documents

comshiffmanpbox2d slide

compbox2d slide

compbox2ddownloadslist

orgwikibox2d slide

compbox2dweb slide

compbox2dhtml5 slide

new pvector1

new vec21