PhysicsJS - A modular, extendable, and easy-to-use physics engine for javascript

That's pretty sweet, especially the tablecloth demo :)

Two things though, when moving objects fast enough they can pass trough other objects and the tablecloth demo seems to lack any kind of damping (air resistance).

Air resistance can be set as a parameter to the world. The object tunneling is an outstanding issue, but one that many physics engines suffer due to the collision strategy. Hopefully one day that issue will be ironed out :)

Loving this!
is there any way to tween an object using physicsjs? i want and object to move one one corner to the center. would i need to make a constraint? cant i just tween?

Tweening might make sense to add in future, but the whole point of a physics engine is to simulate real physics. If you want a tween it might be best to use a combination of PhysicsJS and Greensock.

You could set body.fixed = true; while it's tweening and have the tweening engine modify the body.state.pos.set(x,y); so that the physics remains intact.

thanks! that makes complete sense.
one thing i'm struggling with is how to refer to the dom element when its created using physicsjs.

for example, if i create a circle:
var myEM = Physics.body('circle', {....

and then i want to refer to that object as a dom element, how would i do that?

i've tried document.getElementById('myEM') and document.getElementByName('myEM')

could you help please?
V

You would have to use the "dom" rendering engine. and have it render at least once:
var renderer = Physics.renderer('dom", { ... });
world.add( renderer );
world.render();
myEM.view; // the dom element

otherwise you can create your own element and just place it in .view...
var el = document.createElement('div');
myEm.view = el;

fantastic! thanks so much for your help. and for PhysicsJS. V

So in the first method you mentioned, are you saying that as long as i have 'rendered' the page with the dom rendering engine, i can call any existing elements using their id? eg:

<canvas id="viewport">
    <div id="elasticdiv">123</div>
 </canvas>
</code>
</pre>
And then:

elasticdiv.view;
</code>
</pre>
i dont think i've understood correctly, could you please explain?

And in the second method, do you mean i could edit the 'createView' method in physicsjs to allow me to add a div? So that i could say:

var el = document.createElement('div');
myEM.view = el ;
</code>
</pre>
without getting a type error?

V

No... that doesn't make sense.
You need to either let the DOM rendering engine create elements for you, and then reference the myEM.view to access the htmlElement. Or you can create your own DOM element and assign it to myEM.view. Canvas won't work this way.

If you want to access them by their ids, you'll have to create your own elements and then manually assign them to the .view property in a PhysicsJS body (your myEM)

If you want to use canvas you'll have to use the canvas rendering engine, which stores Images inside the .view property.

If you create a jsFiddle of your work I could more easily see what you're trying to do.

Thanks you so much for your help. Please take a look at this fiddle (based on one of your basic examples:
http://jsfiddle.net/vauneen/ss5df/8/

i add an object to the world, and then i try assign my existing dom element to that object, unsuccessfully.

V

I just figured it out! edited the fiddle to render dom instead of canvas, like you said in the first place. thanks again Jasper, much appreciated.

If i use the DOM rendering engine, and add my elements manually, do they lose dragability? In this fiddle, http://jsfiddle.net/vauneen/ss5df/18/ , i just cant seem to make the elements drag-able. do i lose some functionality when rendering the DOM?

Yes unfortunately, I've not yet got a general solution for cursor interactions since it depends on the rendering engine. It should be a matter of attaching mouse events to dragging the element. For example, on mousedown set the body to .fixed = true, and on mousemove change the .state.pos.set(x,y) to the position dictated by the mouse.

Thanks again for the help and the product :)

Jasper, it's awesome!

Jasper, it's awesome!