Constraints

Constraints are rules that define the relationships between particles. They are the core mechanism for building structures. This page introduces the main constraints available.

DistanceConstraint

Forces two particles to maintain a specific distance from each other. This is the most common constraint.

React

<DistanceConstraint from="p1" to="p2" />

JavaScript

const constraint = new DistanceConstraint(p1, p2);
sim.addConstraint(constraint);

CollisionConstraint

Prevents two particles from overlapping, based on their style.radius.

React

<Point id="p1" pos={new Vec2(240, 100)} style={{ radius: 20 }} />
<Point id="p2" pos={new Vec2(260, 100)} style={{ radius: 20 }} />
<CollisionConstraint from="p1" to="p2" />

JavaScript

const p1 = new Particle(new Vec2(240, 100));
p1.style.radius = 20;
const p2 = new Particle(new Vec2(260, 100));
p2.style.radius = 20;
const collision = new CollisionConstraint(p1, p2, 1);
sim.addConstraint(collision);

PinConstraint

Fixes a particle to a specific point in space. This is useful for creating anchor points.

React

This is achieved via the pinned prop on the <Point> component.

<Point id="anchor" pos={new Vec2(250, 100)} pinned />

JavaScript

const pin = new PinConstraint(p1, p1.pos);
sim.addConstraint(pin);

AngleConstraint

Maintains the initial angle between three particles.

React

<AngleConstraint from="p1" center="p2" to="p3" stiffness={0.1} />

JavaScript

const angleConstraint = new AngleConstraint(p1, p2, p3, 0.1);
sim.addConstraint(angleConstraint);

MinMaxDistanceConstraint

Keeps the distance between two particles within a certain range.

React

<MinMaxDistanceConstraint from="p1" to="p2" minDistance={50} maxDistance={150} />

JavaScript

const minMax = new MinMaxDistanceConstraint(p1, p2, 50, 150, 1);
sim.addConstraint(minMax);

MinMaxAngleConstraint

Keeps the angle between three particles within a specific range in radians.

React

<MinMaxAngleConstraint from="p1" center="p2" to="p3" minAngle={Math.PI/2} maxAngle={Math.PI} />

JavaScript

const joint = new MinMaxAngleConstraint(p1, p2, p3, Math.PI/2, Math.PI, 1);
sim.addConstraint(joint);

PlaneConstraint

Forces a particle to stay on one side of an infinite plane (a line in 2D).

React

<PlaneConstraint particle="ball" origin={new Vec2(0, 300)} normal={new Vec2(0, -1)} />

JavaScript

const floor = new PlaneConstraint(ball, new Vec2(0, 300), new Vec2(0, -1));
sim.addConstraint(floor);