Simulación de tela con física Verlet

Cloth simulation · Verlet * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #1a1e2b; min-height: 100vh; display: flex; justify-content: center; align-items: center; font-family: system-ui, 'Segoe UI', Roboto, sans-serif; } .canvas-wrapper { background: #0b0d14; padding: 12px; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.6); } canvas { display: block; width: 800px; height: 600px; border-radius: 16px; background: radial-gradient(circle at 20% 20%, #2d3345, #0f111a); cursor: grab; touch-action: none; } canvas:active { cursor: grabbing; } .info { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; color: #aab3cf; font-size: 0.9rem; letter-spacing: 0.3px; padding: 0 8px; } .badge { background: #2c3142; padding: 6px 14px; border-radius: 40px; font-weight: 500; color: #d3defa; box-shadow: inset 0 1px 3px rgba(255,255,255,0.05); } .badge i { font-style: normal; color: #8f9ed4; } button { background: #2c3142; border: none; color: #d3defa; padding: 6px 16px; border-radius: 40px; font-weight: 500; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: background 0.2s; } button:hover { background: #3b425a; } ✣ drag · tear cloth ⟲ reset cloth (function() { const canvas = document.getElementById('clothCanvas'); const ctx = canvas.getContext('2d'); // ---------- simulation parameters ---------- const COLS = 28; // columns of points const ROWS = 20; // rows const SPACING = 18; // rest distance between points (px) const GRAVITY = 0.35; const DAMPING = 0.985; // velocity damping per frame const TEAR_DISTANCE = 32; // if constraint stretched beyond this, remove it const MAX_ITERATIONS = 5; // constraint solver iterations // cloth geometry const startX = (canvas.width - (COLS - 1) * SPACING) * 0.5; const startY = 40; // ---------- state ---------- let points = []; let constraints = []; // mouse interaction let mouse = { x: -1000, y: -1000, down: false, active: false }; let mouseRadius = 28; // interaction radius let tearMode = false; // when dragging, tear if constraint too stretched // ---------- point & constraint creation ---------- function buildCloth() { points = []; constraints = []; // create points (grid) for (let r = 0; r < ROWS; r++) { for (let c = 0; c < COLS; c++) { const x = startX + c * SPACING; const y = startY + r * SPACING; // pinned: top row (r === 0) and also two extra points at row 1 for stability? // classic: pin top row only const pinned = (r === 0); points.push({ x: x, y: y, prevX: x, prevY: y, pinned: pinned, // for mouse tearing we store original index index: points.length }); } } // helper to get point index const idx = (r, c) => r * COLS + c; // structural constraints (horizontal & vertical) for (let r = 0; r < ROWS; r++) { for (let c = 0; c < COLS; c++) { // right neighbor if (c < COLS - 1) { constraints.push({ p1: idx(r, c), p2: idx(r, c + 1), restLength: SPACING, active: true }); } // down neighbor if (r < ROWS - 1) { constraints.push({ p1: idx(r, c), p2: idx(r + 1, c), restLength: SPACING, active: true }); } } } // add some shear constraints (diagonals) for more realistic cloth // but keep them slightly longer (sqrt2 * spacing) const diag = SPACING * Math.SQRT2; for (let r = 0; r < ROWS - 1; r++) { for (let c = 0; c < COLS - 1; c++) { // main diagonal (top-left to bottom-right) constraints.push({ p1: idx(r, c), p2: idx(r + 1, c + 1), restLength: diag, active: true }); // anti-diagonal (top-right to bottom-left) constraints.push({ p1: idx(r, c + 1), p2: idx(r + 1, c), restLength: diag, active: true }); } } } // ---------- reset cloth ---------- function resetCloth() { buildCloth(); // clear mouse state mouse.down = false; mouse.active = false; mouse.x = -1000; mouse.y = -1000; } // ---------- verlet integration ---------- function verletStep() { for (let i = 0; i < points.length; i++) { const p = points[i]; if (p.pinned) continue; const vx = (p.x - p.prevX) * DAMPING; const vy = (p.y - p.prevY) * DAMPING; p.prevX = p.x; p.prevY = p.y; p.x += vx; p.y += vy; p.y += GRAVITY; } } // ---------- satisfy constraints (iterative) ---------- function satisfyConstraints() { for (let iter = 0; iter < MAX_ITERATIONS; iter++) { for (let i = 0; i < constraints.length; i++) { const c = constraints[i]; if (!c.active) continue; const p1 = points[c.p1]; const p2 = points[c.p2]; // if both pinned, skip (they don't move) if (p1.pinned && p2.pinned) continue; // vector between points let dx = p2.x - p1.x; let dy = p2.y - p1.y; let dist = Math.sqrt(dx * dx + dy * dy); if (dist === 0) continue; // avoid division by zero // tear check: if stretched beyond threshold, deactivate constraint if (dist > TEAR_DISTANCE) { c.active = false; continue; } const diff = (dist - c.restLength) / dist; const offsetX = dx * 0.5 * diff; const offsetY = dy * 0.5 * diff; // move points (respect pinned) if (!p1.pinned && !p2.pinned) { p1.x += offsetX; p1.y += offsetY; p2.x -= offsetX; p2.y -= offsetY; } else if (!p1.pinned) { p1.x += offsetX * 2; p1.y += offsetY * 2; } else if (!p2.pinned) { p2.x -= offsetX * 2; p2.y -= offsetY * 2; } } } } // ---------- mouse interaction (drag & tear) ---------- function applyMouseInteraction() { if (!mouse.down || !mouse.active) return; const mx = mouse.x; const my = mouse.y; for (let i = 0; i < points.length; i++) { const p = points[i]; if (p.pinned) continue; // don't drag pinned points const dx = p.x - mx; const dy = p.y - my; const distSq = dx * dx + dy * dy; if (distSq < mouseRadius * mouseRadius) { // influence: stronger near center const dist = Math.sqrt(distSq); const force = (1 - dist / mouseRadius) * 0.8; // 0..0.8 // move point away from mouse (or toward? we pull cloth) // we want to drag: move point toward mouse position // but also allow tearing: if we pull too hard, constraints break. // we'll move point toward mouse, but also mark tear if constraint stretched // we'll handle tearing in constraint solver (already checks distance) // so here just move the point toward mouse const pullX = (mx - p.x) * force * 0.5; const pullY = (my - p.y) * force * 0.5; p.x += pullX; p.y += pullY; // also update prevX/prevY to avoid excessive spring-back p.prevX += pullX * 0.4; p.prevY += pullY * 0.4; } } } // ---------- rendering ---------- function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); // draw constraints (lines) ctx.lineWidth = 1.2; ctx.strokeStyle = '#b8c4e0'; ctx.shadowColor = 'rgba(0,0,0,0.4)'; ctx.shadowBlur = 6; for (let i = 0; i < constraints.length; i++) { const c = constraints[i]; if (!c.active) continue; const p1 = points[c.p1]; const p2 = points[c.p2]; ctx.beginPath(); ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.stroke(); } // draw points (small dots) ctx.shadowBlur = 0; ctx.fillStyle = '#eef3ff'; for (let i = 0; i < points.length; i++) { const p = points[i]; ctx.beginPath(); ctx.arc(p.x, p.y, 2.2, 0, Math.PI * 2); ctx.fill(); } // draw pinned points (highlight) ctx.fillStyle = '#ffb347'; for (let i = 0; i < points.length; i++) { const p = points[i]; if (p.pinned) { ctx.beginPath(); ctx.arc(p.x, p.y, 3.5, 0, Math.PI * 2); ctx.fill(); } } // draw mouse cursor ring (interaction radius) if (mouse.active) { ctx.beginPath(); ctx.arc(mouse.x, mouse.y, mouseRadius, 0, Math.PI * 2); ctx.strokeStyle = 'rgba(255, 220, 150, 0.4)'; ctx.lineWidth = 1.5; ctx.stroke(); } } // ---------- animation loop ---------- function animate() { // physics steps verletStep(); applyMouseInteraction(); // mouse influence before constraints satisfyConstraints(); // second pass for stability (optional) // small extra constraint pass satisfyConstraints(); draw(); requestAnimationFrame(animate); } // ---------- mouse event handlers ---------- function getCanvasCoords(e) { const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; const clientX = (e.clientX - rect.left) * scaleX; const clientY = (e.clientY - rect.top) * scaleY; return { x: clientX, y: clientY }; } function onMouseDown(e) { e.preventDefault(); const coords = getCanvasCoords(e); mouse.x = coords.x; mouse.y = coords.y; mouse.down = true; mouse.active = true; canvas.style.cursor = 'grabbing'; } function onMouseMove(e) { const coords = getCanvasCoords(e); mouse.x = coords.x; mouse.y = coords.y; if (!mouse.down) { mouse.active = true; // show cursor ring even when not dragging } } function onMouseUp(e) { mouse.down = false; mouse.active = false; canvas.style.cursor = 'grab'; } function onMouseLeave() { mouse.down = false; mouse.active = false; canvas.style.cursor = 'grab'; } // touch support (basic) function onTouchStart(e) { e.preventDefault(); const touch = e.touches[0]; const coords = getCanvasCoords(touch); mouse.x = coords.x; mouse.y = coords.y; mouse.down = true; mouse.active = true; } function onTouchMove(e) { e.preventDefault(); const touch = e.touches[0]; const coords = getCanvasCoords(touch); mouse.x = coords.x; mouse.y = coords.y; } function onTouchEnd(e) { e.preventDefault(); mouse.down = false; mouse.active = false; } // ---------- initialization ---------- function init() { resetCloth(); // attach events canvas.addEventListener('mousedown', onMouseDown); canvas.addEventListener('mousemove', onMouseMove); canvas.addEventListener('mouseup', onMouseUp); canvas.addEventListener('mouseleave', onMouseLeave); // touch canvas.addEventListener('touchstart', onTouchStart, { passive: false }); canvas.addEventListener('touchmove', onTouchMove, { passive: false }); canvas.addEventListener('touchend', onTouchEnd, { passive: false }); // reset button document.getElementById('resetBtn').addEventListener('click', () => { resetCloth(); }); // start animation animate(); } init(); })();

Simulación de tela con física Verlet

Medios relacionados

Contenido del PromptGuardar

Iniciá sesión para ver el prompt completo

Uso

Referencias

Discusión