0

I've been trying to remove elements (balls) that have been added to the Physics engine, but I can't find a way to do it.

This is the code I'm using to add the molecules to the Physics Engine:

  var numBodies = 15;
  function _addMolecules() {
    for (var i = 0; i < numBodies; i++) {

      var radius = 20;

      var molecule = new Surface({
        size: [radius * 2, radius * 2],
        properties: {
          borderRadius: radius + 'px',
          backgroundColor: '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6)
        }
      });

      molecule.body = new Circle({
        radius: radius,
        mass: 2
      });

      this.pe.addBody(molecule.body);

      this.molecules.push(molecule);
      this.moleculeBodies.push(molecule.body);

      molecule.state = new Modifier({origin: [0.5, 0.5]});
      //** This is where I'm applying the gravity to the balls and also where I'm checking the position of each ball
      molecule.state.transformFrom(addBodyTransform.bind(molecule.body));

      this._add(molecule.state).add(molecule);
    }
  }

and on the addBodyTransform function I'm adding the gravity to the balls and checking their position, and for any that are outside the top part of the viewport I want to remove it completely (I'm only using walls on the left, right and bottom edges of the viewport).

  function addBodyTransform() {
    var pos;
    for (var i = 0; i < thisObj.moleculeBodies.length; i++) {
        pos = thisObj.moleculeBodies[i].getPosition();
            if(pos[1]<(-windowY/2)){
                //I tried this but it doesn't work
                thisObj.pe.removeBody(thisObj.moleculeBodies[i]);
                thisObj.moleculeBodies[i].render = function(){ return null; };
            } 
    }

    thisObj.gravity.applyForce(this);
    return this.getTransform();
  }

It doesn't work. I tried a couple of other things, but no luck. Whereas changing the position of the balls on the function above worked fine:

thisObj.moleculeBodies[i].setPosition([0, 0]);

Does anybody have any idea how to remove a body (a circle in this case)?

P.S.: thisObj is the variable I'm assign the "this" object to in the constructor function and thisObj.pe is the instance of the PhysicsEngine(). Hope that makes sense.

user3794206
  • 71
  • 4

1 Answers1

1

After some investigation, using the unminified source code and trying out different things, I realised that there was something weird going on in the library.

Having a look at the repository, I found out that the function _getBoundAgent is being used before it is defined, which matched with the error I was getting (you can check it here: https://travis-ci.org/Famous/physics). So it looks like it is a bug in the Famo.us source-code. Hopefully it will be fixed in the next release.

For the time being, I had to create a hack, which is basically detaching all agents (as well as gravity) from the balls that go outside the viewport and setting their (fixed) position far outside the viewport (about -2000px in both directions).

I know it is not the best approach (a dirty one indeed), but if you have the same problem and want to use it until they release a fix for that, here is what I did:

  function addBodyTransform() {
            var pos = this.body.getPosition();

            //Check if balls are inside viewport
            if(pos[1]<(-(windowY/2)-100)){
                if(!this.removed){
                    //flagging ball so the code below is executed only once
                    this.removed = true;
                    //Set position (x and y) of the ball 2000px outside the viewport
                    this.body.setPosition([(-(windowX/2)-2000), (-(windowY/2)-2000)]);
                }
                return this.body.getTransform();
            }else{
                //Add gravity only if inside viewport
                thisObj.gravity.applyForce(this.body);
                return this.body.getTransform();
            }
  }

and on the _addMolecules function, I'm adding a "molecule.removed = false":

  function _addMolecules() {
    for (var i = 0; i < numBodies; i++) {

      ...

      molecule.state = new Modifier({origin: [0.5, 0.5]});
      //Flagging molecule so I know which ones are removed
      molecule.removed = false;
      molecule.state.transformFrom(addBodyTransform.bind(molecule));
      this._add(molecule.state).add(molecule);
    }
  }

Again, I know it is not the best approach and I will be keen in hearing from someone with a better solution. :)

user3794206
  • 71
  • 4