PBD Cloth

// Position-Based Dynamics cloth: 30 x 20 grid of particles.
// Verlet integration (px,py = current; ox,oy = previous) gives implicit
// velocity. Each frame we apply gravity, then relax distance constraints
// for N iterations: structural (4-neighborhood), shear (diagonals), and
// bend (skip-one). Pinned particles (top row) ignore the relaxation.
// Drag with left mouse to push nearest free particle; right-click pops
// the nearest pin so the cloth can fall further.
const COLS = 30;
const ROWS = 20;
const N = COLS * ROWS;
const ITERS = 8;
const GRAV = 520;
const DAMP = 0.992;
const GRAB_R = 36;
const UNPIN_R = 60;
const STIFF = 1.0;
const STIFF_SHEAR = 0.6;
const STIFF_BEND = 0.25;

let px, py, ox, oy, pinned, rest;
let restS, restSh, restB; // rest lengths
let W = 0, H = 0;
let ox0 = 0, oy0 = 0, gridW = 0, gridH = 0;

function idx(c, r) { return r * COLS + c; }

function layout(width, height) {
  // Fit grid into upper portion of canvas; leave headroom below for sag.
  const margin = Math.min(width, height) * 0.08;
  const maxW = width - margin * 2;
  const maxH = height * 0.55;
  const sX = maxW / (COLS - 1);
  const sY = maxH / (ROWS - 1);
  const s = Math.min(sX, sY);
  gridW = s * (COLS - 1);
  gridH = s * (ROWS - 1);
  ox0 = (width - gridW) / 2;
  oy0 = margin;
  return s;
}

function reset(width, height) {
  const s = layout(width, height);
  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS; c++) {
      const i = idx(c, r);
      px[i] = ox0 + c * s;
      py[i] = oy0 + r * s;
      ox[i] = px[i];
      oy[i] = py[i];
      pinned[i] = r === 0 ? 1 : 0;
    }
  }
  restS = s;
  restSh = s * Math.SQRT2;
  restB = s * 2;
}

function init({ width, height }) {
  W = width; H = height;
  px = new Float32Array(N);
  py = new Float32Array(N);
  ox = new Float32Array(N);
  oy = new Float32Array(N);
  pinned = new Uint8Array(N);
  reset(width, height);
}

function relaxPair(a, b, rest, stiff) {
  const dx = px[b] - px[a];
  const dy = py[b] - py[a];
  const d = Math.hypot(dx, dy);
  if (d < 1e-6) return;
  const diff = ((d - rest) / d) * stiff;
  const wa = pinned[a] ? 0 : 1;
  const wb = pinned[b] ? 0 : 1;
  const sum = wa + wb;
  if (sum === 0) return;
  const fa = wa / sum, fb = wb / sum;
  px[a] += dx * diff * fa;
  py[a] += dy * diff * fa;
  px[b] -= dx * diff * fb;
  py[b] -= dy * diff * fb;
}

function relaxAll() {
  // Structural: right + down neighbor.
  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS; c++) {
      const i = idx(c, r);
      if (c < COLS - 1) relaxPair(i, idx(c + 1, r), restS, STIFF);
      if (r < ROWS - 1) relaxPair(i, idx(c, r + 1), restS, STIFF);
    }
  }
  // Shear: diagonals.
  for (let r = 0; r < ROWS - 1; r++) {
    for (let c = 0; c < COLS - 1; c++) {
      relaxPair(idx(c, r), idx(c + 1, r + 1), restSh, STIFF_SHEAR);
      relaxPair(idx(c + 1, r), idx(c, r + 1), restSh, STIFF_SHEAR);
    }
  }
  // Bend: skip-one along rows and columns.
  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS - 2; c++) {
      relaxPair(idx(c, r), idx(c + 2, r), restB, STIFF_BEND);
    }
  }
  for (let c = 0; c < COLS; c++) {
    for (let r = 0; r < ROWS - 2; r++) {
      relaxPair(idx(c, r), idx(c, r + 2), restB, STIFF_BEND);
    }
  }
}

function nearestParticle(x, y, requirePinned) {
  let best = -1, bd2 = Infinity;
  for (let i = 0; i < N; i++) {
    if (requirePinned && !pinned[i]) continue;
    const dx = px[i] - x, dy = py[i] - y;
    const d2 = dx * dx + dy * dy;
    if (d2 < bd2) { bd2 = d2; best = i; }
  }
  return { i: best, d2: bd2 };
}

