This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Koen Bok
Posted Mar 30 - Read on Facebook

I'm currently trying the pick the physics engine to use in Framer 3 and would like to hear some opinions. We basically have three options:

- Use the web version of box2d. This is what Apple uses under the hood of UIDynamics. It's a very decent engine and there is lots of documentation available. But it's from another age, has an extremely confusing api (which I could wrap, like Apple) and was built for C, not for Javascript (it got translated from c to flash to javascript hehe). The code looks very complete but it has not been updated in over a year.

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

- Use Newton. A beautiful and new physics engine written in Javascript with performance in mind. Downsides are that it seems relatively young and has quite a few less features then box2d. Also, main coder just took on a new job although he states that he will continue to update the project.

https://github.com/hunterloftis/newton

- Use p2.js. Also quite new, but it seems to have almost as much features as box2d. The author also built a 3d physics engine named cannon.js that is quite popular and seems to be a physics wizard in general.

http://schteppe.github.io/p2.js/

I'm currently leaning towards going for old-fashioned box2d.

13 Comments

Ale Muñoz

You may want to check boxbox http://incompl.github.io/boxbox/ (it seems to be a layer of syntax sugar on top of box2dweb)

Ninh Bui

If you define an interface for framer physics features, it really shouldn't matter which one you end up using? You should be able to swap/give the developer the chance to choose which engine to have under the hood too then via an adapter :) I'd pick the most mature one as a default, and allow others to contribute adapters then for their favorite physics engine and call it a day. my 2cts ;)

Koen Bok

You are right Ninh, but the api will be a process. I'll likely just add the few things that UIDynamics let you do first, and then slowly build out the api when I gain a better understanding of how designers want to work with physics. In the meantime the simple things should be simple (with a nice api) and the hard things possible (with the original api). So I think I'll be starting with box2d for now.

Koen Bok
Tisho Georgiev

Is there a significant difference between the three options in terms of performance? If not, box2d would be my choice for the immediate availability of thousands of articles/sample code floating around, which would be useful while the API is still being figured out.

Aaron Carámbula

I agree, my priorities would be perf, features, documentation, longevity, elegance (in that order).

Koen Bok

I have not done extensive testing, but I think Newton has the most focus on performance. They re-use objects to avoid the garbage collector kicking in and more fancy stuff like that. But it seems they don't vary a lot in actual performance (fps with many objects). I think that is because painting and compositing is still the most consuming thing and that is handled by Framer internally. The other cpu heavy stuff (like collision detection) uses the same algorithms across engines.

With my (very unoptimized) initial test it seems that we should be able to get 60fps on recent iPhones with between 30 and 60 animating views (layers in Framer 3).

After some more thought I think I'll settle for box2d initially, because of the most extensive docs/sample code, like Tisho sais.

Ninh Bui

For those worried about performance, I'm just going to leave this here: http://c2.com/cgi/wiki?PrematureOptimization . I'd recommend worrying about optimization if and when that actually becomes a problem ;-)

Ale Muñoz

Anybody linking to the c2.com wiki gets my immediate respect : )

Tomas Ruzicka

Marek check this out

Brandon Keely

Koen Bok if you’re interested in digging under the hood, take a look at Justin Windle's Coffee-Physics. It's not comprehensive like Box2d, but the code is very simple and clean, and easy to tweak into something new. https://github.com/soulwire/Coffee-Physics/

Herman Van Boeijen

how about these guys?
http://brm.io/matter-js/
Our lead coder read the source and says he was impressed.
The tests, to me, also look very stable and performant.

Ee Venn Soh

Used Box2D before. The API isn't the greatest and it is ported from C --> Javascript. However it is by far the most mature and well established engine out there. Angry Bird is using it. The joints API is amazing. Google IO 2014 created an extension to it, Liquid Fun. https://www.youtube.com/watch?v=2SaYkWNv0Hg If you are looking at physics engine aims at particle system, maybe try http://toxiclibs.org/ (Verlet Integration). Different from Box2D (Euler Integration)

Read the entire post on Facebook