Constraints in the Physical World -MatterJs(5)

The article is based on MatterJs ^0.17.1

preface

In previous articles, we introduced rigid bodies and complexes in the physical world.

• Rigid bodies in the physical world
• Complexes in the physical world

A complex is an object made of rigid bodies and composites held together by some kind of “constraint”.

So what are constraints? A constraint is a rule that links two objects with a series of physical properties that guide the physical world of the two physics. ———— The two objects can be points, rigid bodies, or complexes.

In matterJs, a “mouse constraint” is provided, which enables human-computer interaction and provides a way to move rigid bodies with a mouse or touch. Let’s take a look at how “constraints” work in matterJs.

1. Constraints between objects

Constraint module in MatterJs. Rigid bodies can form constraints with points, rigid bodies, and complexes. A variety of composite environments can be formed through constraints between objects.

1. Constraint attributes

The Constraint has most of the properties of a rigid body. Here are some common ones:

Above are some general attributes, and below are the conditions that may exist to constitute constraints:

• pointA
• bodyA
• pointB
• bodyB

Using these we can define:

• The constraint between point A and rigid body B
• Constraints between rigid body A and rigid body B

You might be confused by this. What is this? We’ll continue with how to create a constraint.

2. How to create a constraint

Constraint. Create = function(options)

• Options configuration information, i.e., setting of properties above

The Constraint module lets you create a Constraint using the create method.

A dot is linked to a rigid body

For example 🌰: physical environment setup here will not talk, the previous article has. Now let’s write a ball hanging from a string.

/** Create a drop ball **/
var _cricle = Bodies.circle(200.200.50, {
    mass: 0.1.isStatic: false
}, 80);
/** Create constraint **/
var _constraint = Constraint.create({
    pointA: {
        x: 200.y: 100
    },
    bodyB: _cricle,
    /** rigidbody B link point **/
    // pointB: {
    // x: 20,
    // y: 20
    // }
});
Composite.add(world, [_cricle, _constraint]);
Copy the code

We can see the above example:

PointB {x: 0,y: 0} {x: 20,y: 20} {x: 20,y: 20}

If a point is linked to a rigid body, the rigid body does not specify a point, default center of gravity.

Rigid bodies are linked to rigid bodies

For example 🌰: two rigid bodies connected, immediately following the example above:

var _polygon = Bodies.polygon(400.200.3.50, {
    isStatic: true});var _polygon1 = Bodies.polygon(100.200.4.50, {
    isStatic: false});/** Create constraint 1 **/
var _constraint1 = Constraint.create({
    bodyA: _cricle,
    bodyB: _polygon,
    pointB: {
        x: 10.y: 10}});/** Create constraint 2 **/
var _constraint2 = Constraint.create({
    bodyA: _cricle,
    bodyB: _polygon1,
});
Composite.add(world, [_cricle, _constraint, _polygon, _polygon1, _constraint1, _constraint2]);
Copy the code

We can get the complex as shown below:

It is obvious that a non-static rigid cube will sway from side to side under force, but a static rigid triangle will not.

The constraint between rigid bodies, if no point is specified, defaults to the center of gravity of the rigid body. You can have multiple rigid bodies or links between multiple points. For example, our “chains” in the complex.

3. Get the coordinates of constraints

Gets the coordinates of the constraint’s pointA.

const point = Constraint.pointAWorld(_constraint);
console.log(point); //{x: 200, y: 100}
Copy the code

Gets the coordinates of the constraint’s pointB.

const point = Constraint.pointBWorld(_constraint);
console.log(point); //{x: 200, y: 200}
Copy the code

You can use these two methods to obtain the coordinates of the two join points of the constraint.

Second, mouse constraints

The MouseConstraint module in MatterJs. Provides a method for human-computer interaction, can achieve touch or mouse move rigid body.

1. How to create a mouse constraint

MouseConstraint. Create = function(engine, options)

• Engine Current engine
• The options to configure

Let’s look at some options properties:

For example 🌰: using our example above as a reference, add mouse constraints:

var mouse = Mouse.create(render.canvas),
    mouseConstraint = MouseConstraint.create(engine, {
        mouse: mouse
        }
    });
Composite.add(world, mouseConstraint);
render.mouse = mouse;
Copy the code

You can see that our object is stretched with mouse drag.

Third, summary

The content of the “constraints” is very simple, and the concept of constraints will make sense in the context of the previous chapters. Constraints allow us to visually create a complex. Constraints can be applied to objects:

• Point and rigid body
• Rigid body and rigid body

We can also use the MouseConstraint module for human-computer interaction.

Engines, rigidbodies, complexes, and constraints are all covered, and the next chapter will continue with the “collider” in MatterJs.

This article is shallow, hope you don’t hesitate to your comments and praise ~ note: this article is the author’s painstaking work, reprint must be declared