Question

Recently I have been furthering my knowledge of Javascript, by combining the Processing.js and Box2D.js libraries to make some neat browser-based simulations.

With my current idea, I am trying to allow the user to click and drag a shape, and then let it drop once the mouse is released. So far I have been able to figure out how to use the b2MouseJoint object to manipulate a body with mouseX/mouseY coordinates, but it doesn’t quite work to the full extent.

All that happens when a shape is clicked is it gets pinned and revolves around what ever mouseX/mouseY point was current at the time of the click.

void mousePressed(){
     for(int i = 0; i < circles.size(); i++){   
        //Get body objects from ArrayList
        var obj = circles[i]; 

        // Retrieve shapes from body
        var innerShape = obj.GetShapeList();
        var rad = innerShape.m_radius;

        // Create mouseJoint and add attributes
        var mouseJoint = new b2MouseJointDef();
        mouseJoint.body1 = world.GetGroundBody();

        // Detect body
        if(dist(mouseX,mouseY,obj.m_position.x,obj.m_position.y) < rad){
           Vec2 p = new b2Vec2(mouseX,mouseY);

           mouseJoint.body2 = obj;

           mouseJoint.target = p;
           mouseJoint.maxForce = 10000.0f * obj.GetMass();
           mouseJoint.collideConnected = true;
           mouseJoint.dampingRatio = 0;
           mouseJoint.frequencyHz = 100;
           world.CreateJoint(mouseJoint);      
        }
   }    
}

So basically my question is, how can this be written so the Body/Shape follows my mouse’s coordinates while I have the mouse held down, instead of just pinning the shape in place.

Cheers

Answer 1

Basically all you have to do is add the code you’re using now to set the coordinate in mousePressed to a mouseDragged() method, as well, as this is the event method that gets called while the mouse is moved with one or more buttons depressed:

void mouseDragged()
{
  // update obj with mouseX and mouseY in this method
}

You may also want to do a bit more administration by setting up “initial click” mark variables during mousePressed(), updating a set of “offset” variables during mouseDragged() and committing the offsets to the marks in mouseReleased(), so that you can do things like snapping back to the original position, etc.