Verlet-Physik-basierte Stoffsimulation

Cloth simulation · Verlet body { margin: 0; min-height: 100vh; background: #1a1e2e; display: flex; align-items: center; justify-content: center; font-family: system-ui, 'Segoe UI', Roboto, sans-serif; } .canvas-wrapper { background: #0b0d17; 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: #171b2a; cursor: grab; touch-action: none; } canvas:active { cursor: grabbing; } .info { display: flex; justify-content: space-between; margin-top: 12px; color: #b9c6e8; font-size: 0.9rem; letter-spacing: 0.3px; padding: 0 6px; } .badge { background: #2d3550; padding: 4px 12px; border-radius: 40px; font-weight: 500; } 🖱️ drag to tear ⚡ verlet stable (function() { const canvas = document.getElementById('clothCanvas'); const ctx = canvas.getContext('2d'); // ----- simulation parameters ----- const GRAVITY = 0.35; // per frame const DAMPING = 0.985; // velocity retention (1 = no damping) const TEAR_DISTANCE = 32; // max constraint length before tear const SPACING = 12; // rest distance between points const COLS = 60; // grid columns (60 * 12 = 720 px) const ROWS = 40; // grid rows (40 * 12 = 480 px) const PIN_TOP = true; // pin top row // ----- global state ----- let points = []; let constraints = []; // mouse interaction let mouse = { x: -1000, y: -1000, down: false, moved: false }; let mouseRadius = 40; // influence radius for dragging // ----- init cloth grid ----- function initCloth() { points = []; constraints = []; const startX = (canvas.width - (COLS - 1) * SPACING) / 2; const startY = 80; // leave some top margin // create points for (let row = 0; row < ROWS; row++) { for (let col = 0; col < COLS; col++) { const x = startX + col * SPACING; const y = startY + row * SPACING; const pinned = (PIN_TOP && row === 0); points.push({ x: x, y: y, prevX: x, prevY: y, pinX: pinned ? x : null, pinY: pinned ? y : null, row: row, col: col }); } } // helper to get point index function idx(row, col) { if (row = ROWS || col = COLS) return -1; return row * COLS + col; } // structural constraints (horizontal & vertical) for (let row = 0; row < ROWS; row++) { for (let col = 0; col < COLS; col++) { const i = idx(row, col); // right neighbor if (col + 1 < COLS) { const j = idx(row, col + 1); constraints.push({ p1: i, p2: j, rest: SPACING }); } // down neighbor if (row + 1 < ROWS) { const j = idx(row + 1, col); constraints.push({ p1: i, p2: j, rest: SPACING }); } } } // optional shear constraints (diagonals) for more realistic cloth // but we keep it light for performance and stability for (let row = 0; row < ROWS - 1; row++) { for (let col = 0; col < COLS - 1; col++) { const i = idx(row, col); const diag1 = idx(row + 1, col + 1); const diag2 = idx(row + 1, col); const diag3 = idx(row, col + 1); // add two diagonals (shear) constraints.push({ p1: i, p2: diag1, rest: SPACING * Math.SQRT2 }); constraints.push({ p1: diag2, p2: diag3, rest: SPACING * Math.SQRT2 }); } } } // ----- physics step (verlet + constraints) ----- function simulate() { // apply gravity and integrate for (let p of points) { if (p.pinX !== null) { // pinned: keep fixed position p.x = p.pinX; p.y = p.pinY; p.prevX = p.pinX; p.prevY = p.pinY; 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 + GRAVITY; } // solve constraints multiple iterations for stability const ITERATIONS = 5; for (let iter = 0; iter < ITERATIONS; iter++) { for (let c of constraints) { const p1 = points[c.p1]; const p2 = points[c.p2]; // skip if either point is pinned? no – we still solve but pinned points are immovable // we compute delta and apply based on inverse mass (pinned = infinite mass) const dx = p2.x - p1.x; const dy = p2.y - p1.y; const dist = Math.sqrt(dx * dx + dy * dy); if (dist === 0) continue; const diff = (dist - c.rest) / dist; // move each point by half the correction, but pinned points don't move const p1Mass = (p1.pinX !== null) ? 0 : 1; const p2Mass = (p2.pinX !== null) ? 0 : 1; const totalMass = p1Mass + p2Mass; if (totalMass === 0) continue; const offsetX = dx * diff * 0.5; const offsetY = dy * diff * 0.5; if (p1Mass > 0) { p1.x += offsetX; p1.y += offsetY; } if (p2Mass > 0) { p2.x -= offsetX; p2.y -= offsetY; } } } // tear constraints that exceed threshold (after solving) constraints = constraints.filter(c => { const p1 = points[c.p1]; const p2 = points[c.p2]; const dx = p2.x - p1.x; const dy = p2.y - p1.y; const distSq = dx * dx + dy * dy; return distSq <= TEAR_DISTANCE * TEAR_DISTANCE; }); } // ----- mouse interaction (drag / tear) ----- function handleMouseMove(e) { const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; const mouseX = (e.clientX - rect.left) * scaleX; const mouseY = (e.clientY - rect.top) * scaleY; mouse.x = mouseX; mouse.y = mouseY; if (mouse.down) { // drag points within radius const radiusSq = mouseRadius * mouseRadius; for (let p of points) { if (p.pinX !== null) continue; // don't drag pinned points const dx = p.x - mouse.x; const dy = p.y - mouse.y; const distSq = dx * dx + dy * dy; if (distSq < radiusSq) { // influence falloff: stronger near center const dist = Math.sqrt(distSq); const influence = 1 - (dist / mouseRadius); // move point toward mouse (with falloff) p.x += (mouse.x - p.x) * influence * 0.6; p.y += (mouse.y - p.y) * influence * 0.6; // also update prev position to reduce jitter p.prevX += (mouse.x - p.x) * influence * 0.2; p.prevY += (mouse.y - p.y) * influence * 0.2; } } mouse.moved = true; } } function handleMouseDown(e) { e.preventDefault(); mouse.down = true; mouse.moved = false; handleMouseMove(e); // immediate effect } function handleMouseUp(e) { mouse.down = false; } function handleMouseLeave() { mouse.down = false; mouse.x = -1000; mouse.y = -1000; } // ----- touch support (basic) ----- function handleTouchStart(e) { e.preventDefault(); const touch = e.touches[0]; const mouseEvent = new MouseEvent('mousedown', { clientX: touch.clientX, clientY: touch.clientY }); canvas.dispatchEvent(mouseEvent); } function handleTouchMove(e) { e.preventDefault(); const touch = e.touches[0]; const mouseEvent = new MouseEvent('mousemove', { clientX: touch.clientX, clientY: touch.clientY }); canvas.dispatchEvent(mouseEvent); } function handleTouchEnd(e) { e.preventDefault(); const mouseEvent = new MouseEvent('mouseup', {}); canvas.dispatchEvent(mouseEvent); } // ----- rendering ----- function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); // draw constraints (lines) ctx.lineWidth = 1.2; ctx.strokeStyle = '#b7c3e6'; ctx.beginPath(); for (let c of constraints) { const p1 = points[c.p1]; const p2 = points[c.p2]; ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); } ctx.stroke(); // draw points (small dots) – helps visual feedback ctx.fillStyle = '#d9e2ff'; for (let p of points) { ctx.beginPath(); ctx.arc(p.x, p.y, 1.8, 0, Math.PI * 2); ctx.fill(); } // draw pinned points (top row) as small squares ctx.fillStyle = '#ffb347'; for (let p of points) { if (p.pinX !== null) { ctx.fillRect(p.x - 3, p.y - 3, 6, 6); } } // draw mouse influence radius (subtle) if (mouse.down) { ctx.beginPath(); ctx.arc(mouse.x, mouse.y, mouseRadius, 0, Math.PI * 2); ctx.strokeStyle = 'rgba(255, 220, 150, 0.3)'; ctx.lineWidth = 2; ctx.stroke(); } } // ----- animation loop ----- function animate() { simulate(); draw(); requestAnimationFrame(animate); } // ----- attach events and start ----- function setup() { initCloth(); canvas.addEventListener('mousedown', handleMouseDown); canvas.addEventListener('mousemove', handleMouseMove); canvas.addEventListener('mouseup', handleMouseUp); canvas.addEventListener('mouseleave', handleMouseLeave); // touch events canvas.addEventListener('touchstart', handleTouchStart, { passive: false }); canvas.addEventListener('touchmove', handleTouchMove, { passive: false }); canvas.addEventListener('touchend', handleTouchEnd, { passive: false }); canvas.addEventListener('touchcancel', handleTouchEnd, { passive: false }); // start loop animate(); } // run setup(); })();

Verlet-Physik-basierte Stoffsimulation

Zugehörige Medien

Prompt-InhaltSpeichern

Melde dich an, um den vollständigen Prompt zu sehen

Verwendung

Referenzen

Diskussion