Verlet 算法模拟织物绳子旋转交互重力感应动画效果代码
代码语言:html
所属分类:动画
代码描述:Verlet 算法模拟织物绳子旋转交互重力感应动画效果代码
代码标签: Verlet 算法 模拟 织物 绳子 旋转 重力 感应 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body, html { margin: 0; } canvas { display: block; background-color: black; } </style> </head> <body> <canvas id="canvas"></canvas> <script> let settings = { gravity: 0.2, friction: 0.001, rigidness: 20, tearable: true }; class World { constructor() { this.canvas = document.getElementById("canvas"); this.ctx = canvas.getContext("2d"); this.cellSize = 2; this.resize(); // Low bounciness this.bounce = 0.1; this.setupEventListers(); this.prevMousePos = { x: 0, y: 0 }; } setupPointsInGrid() { this.startingPoints = []; this.sticks = []; this.points = []; let startX = (this.w - this.width * this.cellSize) / 2; let startY = 0; let i = 0; for (let y = 0; y < 100; y++) { for (let x = 0; x < 100; x++) { this.points.push({ x: startX + x * this.cellSize, y: startY + y * this.cellSize, oldx: startX + x * this.cellSize, oldy: startY + y * this.cellSize }); if (x > 0) { this.sticks.push({ p0: this.points[i - 1], p1: this.points[i], length: this.distance( this.points[i - 1], this.points[i]) }); } i++; } let index = this.points.length - 1; let p = this.points[index]; p.pinned = true; this.startingPoints.push(p); } } puff() { this.points.forEach(p => p.oldx -= 1); } setupEventListers() { this.canvas.addEventListener( "mousedown", event => this.onMouseDown(event)); this.onMouseMove = this.onMouseMove.bind(this); this.canvas.addEventListener("mousemove", this.onMouseMove); this.onMouseUp = this.onMouseUp.bind(this); this.canvas.addEventListener("mouseleave", () => this.onMouseLeave()); this.canvas.addEventListener("mouseup", this.onMouseUp); window.addEventListener("resize", () => this.resize()); } resize() { this.h = this.canvas.height = window.innerHeight; this.w = this.canvas.width = window.innerWidth; this.ctx.lineWidth = 2; this.ctx.strokeStyle = "white"; this.ctx.lineCap = "round"; this.width = Math.round(this.w * 0.8 / this.cellSize); this.height = Math.round(this.h * 0.33 / this.cellSize); this.setupPointsInGrid(); this.puff(); this.isDragging = false; this.dragPoints = []; } onMouseLeave() { this.onMouseUp(); } onMouseDown(event) { let x = event.clientX; let y = event.clientY; let p0 = { x: x, y: y }; let closePoints = this.getPointsCloseTo(p0, 30); if (closePoints.length > 0) { this.dragPoints = closePoints; this.dragPoints.forEach(p => { p.x = x; p.y = y; p.oldx = x; p.oldy = y; p.pinned = true; }); this.isDragging = true; } } onMouseMove(event) { let x = event.clientX; let y = event.clientY; if (this.isDragging) { this.dragPoints.forEach(p => { p.oldx = p.x; p..........完整代码请登录后点击上方下载按钮下载查看
网友评论0