Famo.us Balls Drag and Drop, set velocity when released

Question

I'm trying to achieve something similar to an air hockey table effect with Famo.us. The idea is to have multiple circle bodies that can collide (see battle).

Right now my first concern is getting the ball's vector attributes to zero out on drag start.

I'm trying to use the 'reset()' method from Particle.reset, but am running into tons of issues. Here's some of the code from the codepen I have so far:

  ball.draggable.on("start", function(pos) {
    var zeroV = new Vector(0, 0, 0);
    // need to remove force here
    ball.circle.reset(pos.position, zeroV, ball.circle.orientation, zeroV);
});

Any idea how to best zero out the force on the ball once I begin a drag? Also how might I determine velocity on release relative to how fast the user is dragging before release?

Answer 1

The answer to both of your questions lie in the adding and removing a body particle from the physics engine in Famo.us.

Here is example code: jsBin code

Note: This example does not solve your whole solution, but does answer your questions and should help you to get to your desired effect.

Any idea how to best zero out the force on the ball once I begin a drag?

Rather than zero out the force, you will detach the particle from the engine temporarily.

physicsEngine.removeBody(this.particle);

In the example, I am doing this on click of a created circle surface.

ball.particle = new Circle({
  radius: radius,
  position: [x, y, 0]
});

ball.physicsID = physicsEngine.addBody(ball.particle);
physicsEngine.attach(collision, balls, ball.particle);

ball.on('click', function(){
  if (!this.stopped) {
    physicsEngine.removeBody(this.particle);

  } else {
    this.physicsID = physicsEngine.addBody(this.particle);
    physicsEngine.attach(collision, balls, this.particle);
    balls.push(this.particle);
  }
  console.log('balls', balls);
  this.stopped = !this.stopped;
});

How might I determine velocity on release relative to how fast the user is dragging before release?

When you drag the square surface and on('end'... you pass the velocity to the creation of your particle. You use the velocity from the drag end to start your particle in motion with setVelocity.

ball.particle.setVelocity(velocity);

As you can see in the example code:

sync.on('end', function(data){
  if (!surface.createdBall && data.velocity){
    var velocity = data.velocity;
    surface.createdBall = true;
    var endX = position[0] + 0;
    var endY = position[1] + 0;
    createBall(endX, endY, velocity);
  }
});

...

  function createBall(x, y, velocity) {
    var ball = new Surface({
      size: [radius * 2, radius * 2],
      properties: {
        backgroundColor: 'blue',
        borderRadius: (radius * 2) + 'px'
      }
    });
    ball.particle = new Circle({
      radius: radius,
      position: [x, y, 0]
    });

    ball.physicsID = physicsEngine.addBody(ball.particle);
    physicsEngine.attach(collision, balls, ball.particle);

    node.add(ball.particle).add(ball);

    balls.push(ball.particle);
    console.log('created ball', velocity);
    ball.particle.setVelocity(velocity);
    surface.createdBall = false;

    ball.on('click', function(){
      if (!this.stopped) {
        physicsEngine.removeBody(this.particle);

      } else {
        this.physicsID = physicsEngine.addBody(this.particle);
        physicsEngine.attach(collision, balls, this.particle);
        balls.push(this.particle);
      }
      console.log('balls', balls);
      this.stopped = !this.stopped;
    });
  }