# Cloth simulation

FULL SCREEN

### Particles and forces

The simulation of cloth  is about the simulation of particles with mass and interconnections, called constraints  between these particles.

To be able to affect particles with forces and calculate how much that shifts their position we need two things:

• Newton second law, to  translate force into acceleration: • Verlet integration, to translate acceleration into position: Particle Class in Javascript :

function Particle( x, y, z, mass ) {

this.position = clothFunction( x, y ); // position
this.previous = clothFunction( x, y ); // previous
this.original = clothFunction( x, y );
this.a = new THREE.Vector3( 0, 0, 0 ); // acceleration
this.mass = mass;
this.invMass = 1 / mass;
this.tmp = new THREE.Vector3();
this.tmp2 = new THREE.Vector3();

}

// Force -> Acceleration

Particle.prototype.addForce = function( force ) {

this.tmp2.copy( force ).multiplyScalar( this.invMass )
);

};

Method to compute Verlet intgration, here lithgly modified for adding damping (DRAG = 1-DAMPING ):

  // Performs Verlet integration
Particle.prototype.integrate = function( timesq ) {

var newPos = this.tmp.subVectors( this.position, this.previous );

this.tmp = this.previous;
this.previous = this.position;
this.position = newPos;

this.a.set( 0, 0, 0 );

};

So far we have what it takes to move particles in space, now we need the constraints that will make this set of particles behave like a cloth. We will add connections to constrain the particles to form a grid.

### Position constraints

We will base our connections on constraints of distances between pairs of particles. Hence, each constraint between two particles has a distance that it would like to return to for the cloth to be at rest ( restDistance ). Therefor we introduce constraint satisfaction to modify the position of the two particles so that their distance is once again restDistance.
Here P1 and P2 are too far to each other: To satisfy the constraints we move P1 and P2 the same amount ( correctionHalf ) .

var diff = new THREE.Vector3();

function satisfyConstraints( p1, p2, distance ) {

diff.subVectors( p2.position, p1.position );
var currentDist = diff.length();
if ( currentDist === 0 ) return; // prevents division by 0
var correction = diff.multiplyScalar( 1 - distance / currentDist );
var correctionHalf = correction.multiplyScalar( 0.5 );
}
The 2 two kind of constraints used here: 