Win an Ipad
  Developer   Demos & Samples   Distance joint

Distance joint

Screenshot
This article describes another type of box2d joint used in Moscrif. It connects two bodies in fixed distance. The bodies turn around each-other but the distance is fixed.

Create Joint

The joint is created by createDistanceJoint function. This function returns an instance of b2DistanceJoint, which provides all other operations with the joint. This createDistanceJoint function has a little more parameters, which specifies the joint‘s behavior. The first two paramenters are connected bodies followed by x and y coordinates of anchor point on both bodies.

Anchor point

The bodies do not have to be connected in their center. The points where the  bodies are connected in the joint are called anchor points. Different position of anchor point causes different behavior. If the anchor point is placed in the center, its movement does not affect body rotation. However, if the anchor point is outside the center, its movement affects the body rotation. The rotation is affected more, if the anchor point is further away from the center.

The createDistanceJoint function has some additional options like frequency, damping ratio and distanceLength. If the distanceLength is not set, the joint used the length which is between the bodies, when the joint was created.

In this sample, two bodies are connected with distance joint between them.

Example: create bodies and distance joint between them

// create two bodies and connect them with the distance joint
function _createBodies()
{
    // the body side
    var bodySide = 80;
    // first rectangle
    this._rect1 = this.addPolygonBody(Bitmap.fromFile("app://rectangle.png"), #dynamic, 1.0, 0.1, 0.7, bodySide, bodySide);
    // set body damping
    this._rect1.setLinearDamping(0.5);
    this._rect1.setAngularDamping(0.5);
    // place the body
    this._rect1.setPosition(System.width / 2, System.height / 2);
    // secod rectangle
    this._rect2 = this.addPolygonBody(Bitmap.fromFile("app://rectangle.png"), #dynamic, 1.0, 0.1, 0.7, bodySide, bodySide);
    // set body damping
    this._rect2.setLinearDamping(0.5);
    this._rect2.setAngularDamping(0.5);
    // place the body
    this._rect2.setPosition(System.width / 2, 3*System.height / 4);
    // create the distance joint
    var jointDef = {
        frequencyHz     : 100,
        dampingRatio    : 0.0,
       // distanceLength  : use default distance (distance which was between the bodies when they were created
    }
    this._distanceJoint = this.createDistanceJoint(this._rect1, this._rect2, System.width / 2,System.height / 2,System.width / 2,3*System.height / 4, jointDef, false)
}

Mouse joint

To allow users manipulate with the boxes, a mouse joint has to be implemented. The joint is created when user taps onto one of the boxes. To check  whether the user tapped onto the box, intersectsPoint function is used. This function checks x and y coordinates and see whether they lie in the object or not.

// reaction to pointer pressed event
function pointerPressed(x, y)
{
    var mouseJointDef;
    // check if user clicked on the body
    if (this._rect1.intersectsPoint(x, y)) {
        // create joint to move the first rectangle
        mouseJointDef = {
            maxForce        : 500 * this._rect1.getMass(),                                      // max force, which attracts the body to the target point
            frequencyHz     : 100,
            dampingRatio    : 0.0,                                     // damping ratio - prevent oscillation of the body around the target point
            targetX         : x / this.scale,                   // X position of anchor point on the body (circle)
            targetY         : (System.height - y) / this.scale    // Y position of anchor point on the body (circle)
        };
        this._mouseJoint = this.createMouseJoint(this._ground, this._rect1, mouseJointDef, true);
    } else if (this._rect2.intersectsPoint(x, y)) {
        // create joint to move the first rectangle
        mouseJointDef = {
            maxForce        : 500 * this._rect2.getMass(),                                      // max force, which attracts the body to the target point
            frequencyHz     : 100,
            dampingRatio    : 0.0,                                     // damping ratio - prevent oscillation of the body around the target point
            targetX         : x / this.scale,                   // X position of anchor point on the body (circle)
            targetY         : (System.height - y) / this.scale    // Y position of anchor point on the body (circle)
        };
        this._mouseJoint = this.createMouseJoint(this._ground, this._rect2, mouseJointDef, true);
    } else {
        // do nothing
        return;
    }
}

To ensure the box movement is used, we need to implement setTarget function in pointerDragged function.
For more information about Mouse joint see mouse joint sample.

 

 Image viewer   Revolute joint 
Write a Comment (0)
Subject
Please complete this mandatory field.
HTML Tags Not Allowed!
Comment
Please complete this mandatory field.