Select
Slice
Wind

Dense Interactive Cloth

Overview
Click and drag mouse to interact with cloth. Press buttons above to select interaction mode: select a node, slice springs, or add wind. Reset button generates a new cloth.

Model
The cloth is modeled by a mesh of uniform-mass nodes connected by massless springs with linear elasticity and damping. Spring force from compression is turned off.

Code
This is an all-in-one html document. All math done with vanilla javascript, using functions, arrays, and variables only: no object-oriented stuff. Drawing with built-in canvas2d api. Press cntrl u for source code.

Iteration
During each iteration, a for loop runs to update each node.
  for each node:
    v = (sum(forces)/mass)*dt
    x = x + v*dt


Variables
Position, velocity, and connections for each node are stored in 3 arrays: pos, vel, mesh.
  pos = [[x,y], [x,y], ...]
  vel = [[s,t], [s,t], ...]
  mesh = [
    [[node,len],[node,len], ...],
    [[node,len],[node,len], ...],
  ... ]


Another Cloth
A similar implementation is shown here. It uses and object-oriented approach instead of arrays and functions. Tearable Cloth