// Verlet Physics Engin - MIT Licensed // Controls: // LeftClick -> Drag points // LeftClick + Shift -> Pin/Unpin points // TODO: // 1. Implement DeltaTime // 2. Point collision without needing edges (cloth collision) let world = null; let draggedPoint = null; draw = function() { if (world === null) { world = new World(width, height); createCubes(world); createSpringWheel(world, 300, 100, 50, 12); createCloth(world, 50, 50, 10, 10, 15); } background(220); world.step((deltaTime / 1000)); world.draw(); // Handle point dragging if (draggedPoint) { draggedPoint.x = mouseX; draggedPoint.y = mouseY; draggedPoint.oldX = draggedPoint.x; draggedPoint.oldY = draggedPoint.y; } let fps = frameRate(); textSize(22); fill('yellow'); text(fps | 0, 5, 25); } mousePressed = function() { if (keyIsDown(SHIFT)) { var point = world.findNearestPoint(mouseX, mouseY); if (point) point.pin = !point.pin; } else { draggedPoint = world.findNearestPoint(mouseX, mouseY); } } mouseReleased = function() { draggedPoint = null; } class World { constructor(width, height) { this.width = width; this.height = height; this.gravity = 0.2; this.drag = 0.99; this.groundFriction = 0.01; this.bodies = []; this.constraints = []; this.iterations = 6; this.friction = 0.25; //this.collisionBody = null; //this.penetrationDepth = null; } step(dt) { for (let body of this.bodies) { for (let point of body.points) { let vx = (point.x - point.oldX) * this.drag; let vy = (point.y - point.oldY) * this.drag; point.oldX = point.x; point.oldY = point.y; point.x += vx; point.y += vy; point.y += this.gravity; } body.updateBounds() } for (let i = 0; i < this.iterations; i++) { for (let constraint of this.constraints) { constraint.solve(1.0 / this.iterations); } // Handle point-polygon collisions for (let i = 0; i < this.bodies.length; i++) { for (let j = i + 1; j < this.bodies.length; j++) { if (this.bodies[i] === this.bodies[j]) continue; if (this.bodies[i].edges.length === 0) continue; if (this.bodies[j].edges.length === 0) continue; if (this.checkCollide(this.bodies[i], this.bodies[j])) { this.resolveCollision(); } } } let frictiondt = dt * (1.0 / this.iterations); for (let body of this.bodies) { for (let point of body.points) { // Screen limits if (point.x > this.width) point.x = this.width; else if (point.x < 0) point.x = 0; if (point.y > this.height) { point.y = this.height; point.x -= (point.x - point.oldX) * this.groundFriction * frictiondt; } else if (point.y < 0) { point.y = 0; } } } for (let body of this.bodies) { for (let point of body.points) { if (point.pin) { point.x = point.oldX; point.y = point.oldY; continue; } } } } } checkCollide(b0, b1) { // AABB overlap check if (!(0 > Math.abs(b1.center.x - b0.center.x) - (b1.halfExtent.x + b0.halfExtent.x) && 0 > Math.abs(b1.center.y - b0.center.y) - (b1.halfExtent.y + b0.halfExtent.y))) { return false; } let minDistance = Infinity; let n0 = b0.edges.length; let n1 = b1.edges.length; // Iterate through all edges of both bodies for (let i = 0; i < n0 + n1; i++) { let edge = i < n0 ? b0.edges[i] : b1.edges[i - n0]; let normal = this.normalizeVector(this.perpendicularVector(edge.p2.x - edge.p1.x, edge.p2.y - edge.p1.y)); // Project both bodies onto the normal let [min0, max0] = this.projectBody(b0, normal); let [min1, max1] = this.projectBody(b1, normal); // Calculate the distance between the two intervals let dist = min0 < min1 ? min1 - max0 : min0 - max1; // If the intervals don't overlap, return false (no collision) if (dist > 0) return false; if (Math.abs(dist) < minDistance) { minDistance = Math.abs(dist); this.collisionNormal = normal; this.collisionEdge = edge; } } this.penetrationDepth = minDistance; // Ensure collision edge is in b1 and collision vertex is in b0 if (this.collisionEdge.parent !== b1) { [b0, b1] = [b1, b0]; } // Make sure the collision normal is pointing at b1 let center = this.subtractVectors(b0.center, b1.center); if (this.dotProduct(center, this.collisionNormal) < 0) { this.collisionNormal = this.negateVector(this.collisionNormal); } // Find the collision vertex in b0 let smallestDist = Infinity; for (let vertex of b0.points) { let line = this.subtractVectors(vertex, b1.center); let dist = this.dotProduct(this.collisionNormal, line); if (dist < smallestDist) { smallestDist = dist; this.collisionVertex = vertex; } } this.collisionBody = b0; return true; } resolveCollision() { let edge = this.collisionEdge; let vertex = this.collisionVertex; // Cache vertex positions let p0 = edge.p1; let p1 = edge.p2; let vp = vertex; // Response vector let response = this.multiplyVector(this.collisionNormal, this.penetrationDepth); // Calculate where on the edge the collision vertex lies let t = Math.abs(p0.x - p1.x) > Math.abs(p0.y - p1.y) ? (vp.x - response.x - p0.x) / (p1.x - p0.x) : (vp.y - response.y - p0.y) / (p1.y - p0.y); let lambda = 1 / (t * t + (1 - t) * (1 - t)); // Mass coefficients (assuming equal mass for all points) let m0 = 1 / this.collisionBody.points.length; let m1 = 1 / edge.parent.points.length; let tm = m0 + m1; m0 /= tm; m1 /= tm; // Apply collision response p0.x -= response.x * (1 - t) * lambda * m0; p0.y -= response.y * (1 - t) * lambda * m0; p1.x -= response.x * t * lambda * m0; p1.y -= response.y * t * lambda * m0; vp.x += response.x * m1; vp.y += response.y * m1; // Collision friction let relativeVelocity = { x: vp.x - vp.oldX - (p0.x + p1.x - p0.oldX - p1.oldX) * 0.5, y: vp.y - vp.oldY - (p0.y + p1.y - p0.oldY - p1.oldY) * 0.5 }; let tangent = this.perpendicularVector(this.collisionNormal.x, this.collisionNormal.y); let relTv = this.dotProduct(relativeVelocity, tangent); let relativeTangentVelocity = this.multiplyVector(tangent, relTv); // Apply tangent friction vp.oldX += relativeTangentVelocity.x * this.friction * m1; vp.oldY += relativeTangentVelocity.y * this.friction * m1; p0.oldX -= relativeTangentVelocity.x * (1 - t) * this.friction * lambda * m0; p0.oldY -= relativeTangentVelocity.y * (1 - t) * this.friction * lambda * m0; p1.oldX -= relativeTangentVelocity.x * t * this.friction * lambda * m0; p1.oldY -= relativeTangentVelocity.y * t * this.friction * lambda * m0; } // Helper methods for vector operations normalizeVector(v) { let length = Math.sqrt(v.x * v.x + v.y * v.y); return { x: v.x / length, y: v.y / length }; } perpendicularVector(x, y) { return createVector(-y, x); } projectBody(body, axis) { let min = Infinity; let max = -Infinity; for (let point of body.points) { let proj = this.dotProduct(point, axis); min = Math.min(min, proj); max = Math.max(max, proj); } return [min, max]; } dotProduct(v1, v2) { return v1.x * v2.x + v1.y * v2.y; } subtractVectors(v1, v2) { return { x: v1.x - v2.x, y: v1.y - v2.y }; } multiplyVector(v, scalar) { return { x: v.x * scalar, y: v.y * scalar }; } negateVector(v) { return { x: -v.x, y: -v.y }; } findNearestPoint(x, y) { let minDist = Infinity; let nearest = null; for (let body of this.bodies) { for (let point of body.points) { let d = dist(x, y, point.x, point.y); if (d < minDist && d < 20) { // 20 is the selection radius minDist = d; nearest = point; } } } return nearest; } draw() { for (let body of this.bodies) { body.draw(); } for (let constraint of this.constraints) { constraint.draw(); } } } class Body { constructor() { this.points = []; this.edges = []; this.center = { x: 0, y: 0 } this.halfExtent = { x: 0, y: 0 } } addPoint(x, y, pin = false) { this.points.push({ x, y, oldX: x, oldY: y, pin: pin }); return this.points.length - 1; } addEdge(i1, i2) { this.edges.push({ p1: this.points[i1], p2: this.points[i2], parent: this }); } updateBounds() { let minX = Infinity, minY = Infinity; let maxX = -Infinity, maxY = -Infinity; for (let point of this.points) { minX = Math.min(minX, point.x); minY = Math.min(minY, point.y); maxX = Math.max(maxX, point.x); maxY = Math.max(maxY, point.y); } this.center = { x: (minX + maxX) / 2, y: (minY + maxY) / 2 }; this.halfExtent = { x: (maxX - minX) / 2, y: (maxY - minY) / 2 }; } toPoly() { if (this.edges.length === 0) { return null; // Body has no edges, can't create a polygon } // Collect unique vertices from edges const vertices = new Set(); for (let edge of this.edges) { vertices.add(edge.p1); vertices.add(edge.p2); } // Convert Set to Array and extract x, y coordinates const vertexArray = Array.from(vertices).map(p => ({ x: p.x, y: p.y })); // Sort vertices to ensure they're in counterclockwise order const center = vertexArray.reduce((acc, v) => ({ x: acc.x + v.x, y: acc.y + v.y }), { x: 0, y: 0 }); center.x /= vertexArray.length; center.y /= vertexArray.length; vertexArray.sort((a, b) => Math.atan2(a.y - center.y, a.x - center.x) - Math.atan2(b.y - center.y, b.x - center.x) ); return new ConvexPolygon(vertexArray); } draw() { for (let edge of this.edges) { stroke(0, 255, 255); line(edge.p1.x, edge.p1.y, edge.p2.x, edge.p2.y); } for (let point of this.points) { stroke(0, 0, 0); if (point.pin) stroke(255, 0, 0); circle(point.x, point.y, 4); } } } class ConvexPolygon { constructor(vertices) { this.vertices = vertices; } isPointInside(point) { let windingNumber = 0; const n = this.vertices.length; for (let i = 0; i < n; i++) { const v1 = this.vertices[i]; const v2 = this.vertices[(i + 1) % n]; if (v1.y <= point.y) { if (v2.y > point.y && this.isLeft(v1, v2, point) > 0) { windingNumber++; } } else { if (v2.y <= point.y && this.isLeft(v1, v2, point) < 0) { windingNumber--; } } } return windingNumber !== 0; } isLeft(v1, v2, point) { return (v2.x - v1.x) * (point.y - v1.y) - (point.x - v1.x) * (v2.y - v1.y); } getClosestEdge(point) { let closestDist = Infinity; let closestEdge = null; for (let i = 0; i < this.vertices.length; i++) { const v1 = this.vertices[i]; const v2 = this.vertices[(i + 1) % this.vertices.length]; const dist = this.distanceToSegment(point, v1, v2); if (dist < closestDist) { closestDist = dist; closestEdge = { v1, v2 }; } } return closestEdge; } distanceToSegment(p, v1, v2) { const l2 = (v1.x - v2.x) ** 2 + (v1.y - v2.y) ** 2; if (l2 === 0) return this.distance(p, v1); let t = ((p.x - v1.x) * (v2.x - v1.x) + (p.y - v1.y) * (v2.y - v1.y)) / l2; t = Math.max(0, Math.min(1, t)); return this.distance(p, { x: v1.x + t * (v2.x - v1.x), y: v1.y + t * (v2.y - v1.y) }); } distance(p1, p2) { return Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2); } draw() { stroke(255, 0, 0); fill(255, 0, 0, 50); const n = this.vertices.length; for (let i = 0; i < n; i++) { const v1 = this.vertices[i]; const v2 = this.vertices[(i + 1) % n]; line(v1.x, v1.y, v2.x, v2.y); } } } class DistanceConstraint { constructor(p1, p2, length) { this.p1 = p1; this.p2 = p2; this.length = length || this.getDistance(); } getDistance() { let dx = this.p1.x - this.p2.x; let dy = this.p1.y - this.p2.y; return Math.sqrt(dx * dx + dy * dy); } solve() { let dx = this.p2.x - this.p1.x; let dy = this.p2.y - this.p1.y; let distance = Math.sqrt(dx * dx + dy * dy); let difference = this.length - distance; let percent = difference / distance / 2; let offsetX = dx * percent; let offsetY = dy * percent; this.p1.x -= offsetX; this.p1.y -= offsetY; this.p2.x += offsetX; this.p2.y += offsetY; } draw() { stroke(0); line(this.p1.x, this.p1.y, this.p2.x, this.p2.y); } } class SpringConstraint { constructor(p1, p2, length, stiffness) { this.p1 = p1; this.p2 = p2; this.length = length || this.getDistance(); this.stiffness = stiffness || 0.2; } getDistance() { let dx = this.p1.x - this.p2.x; let dy = this.p1.y - this.p2.y; return Math.sqrt(dx * dx + dy * dy); } solve(dt) { let dx = this.p2.x - this.p1.x; let dy = this.p2.y - this.p1.y; let distance = Math.sqrt(dx * dx + dy * dy); let force = this.stiffness * (distance - this.length) * dt; let fx = (dx / distance) * force; let fy = (dy / distance) * force; this.p1.x += fx; this.p1.y += fy; this.p2.x -= fx; this.p2.y -= fy; } draw() { stroke(0, 255, 0); line(this.p1.x, this.p1.y, this.p2.x, this.p2.y); } } function createCubes(world) { let sizes = [20, 30, 40, 50]; for (let i = 0; i < 10; i++) { let size = random(sizes); let x = random(world.width - size); let y = random(world.height, (world.height / 2)); let body = new Body(); let p1 = body.addPoint(x, y); let p2 = body.addPoint(x + size, y); let p3 = body.addPoint(x + size, y + size); let p4 = body.addPoint(x, y + size); body.addEdge(p1, p2); body.addEdge(p2, p3); body.addEdge(p3, p4); body.addEdge(p4, p1); world.bodies.push(body); world.constraints.push(new DistanceConstraint(body.points[p1], body.points[p2])); world.constraints.push(new DistanceConstraint(body.points[p2], body.points[p3])); world.constraints.push(new DistanceConstraint(body.points[p3], body.points[p4])); world.constraints.push(new DistanceConstraint(body.points[p4], body.points[p1])); world.constraints.push(new DistanceConstraint(body.points[p1], body.points[p3])); world.constraints.push(new DistanceConstraint(body.points[p2], body.points[p4])); } } function createSpringWheel(world, x, y, radius, segments) { let body = new Body(); let center = body.addPoint(x, y); let points = []; for (let i = 0; i < segments; i++) { let angle = (i / segments) * Math.PI * 2; let px = x + Math.cos(angle) * radius; let py = y + Math.sin(angle) * radius; points.push(body.addPoint(px, py)); //, i === 0)); } for (let i = 0; i < segments; i++) { body.addEdge(points[i], points[(i + 1) % segments]); world.constraints.push(new DistanceConstraint(body.points[center], body.points[points[i]])); world.constraints.push(new DistanceConstraint(body.points[points[i]], body.points[points[(i + 1) % segments]])); } world.bodies.push(body); } function createCloth(world, x, y, rows, cols, spacing) { let body = new Body(); let points = []; for (let i = 0; i < rows; i++) { points.push([]); for (let j = 0; j < cols; j++) { if (i === 0 && (j === 0 || j === cols - 1)) { points[i].push(body.addPoint(x + j * spacing, y + i * spacing, true)); } else { points[i].push(body.addPoint(x + j * spacing, y + i * spacing)); } } } for (let i = 0; i < rows; i++) { for (let j = 0; j < cols; j++) { if (j < cols - 1) world.constraints.push(new SpringConstraint(body.points[points[i][j]], body.points[points[i][j + 1]], spacing, 0.5)); if (i < rows - 1) world.constraints.push(new SpringConstraint(body.points[points[i][j]], body.points[points[i + 1][j]], spacing, 0.5)); } } world.bodies.push(body); }

Codecasts

Made by awesome people

Mods 1

Recently Published