Support for famo.us physics about famous-angular HOT 13 CLOSED

I actually explored this and one way I was doing this was by defining the physics engine in the controller and making it so that a modifier draws its transforms from a particle. Maybe it would make sense to have a particle property on a modifier that would do something like this seamlessly?

from famous-angular.

Sounds it's close to my workaround. something like:

<fa-modifier ng-init="circle = createCircle()" fa-transform="circle.getTransform()">

so, the possible way would be like this?

<fa-modifier fa-physics-circle="{...}">

The issue would be how to define the properties in a general way.

from famous-angular.

Hm, maybe it's better to implement as separate directives. Seems hard but one idea to start:

<fa-physics-engine>
  <fa-physics-particle type="circle" properties="{radius: 20}" position="[0, 0, 0]" velocity="[1, 1, 1]" constraints="[...]" forces="[...]">
    <fa-surface>...</fa-surface>
  </fa-physics-particle>
</fa-physics-engine>

However, it's not easy to describe collisions among all circles.

Any ideas or comments?

from famous-angular.

Hey @dai-shi — we've explored this quite a bit, and here's what we've come up with so far:

1. Famo.us physics interactions cannot be represented with a tree the same way that the scene graph can—they would need to be represented a non-tree graph, sometimes directed, sometimes cyclical. Thus, the DOM (an undirected, acyclic graph (tree)) is not an elegant way of declaring physics interactions.
2. That said, the way forces are tied to surfaces can, and in Famo.us/Angular, probably should be represented in the DOM—because that's where we declare our surfaces, and that's where we can do things like data-binding and template insertion.
3. So what @davis wrote, and something between your first workaround and your second idea, is the best solution we have for now (though we haven't yet implemented it)

The interface would be something like:

Controller:

• Create physics Particles in your controller (a Circle is a Body is a Particle)
• Apply physics forces, constraints, etc. to these Particles just like you would in vanilla Famo.us: this is where you (imperatively) set up your possibly directed, possibly cyclic graph of physics interactions
• Instead of attaching Surfaces to these Particles, expose them on $scope — and that's it for the controller.

View:

• Attach a Particle that has been exposed on the scope to a fa-physics-modifier
• Add a Surface (or whatever else) as a child

<fa-physics-modifier fa-particle="myParticle">
  <fa-surface>boing</fa-surface>
</fa-physics-modifier>

fa-physics-modifier behind the scenes would either 1. attach its children directly to the Particle, or 2. extract the transform information from the particle and apply it to a Modifier (would need to figure this out at implementation time)

What do you think of this approach?

from famous-angular.

Hi, I agree that physics interactions can't be represented as a tree, so your approach looks fair enough.

from famous-angular.

Any plan to implement fa-physics-modifier?

from famous-angular.

Here you go! 32c8ebe and example https://github.com/thomasstreet/famous-angular-examples/commit/f245659e7581ed294e5db56538a2e882c2f6ad65

As I started implementing fa-physics-modifier, it turned out to be a lot of duplication with fa-modifier. It felt better to be able to just support passing in a Particle/Body to any fa-modifier field. Does this work for your needs?

from famous-angular.

Wow! that's quick.

If I understand correctly, it only changes from

<fa-modifier ng-repeat="circle in circles" fa-transform="circle.getTransform()">

to

<fa-modifier ng-repeat="circle in circles" fa-translate="circle">

It's a little better though, am I missing something?
It's working anyway.

One issue for me was, previously I apply gravity force like the following:

circle.origTransform = circle.getTransform;
circle.getTransform = function() {
  force.applyForce(circle);
  return circle.origTransform();
};

Is there any best practice for this kind of things?

from famous-angular.

If you use PhysicsEngine's .attach method, you should be able to attach your force to your circle:

myPhysicsEngine.attach(gravityForce, circle);

That circle should then get its position updated as the Physics engine ticks. If you pass your circle through to fa-modifier, it should read those changes automatically.

One of the things I'm excited about for this api with fa-modifier is the fact that you can easily assign Particle 'positions' to any transform property, e.g. rotation or scale, instead of just translate (which is the hard-coded behavior in Particle.getTransform)

from famous-angular.

Ah, you are absolutely right. Just remembered that attach didn't work. Seems like a bug. I'll submit a PR to famous/physics.

Sounds interesting about assigning particle positions to rotation or else. What would be the use of it? That doesn't mean we can rotate circles based on physics.

from famous-angular.

The basic idea would be similar if you wanted to use a SpringTransition to affect rotation, scale, etc. but if you wanted more full-blown physics simulations than just a SpringTransition. Here's a toy example using Circles in a particle system with basic gravity and snapping, where the positions of the circles in the system are mapped to the rotation values of the circles on the screen:

Demo (try mouseover) http://thomas-street.s3.amazonaws.com/famous-angular/examples/index.html#/physics-particles
and code https://github.com/thomasstreet/famous-angular-examples/blob/master/app/scripts/controllers/physics-particles.js + https://github.com/thomasstreet/famous-angular-examples/blob/master/app/views/physics-particles.html

The basic idea is instead of working in the pixel domain (say, [0, 320] for x, [0, 568] for y on an iPhone) you would manipulate your particles in the domains appropriate for whatever attribute you're working with (say, [.66, 1.25] for both x and y with scale, or [0,0] for x, [0,0] for y, [0, 2 * Math.PI] for z for rotation, as in the linked example.) Again, this is a toy example, but my sense is that there could be some cool uses for this feature.

from famous-angular.

Oh, I see. Thanks for the example which help me to understand. I will think about the use case too.

from famous-angular.

Closing this issue.

from famous-angular.