title: Box2d.js with Processing.js
body: <p>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. </p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <pre><code>void mousePressed(){
       for(int i = 0; i &lt; 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) &lt; 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);      
          }
     }    
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Cheers</p>