Tearable Spider Silk Simulation in Matter.js

This article explains how to simulate tearable spider silk in Matter.js by modeling silk strands as interconnected elastic constraints and removing them dynamically under structural stress. You will learn how to construct a particle-constraint web network, measure stress based on distance deformation during the physics engine's update cycle, and safely remove overstressed constraints one by one to produce realistic, cascading tears.

Modeling Silk with Particles and Constraints

Spider silk behaves like a tensile polymer network. In Matter.js, this is simulated using a chain or lattice of lightweight, low-friction circular bodies (Matter.Bodies.circle) joined by distance constraints (Matter.Constraint.create).

To mimic the elasticity of silk, configure each constraint with:

stiffness: A high value (between 0.8 and 1.0) for structural strength, or lower for stretchy capture threads.
damping: A small value (e.g., 0.05 to 0.1) to suppress excessive harmonic oscillation.
render.type: 'line' for visual representation.

Fixed points (like anchor branches or walls) are defined by setting the isStatic property of the anchor bodies to true.

Calculating Stress on Constraints

Matter.js does not calculate internal constraint reaction forces automatically, but stress is directly proportional to constraint deformation. The elongation can be tracked by measuring the Euclidean distance between the two connected bodies (or anchor offsets) and comparing it to the constraint's initial resting length.

The current distance \(D\) between two connected bodies \(A\) and \(B\) is calculated as:

\[D = \sqrt{(B.position.x - A.position.x)^2 + (B.position.y - A.position.y)^2}\]

If the current distance exceeds a defined breaking threshold (e.g., \(D > \text{restLength} \times \text{stretchLimit}\)), the constraint is considered overstressed.

Implementing the Tearing Loop

Tearing must be processed iteratively within the beforeUpdate or afterUpdate lifecycle events of the Matter.Events module. When modifying the physics world during runtime, evaluate constraints and remove failed links sequentially from the active Composite.

const { Engine, Render, Runner, Bodies, Composite, Constraint, Events, Vector } = Matter;

// Create engine and world
const engine = Engine.create();
const world = engine.world;

// Break threshold: 1.3 means silk snaps at 130% of its resting length
const STRETCH_TOLERANCE = 1.3; 

Events.on(engine, 'beforeUpdate', () => {
    // Retrieve all active constraints in the simulation
    const constraints = Composite.allConstraints(world);

    for (let i = 0; i < constraints.length; i++) {
        const constraint = constraints[i];

        // Skip non-tearable constraints or constraints missing endpoints
        if (!constraint.bodyA || !constraint.bodyB || !constraint.isTearable) {
            continue;
        }

        // Calculate current world positions of connection points
        const posA = Vector.add(constraint.bodyA.position, constraint.pointA);
        const posB = Vector.add(constraint.bodyB.position, constraint.pointB);

        // Calculate current separation distance
        const currentDistance = Vector.magnitude(Vector.sub(posB, posA));
        const limit = constraint.length * STRETCH_TOLERANCE;

        // Remove the constraint if it exceeds structural capacity
        if (currentDistance > limit) {
            Composite.remove(world, constraint);
            break; // Break loop or limit deletions per frame for realistic cascade propagation
        }
    }
});

Ensuring Sequential and Realistic Snapping

Removing every overstressed constraint in a single frame can cause an entire web structure to vanish instantly under shock loads. To simulate authentic tearing physics:

Rate-Limit Severing: Break only one or two overstressed constraints per physics tick. This allows internal forces to redistribute to neighboring threads across successive frames, creating an authentic cascading unravel effect.
Assign Graded Strengths: Natural spider webs have rigid structural radial lines and stretchy spiral capture lines. Assign different STRETCH_TOLERANCE values to different constraints depending on their role in the web geometry.
Clean Up Severed Nodes: After links break, check for dynamic bodies that have zero remaining constraints attached. Remove or convert free-floating particles to prevent unnecessary collision checks and performance drops.