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() { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0