Modeling Mitosis Spindle Fibers in Matter.js
This article explains how to simulate the mechanical separation of chromosomes during cellular mitosis using the Matter.js 2D physics engine. By representing centrosomes as anchor points, sister chromatids as rigid bodies, and spindle fibers as shrinking distance constraints, you can accurately model the tension and movement characteristic of anaphase. Below is a direct, step-by-step breakdown of how to configure the physics bodies, apply forces, and trigger the separation.
1. Conceptual Mapping to Matter.js
To capture the biomechanics of mitosis, map cellular components to Matter.js primitives:
- Centrosomes (Spindle Poles): Static or heavily damped circular bodies placed at opposing ends of the cell.
- Sister Chromatids: Pairs of rigid rectangular bodies positioned along the metaphase plate in the center.
- Centromere / Cohesin Link: A temporary, stiff
Constraintholding paired chromatids together. - Spindle Fibers (Microtubules): Elastic
Constraintinstances connecting each chromatid to its corresponding centrosome.
2. Setting Up the Bodies
First, establish the engine, world, and opposing spindle poles:
const { Engine, Render, Runner, Bodies, Composite, Constraint, Events } = Matter;
const engine = Engine.create({ gravity: { x: 0, y: 0 } }); // Zero-gravity environment
const world = engine.world;
// Centrosomes (Left and Right Poles)
const poleLeft = Bodies.circle(100, 300, 20, { isStatic: true });
const poleRight = Bodies.circle(700, 300, 20, { isStatic: true });
Composite.add(world, [poleLeft, poleRight]);3. Creating Paired Chromatids and Spindle Fibers
Place two sister chromatids at the center. Connect them to each other with a breakable cohesion constraint, and connect each to its respective pole via a spindle fiber constraint.
// Sister chromatids
const chromatidA = Bodies.rectangle(390, 300, 15, 60, { frictionAir: 0.1 });
const chromatidB = Bodies.rectangle(410, 300, 15, 60, { frictionAir: 0.1 });
// Cohesin constraint holding chromatids together
const cohesin = Constraint.create({
bodyA: chromatidA,
bodyB: chromatidB,
stiffness: 0.9,
length: 20
});
// Left spindle fiber
const fiberLeft = Constraint.create({
bodyA: poleLeft,
bodyB: chromatidA,
stiffness: 0.01,
length: 290
});
// Right spindle fiber
const fiberRight = Constraint.create({
bodyA: poleRight,
bodyB: chromatidB,
stiffness: 0.01,
length: 290
});
Composite.add(world, [chromatidA, chromatidB, cohesin, fiberLeft, fiberRight]);4. Simulating Anaphase: Fiber Shortening and Cleavage
In biological anaphase, motor proteins and microtubule depolymerization shorten spindle fibers while separase enzyme cleaves cohesin.
To model this, remove the cohesion constraint and continuously reduce
the length property of each spindle fiber constraint on
every engine update until the chromosomes reach the poles.
let anaphaseStarted = false;
// Trigger anaphase after an initial delay
setTimeout(() => {
// Cleave the cohesin bond
Composite.remove(world, cohesin);
anaphaseStarted = true;
}, 2000);
// Shorten fibers dynamically to pull chromatids to the poles
Events.on(engine, 'beforeUpdate', () => {
if (!anaphaseStarted) return;
const pullRate = 1.5; // Shortening speed per tick
const minFiberLength = 30; // Stopping distance at centrosome
if (fiberLeft.length > minFiberLength) {
fiberLeft.length -= pullRate;
}
if (fiberRight.length > minFiberLength) {
fiberRight.length -= pullRate;
}
});5. Tuning for Biological Realism
- Fluid Viscosity: Chromosomes move through
high-viscosity cytoplasm. Increase
frictionAir(between0.05and0.2) on the chromatid bodies to create low-Reynolds-number, overdamped movement rather than elastic bouncing. - Microtubule Stiffness: Set constraint
stiffnesslow (e.g.,0.005to0.05) to represent dynamic microtubule tension. - Multiple Fibers: Attach multiple constraints per chromosome with slight anchor offsets along the body to stabilize rotation, preventing chromatids from flipping unnaturally as they are dragged through the medium.