布シミュレーションとVerlet物理

布物理 · Verlet 布料 * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #111; min-height: 100vh; display: flex; justify-content: center; align-items: center; font-family: system-ui, sans-serif; } .container { background: #1e1e1e; border-radius: 20px; padding: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.6); } canvas { display: block; border-radius: 12px; box-shadow: 0 0 0 1px #3a3a3a; cursor: grab; touch-action: none; } .info { color: #aaa; text-align: center; margin-top: 12px; font-size: 14px; letter-spacing: 0.5px; user-select: none; } .info span { background: #2d2d2d; padding: 4px 12px; border-radius: 30px; display: inline-block; } 🖱️ 点击并拖动撕裂布料 · 稳定Verlet (function() { const canvas = document.getElementById('clothCanvas'); const ctx = canvas.getContext('2d'); // ---------- 物理参数 ---------- const COLS = 40; // 列数 (x方向) const ROWS = 30; // 行数 (y方向) const SPACING = 14; // 点间距 (px) const GRAVITY = 0.35; // 重力 const DAMPING = 0.985; // 速度衰减 (稳定关键) const MAX_ITERATIONS = 5; // 约束迭代次数 (稳定+撕裂平衡) const TEAR_DIST = 32; // 撕裂阈值 (px) // 固定点: 顶部两角 (可调整) const PIN_START = { x: 0, y: 0 }; // 左上角 const PIN_END = { x: COLS - 1, y: 0 }; // 右上角 // 点数组 let points = []; // 约束数组 (每对连接) let constraints = []; // 鼠标交互 let mouse = { x: -1000, y: -1000, down: false, active: false }; let mouseInfluence = 18; // 影响半径 let mouseStrength = 0.9; // 拖拽强度 // 初始化布料网格 function initCloth() { points = []; constraints = []; // 创建点 for (let row = 0; row < ROWS; row++) { for (let col = 0; col < COLS; col++) { const x = (canvas.width - (COLS - 1) * SPACING) / 2 + col * SPACING; const y = 80 + row * SPACING; // 顶部留空间 points.push({ x: x, y: y, prevX: x, prevY: y, pinned: (row === 0 && (col === PIN_START.x || col === PIN_END.x)) }); } } // 创建约束 (水平 + 垂直) function addConstraint(i1, i2) { const p1 = points[i1]; const p2 = points[i2]; const dx = p2.x - p1.x; const dy = p2.y - p1.y; const dist = Math.sqrt(dx * dx + dy * dy); constraints.push({ p1: i1, p2: i2, restLength: dist, active: true }); } // 水平约束 for (let row = 0; row < ROWS; row++) { for (let col = 0; col < COLS - 1; col++) { const idx = row * COLS + col; addConstraint(idx, idx + 1); } } // 垂直约束 for (let row = 0; row < ROWS - 1; row++) { for (let col = 0; col < COLS; col++) { const idx = row * COLS + col; addConstraint(idx, idx + COLS); } } } // 重置布料 (重新初始化) function resetCloth() { initCloth(); } // 物理更新 (Verlet + 约束) function updatePhysics() { // 1. Verlet 积分 (重力 + 阻尼) 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; } // 2. 鼠标交互 (拖拽) if (mouse.down && mouse.active) { const radiusSq = mouseInfluence * mouseInfluence; for (let i = 0; i < points.length; i++) { const p = points[i]; if (p.pinned) continue; const dx = p.x - mouse.x; const dy = p.y - mouse.y; const distSq = dx * dx + dy * dy; if (distSq < radiusSq) { // 向鼠标位置移动 (强度) const dist = Math.sqrt(distSq); const force = (1 - dist / mouseInfluence) * mouseStrength; const moveX = (mouse.x - p.x) * force; const moveY = (mouse.y - p.y) * force; p.x += moveX; p.y += moveY; // 同时更新prev，避免过度反弹 p.prevX += moveX * 0.5; p.prevY += moveY * 0.5; } } } // 3. 约束求解 (多次迭代) for (let iter = 0; iter < MAX_ITERATIONS; iter++) { for (let c of constraints) { if (!c.active) continue; const p1 = points[c.p1]; const p2 = points[c.p2]; // 如果两个点都被固定，跳过 if (p1.pinned && p2.pinned) continue; const dx = p2.x - p1.x; const dy = p2.y - p1.y; const dist = Math.sqrt(dx * dx + dy * dy); // 撕裂检测: 如果拉伸超过阈值，移除约束 if (dist > TEAR_DIST) { c.active = false; continue; } if (dist < 0.0001) continue; // 避免除以零 const diff = (dist - c.restLength) / dist; // 质量权重: 固定点视为无限质量 const w1 = p1.pinned ? 0 : 1; const w2 = p2.pinned ? 0 : 1; const totalWeight = w1 + w2; if (totalWeight === 0) continue; const moveX = dx * diff * 0.5; const moveY = dy * diff * 0.5; if (!p1.pinned) { p1.x += moveX * (w1 / totalWeight) * 2; p1.y += moveY * (w1 / totalWeight) * 2; } if (!p2.pinned) { p2.x -= moveX * (w2 / totalWeight) * 2; p2.y -= moveY * (w2 / totalWeight) * 2; } } } // 边界碰撞 (防止飞出画面) const margin = 5; for (let p of points) { if (p.pinned) continue; if (p.x canvas.width - margin) { p.x = canvas.width - margin; p.prevX = p.x; } if (p.y canvas.height - margin) { p.y = canvas.height - margin; p.prevY = p.y; } } } // 绘制 function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制布料 (约束线) ctx.lineWidth = 1.2; ctx.strokeStyle = '#c8b89a'; ctx.beginPath(); for (let c of constraints) { if (!c.active) continue; const p1 = points[c.p1]; const p2 = points[c.p2]; ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); } ctx.stroke(); // 绘制点 (半透明) ctx.fillStyle = '#e0d6c8'; for (let p of points) { ctx.beginPath(); ctx.arc(p.x, p.y, 2.2, 0, Math.PI * 2); ctx.fill(); } // 绘制固定点 (金色) ctx.fillStyle = '#f5c542'; for (let p of points) { if (p.pinned) { ctx.beginPath(); ctx.arc(p.x, p.y, 4, 0, Math.PI * 2); ctx.fill(); } } // 鼠标指示器 (轻量) if (mouse.down && mouse.active) { ctx.strokeStyle = 'rgba(255,255,255,0.25)'; ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(mouse.x, mouse.y, mouseInfluence, 0, Math.PI * 2); ctx.stroke(); } } // 动画循环 function animate() { updatePhysics(); draw(); requestAnimationFrame(animate); } // ---------- 鼠标事件 ---------- function getCanvasPos(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 pos = getCanvasPos(e); mouse.x = pos.x; mouse.y = pos.y; mouse.down = true; mouse.active = true; canvas.style.cursor = 'grabbing'; } function onMouseMove(e) { const pos = getCanvasPos(e); mouse.x = pos.x; mouse.y = pos.y; if (!mouse.down) { // 悬停时也更新位置，但不拖拽 mouse.active = true; } } 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'; } // 触摸支持 (移动端) function onTouchStart(e) { e.preventDefault(); const touch = e.touches[0]; const mouseEvent = new MouseEvent('mousedown', { clientX: touch.clientX, clientY: touch.clientY }); canvas.dispatchEvent(mouseEvent); } function onTouchMove(e) { e.preventDefault(); const touch = e.touches[0]; const mouseEvent = new MouseEvent('mousemove', { clientX: touch.clientX, clientY: touch.clientY }); canvas.dispatchEvent(mouseEvent); } function onTouchEnd(e) { e.preventDefault(); const mouseEvent = new MouseEvent('mouseup', {}); canvas.dispatchEvent(mouseEvent); } // 初始化 initCloth(); // 事件绑定 canvas.addEventListener('mousedown', onMouseDown); canvas.addEventListener('mousemove', onMouseMove); canvas.addEventListener('mouseup', onMouseUp); canvas.addEventListener('mouseleave', onMouseLeave); canvas.addEventListener('touchstart', onTouchStart, { passive: false }); canvas.addEventListener('touchmove', onTouchMove, { passive: false }); canvas.addEventListener('touchend', onTouchEnd, { passive: false }); // 防止右键菜单 canvas.addEventListener('contextmenu', (e) => e.preventDefault()); // 启动动画 animate(); // 可选: 点击空白区域重置布料 (双击) canvas.addEventListener('dblclick', () => { resetCloth(); }); // 窗口尺寸自适应 (保持画布固定) // 但为了演示，固定尺寸800x600 // 额外: 键盘R重置 window.addEventListener('keydown', (e) => { if (e.key === 'r' || e.key === 'R') { resetCloth(); } }); // 显示提示 console.log('布料模拟已启动 、 拖动撕裂, 双击/R重置'); })();

布シミュレーションとVerlet物理

関連メディア

プロンプト内容保存

ログインして完全なプロンプトを表示

使い方

参考資料

ノート