function tick({ ctx, dt, width, height, input }) {
  if (width !== W || height !== H) { W = width; H = height; reset(width, height); }
  const h = Math.min(dt, 1 / 30);

  // Right-click: unpin the closest pinned particle within UNPIN_R.
  for (const c of input.consumeClicks()) {
    if (c.button === 2) {
      const { i, d2 } = nearestParticle(c.x, c.y, true);
      if (i >= 0 && d2 < UNPIN_R * UNPIN_R) pinned[i] = 0;
    }
  }

  // Verlet integration with gravity + damping.
  for (let i = 0; i < N; i++) {
    if (pinned[i]) { ox[i] = px[i]; oy[i] = py[i]; continue; }
    const vx = (px[i] - ox[i]) * DAMP;
    const vy = (py[i] - oy[i]) * DAMP;
    ox[i] = px[i];
    oy[i] = py[i];
    px[i] += vx;
    py[i] += vy + GRAV * h * h;
  }

  // Drag: pull nearest free particle toward the cursor.
  let grabbed = -1;
  if (input.mouseDown) {
    const { i, d2 } = nearestParticle(input.mouseX, input.mouseY, false);
    if (i >= 0 && !pinned[i] && d2 < GRAB_R * GRAB_R) {
      grabbed = i;
      px[i] = input.mouseX;
      py[i] = input.mouseY;
    }
  }

  // Constraint relaxation.
  for (let it = 0; it < ITERS; it++) {
    relaxAll();
    if (grabbed >= 0) { px[grabbed] = input.mouseX; py[grabbed] = input.mouseY; }
  }

  // Bound to canvas so it never escapes.
  for (let i = 0; i < N; i++) {
    if (pinned[i]) continue;
    if (px[i] < 1) px[i] = 1;
    else if (px[i] > W - 1) px[i] = W - 1;
    if (py[i] > H - 1) { py[i] = H - 1; oy[i] = py[i]; }
  }

  // --- Render ---
  ctx.fillStyle = "#06080f";
  ctx.fillRect(0, 0, W, H);

  // Faint filled quads (one path, single fill — cheaper).
  ctx.fillStyle = "rgba(120,170,255,0.06)";
  ctx.beginPath();
  for (let r = 0; r < ROWS - 1; r++) {
    for (let c = 0; c < COLS - 1; c++) {
      const a = idx(c, r), b = idx(c + 1, r);
      const d = idx(c + 1, r + 1), e = idx(c, r + 1);
      ctx.moveTo(px[a], py[a]);
      ctx.lineTo(px[b], py[b]);
      ctx.lineTo(px[d], py[d]);
      ctx.lineTo(px[e], py[e]);
      ctx.closePath();
    }
  }
  ctx.fill();

  // Wireframe: structural edges only, hue by stretch.
  ctx.lineWidth = 1;
  const drawEdge = (i, j) => {
    const dx = px[j] - px[i], dy = py[j] - py[i];
    const str = Math.min(1.4, Math.hypot(dx, dy) / restS);
    const hue = 210 - (str - 1) * 220;
    ctx.strokeStyle = `hsla(${hue},75%,${55 + (str - 1) * 40}%,0.85)`;
    ctx.beginPath();
    ctx.moveTo(px[i], py[i]);
    ctx.lineTo(px[j], py[j]);
    ctx.stroke();
  };
  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS; c++) {
      const i = idx(c, r);
      if (c < COLS - 1) drawEdge(i, idx(c + 1, r));
      if (r < ROWS - 1) drawEdge(i, idx(c, r + 1));
    }
  }

  // Pin markers.
  ctx.fillStyle = "#ffcf66";
  for (let c = 0; c < COLS; c++) {
    for (let r = 0; r < ROWS; r++) {
      const i = idx(c, r);
      if (!pinned[i]) continue;
      ctx.beginPath();
      ctx.arc(px[i], py[i], 2.6, 0, Math.PI * 2);
      ctx.fill();
    }
  }

  // Grab indicator.
  if (input.mouseDown) {
    ctx.strokeStyle = grabbed >= 0 ? "rgba(120,255,170,0.7)" : "rgba(255,255,255,0.2)";
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.arc(input.mouseX, input.mouseY, GRAB_R, 0, Math.PI * 2);
    ctx.stroke();
  }

  // HUD.
  let totalPins = 0;
  for (let i = 0; i < N; i++) totalPins += pinned[i];
  ctx.fillStyle = "rgba(220,230,245,0.55)";
  ctx.font = "12px monospace";
  ctx.fillText(
    `cloth ${COLS}x${ROWS}  pins=${totalPins}  drag · right-click to unpin`,
    10, H - 8
  );
}