Constraints

Constraints are rules that define the relationships between particles. They are the core mechanism for building structures. This page documents both the low-level JavaScript classes and their corresponding React components.

DistanceConstraint

Forces two particles to maintain a specific distance from each other.

JS Class

new DistanceConstraint(a, b, stiffness, [distance])

• a, b (Particle): The two particles to constrain.
• stiffness (number): The rigidity of the constraint (0 to 1).
• distance (number, optional): The distance to maintain. Defaults to the initial distance.

React Component

<DistanceConstraint from to [stiffness] [distance] />

• from, to (string): The ids of the two <Point> components to constrain.
• stiffness (number, optional): The rigidity of the constraint.
• distance (number, optional): The distance to maintain.

---

PinConstraint

Fixes a particle to a specific point in space.

JS Class

new PinConstraint(a, pos)

• a (Particle): The particle to pin.
• pos (Vec2): The position to pin the particle to.

Note: In React, this is achieved via the pinned prop on the <Point> component.

---

AngleConstraint

Maintains the initial angle between three particles.

JS Class

new AngleConstraint(a, b, c, stiffness)

• a, b, c (Particle): The three particles, where b is the vertex of the angle.
• stiffness (number): The rigidity of the constraint.

React Component

<AngleConstraint from center to [stiffness] />

• from, center, to (string): The ids of the three <Point> components, where center is the vertex.
• stiffness (number, optional): The rigidity of the constraint.

---

MinMaxDistanceConstraint

Keeps the distance between two particles within a minimum and maximum range.

JS Class

new MinMaxDistanceConstraint(a, b, minDistance, maxDistance, stiffness)

• a, b (Particle): The two particles.
• minDistance, maxDistance (number): The allowed range.
• stiffness (number): The rigidity of the constraint.

React Component

<MinMaxDistanceConstraint from to minDistance maxDistance [stiffness] />

• from, to (string): The ids of the two <Point> components.
• minDistance, maxDistance (number): The allowed range.
• stiffness (number, optional): The rigidity of the constraint.

---

MinMaxAngleConstraint

Keeps the angle between three particles within a minimum and maximum range.

JS Class

new MinMaxAngleConstraint(a, b, c, minAngle, maxAngle, stiffness)

• a, b, c (Particle): The three particles, where b is the vertex.
• minAngle, maxAngle (number): The allowed angle range in radians.
• stiffness (number): The rigidity of the constraint.

React Component

<MinMaxAngleConstraint from center to minAngle maxAngle [stiffness] />

• from, center, to (string): The ids of the three <Point> components.
• minAngle, maxAngle (number): The allowed angle range in radians.
• stiffness (number, optional): The rigidity of the constraint.

---

PlaneConstraint

Forces a particle to stay on one side of an infinite plane.

JS Class

new PlaneConstraint(a, origin, normal)

• a (Particle): The particle to constrain.
• origin (Vec2): A point on the plane.
• normal (Vec2): The normal vector of the plane (points to the allowed side).

React Component

<PlaneConstraint particle origin normal />

• particle (string): The id of the <Point> to constrain.
• origin (Vec2): A point on the plane.
• normal (Vec2): The normal vector of the plane.

---

CollisionConstraint

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

JS Class

new CollisionConstraint(a, b, stiffness)

• a, b (Particle): The two particles to check for collision.
• stiffness (number): The rigidity of the collision response.

React Component

<CollisionConstraint from to [stiffness] />

• from, to (string): The ids of the two <Point> components to check for collision.
• stiffness (number, optional): The rigidity of the collision response.

---

Style Property

All constraints accept an optional style property in their constructor (for JS) or as a prop (for React). This object is used by the default renderer.

interface ConstraintStyle {
  color?: string;
  lineWidth?: number;
  hidden?: boolean;
}