DOM rendering demo about p2.js

[mlynch]

I'm sure this is low on your priority list, but it would be cool to see. One reason DOM rendering would be compelling is there is a small but growing trend (especially in mobile) to use physics concepts to define the interactions of views (see UIDynamicAnimator which was added in iOS 7).

Right now I'm evaluating different engines for a similar feature in Ionic: http://github.com/driftyco/ionic. The lack of DOM output makes it harder to plug in (I'm using PhysicsJS right now which has it), but I feel like this library is more stable.

At any rate, awesome library and I look forward to playing with it more :)

[schteppe]

Thanks!
What would be a killer demo? I've been thinking of starting with simple draggable squares, or something similar.
Btw, I'm only making a small demo. A complete DOM renderer is not in the project scope.

[jtenner]

Is there still a need for this? I think I might be able to help with this. I have some knowledge of Dom sprites and would need some specifications on what the renderer/api would need to look like.

[petarov]

IMHO combining Ionic and p2 could be a huge win, although a DOM renderer would probably be an effort to reckon with.

[jtenner]

@petarov I could easily combine this with react, transforms, proper transitions, and some react magic.

I'll work up a gist with 300 balls running at 60fps bouncing off of 3 planes tomorrow

[jtenner]

It turns out react is not designed for 60fps animation, and the dom shouldn't be used that way either :).

However, it is possible and I am working on it.

It's going to take some time.

-Josh

[schteppe]

Hm, would it be more smooth/performant if you ran the physics at, say, 30fps and let the DOM do linear interpolation using CSS animation?

[jtenner]

I'm pushing updates way too fast to React, and it ends up eating a lot of memory and doing garbage collection way too often. FPS doesn't matter.

Maintaining a set of dom nodes by giving them IDs in an index and pushing transforms and transitions to them is the fastest way and can be done at 60fps.

I'll get a working demo soon, I promise.

[schteppe]

Ok cool!

Another thing.. Should the animation data really go through React as state/props?

Here's a related post. Using jQuery, but I think it has some ideas that can be applied to using p2 too. http://stackoverflow.com/questions/25436445/using-jquery-plugins-that-transform-the-dom-in-react-components

[jtenner]

Yeah if I don't use react stuff it goes faster... so why use react at all ;-).

[schteppe]

Made a little fiddle around this... See http://jsfiddle.net/k98u8p0o/18/

The idea is to run physics at a slower rate than 60Hz and use CSS animations for the interpolation. Maybe you can use some parts of it. It seems to run OK on my phone as well :)

[schteppe]

Haha, having a bunch of fun with this

[mlynch]

I'm just having fun watching :)

To follow up to my comment, I did explore this a bit, using physicsjs though. If you want to see what I did, it's in this branch: https://github.com/driftyco/ionic/tree/wip-physics/contrib/physics.

Didn't find it was very useful or easy to use in practice, but fun as hell nonetheless 😛

[jtenner]

I highly suggest this:

elem.style.transition = 'transform 20ms';
elem.style.transform = 'translate(' + object.position[0] + ',' + object.position[1] + ') rotate(' + object.angle + ')';

You can go 60fps, just make the transition slightly longer than 20ms and the object will catch up.

Also, why set the transition more than once?

Simply use request animation frame and set transform: translate(x, y) rotate(rad) after physics once per frame.

[schteppe]

Yeah you're right. It feels like using CSS for interpolation is a bit unstable when updating so often, so I'm skipping it for now.

The DOM rendering demo has been added to the repo. Closing issue.