Processingjs & Box2d Physics!


I started messing about with processing.js recently which has led me to messing with full blown processing (due to processing.js having no ide!) and I’m trying to apply physics to a basic game engine I’m putting together, to help me get my head around the language in general.

In case you’re wondering what led me to start with processing.js this is, in my opinion, a pretty good contender for flash’s replacement since it’s assassination by big Steve!   It’s a totally javascript based tech requiring absolutely no plugins, using just the canvas element in html5.  The downfall is it’s still really quite new and not quite fully featured (but can still do some cool stuff) and currently only supported by the most modern browsers (FireFox, chrome, safari, opera) but support will ramp up as browsers start becoming more html5 compliant.  The tech itself is a port of a framework originally built in java called simply “processing“.  dot net magazine ran a pretty cool demo tutorial in their last months issue.

Anyway, back to the point; I’m using pBox2d which is a port of jBox2d which is in turn a java port of the original c++ Box2d physics engine!  I had trouble trying to apply forces to move my little space ships- according to everything i had read online you use ApplyForce(b2Vec2 force, b2Vec2 point) but the b2Vec2 class doesn’t seem to exist- turns out you have to use Vec2 with jbox2d, and the method starts with a lower case a on this port to fall in to line with java conventions (that stumped me for bit!)

I dug out the full definition for the body class from jBox2d so for your reference, all the method signatures…

jBox2d: Body
 public Body(BodyDef bd, World world) //ctor
 public Vec2 getOriginPosition()
 public Vec2 getCenterPosition()
 public float getRotation()
 public Mat22 getRotationMatrix()
 public void setLinearVelocity(Vec2 v)
 public Vec2 getLinearVelocity()
 public void setAngularVelocity(float w)
 public float getAngularVelocity()
 public void applyForce(Vec2 force, Vec2 point)
 public void applyTorque(float torque)
 public void applyImpulse(Vec2 impulse, Vec2 point)
 public float getMass()
 public float getInertia()
 public Vec2 getWorldPoint(Vec2 localPoint)
 public Vec2 getWorldVector(Vec2 localVector)
 public Vec2 getLocalPoint(Vec2 worldPoint)
 public Vec2 getLocalVector(Vec2 worldVector)
 public boolean isStatic()
 public boolean isFrozen()
 public boolean isSleeping()
 public void allowSleeping(boolean flag)
 public Shape getShapeList()
 public ContactNode getContactList()
 public JointNode getJointList()
 public Body getNext()
 public Object getUserData()
 public void destructor()
 public void setOriginPosition(Vec2 position, float rotation)
 public void setCenterPosition(Vec2 position, float rotation)
 void synchronizeShapes()
 public void quickSyncShapes()
 public void freeze()
 public void wakeUp()
 public boolean isConnected(Body other)

Anyone else who wants to get started with this, download processing, then download pBox2d and copy the pBox2d files into the library folder of the processing IDE!

  1. #1 by Andor Salga on May 19, 2010 - 14:57

    Nice to see you’re messing with these two libraries. You mentioned that PJS doesn’t have an IDE. But there are a bunch!

    here is mine:
    matrix.senecac.on.ca/~asalga/pjswebide/

    Bespin version:
    http://sketch.processing.org/

    IDE on main site:
    http://processingjs.org/learning/ide

    I’ve also been playing around with these two libraries. If you’re interested here’s some stuff I made:

    Crayon physics prototype:
    http://matrix.senecac.on.ca/~asalga/DPS909/release0.2/work/demos/

    Processing.js + Box2DJS + Twitter
    http://matrix.senecac.on.ca/~asalga/pjs_twitter

    If you figure out how to remove bodies from a scene, please let me know. Every time I try I run into JS errors.

  2. #2 by shawson on May 19, 2010 - 16:26

    Thanks for posting- this is really useful! Cool examples too- I find the physics enabled projects the most engaging and interesting to work on.

    IDE’s are great- Bespin in particular is very slick- brilliant find! This was a real limiting factor for me as i was having to code in the main processing ide, then copy and paste to javascript which just didnt seem like a good process!

    I’m just about to embark on an 8 week project making a “manic miner” type game as part of a competition with a few mates- we can use any tech we want- they are making this their very first xna project while i’m either going to use javascript native or with processingjs library! These new IDE’s may have tipped the balance!

    How have you found working with Box2DJS? I’ve so far only used pBox2D which has been a bit of a pain as a lot of the data types and method signatures differ from Box2d and there’s not much documentation on it!

  3. #3 by Andor Salga on May 20, 2010 - 00:50

    Awesome. Glad to hear you can use the IDEs. Don’t forget to save every once in a while locally. I lost my work a few times while working in a coffee shop when the connection died.

    It took me a while to get started with Box2DJS. The documentation is there but the explanations aren’t. The members are listed, but what do they do? I had to rely on examples to figure out how to get things working.

    And for the Twitter mashup, I was unable to delete bodies so the page has to reload so it doesn’t slow to a crawl. Supposedly you can delete bodies, but it just doesn’t work.

    I pulled out most of my hair trying to create rigid bodies which weren’t rectangles or circles. There is a limitation for those and trying to work around it was a nightmare. If I ever get some more time, I’d like to get it working so I can finish the crayon physics thing.

    Here is another IDE I forgot to mention:
    http://obsessing.org/

    There are a bunch of us on irc.mozilla.org at #processing.js if you want to chat.

    Good luck on the game!

(will not be published)