canvas实现可交互粒子雨动画效果代码
代码语言:html
所属分类:粒子
代码描述:canvas实现可交互粒子雨动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { margin: 0; } canvas { display: block; overflow: hidden; cursor: pointer; touch-action: none; } </style> </head> <body > <canvas id="canvas"></canvas> <script> /* Johan Karlsson https://github.com/DonKarlssonSan/vectory MIT License, see Details View */ "use strict"; class Vector { constructor(x, y) { this.x = x; this.y = y; } add(v) { return new Vector( this.x + v.x, this.y + v.y); } addTo(v) { this.x += v.x; this.y += v.y; } sub(v) { return new Vector( this.x - v.x, this.y - v.y); } subFrom(v) { this.x -= v.x; this.y -= v.y; } mult(n) { return new Vector(this.x * n, this.y * n); } multTo(n) { this.x *= n; this.y *= n; return this; } div(n) { return new Vector(this.x / n, this.y / n); } divTo(n) { this.x /= n; this.y /= n; } setAngle(angle) { var length = this.getLength(); this.x = Math.cos(angle) * length; this.y = Math.sin(angle) * length; } setLength(length) { var angle = this.getAngle(); this.x = Math.cos(angle) * length; this.y = Math.sin(angle) * length; } getAngle() { return Math.atan2(this.y, this.x); } getLength() { return Math.hypot(this.x, this.y); } getLengthSq() { return this.x * this.x + this.y * this.y; } distanceTo(v) { return this.sub(v).getLength(); } distanceToSq(v) { return this.sub(v).getLengthSq(); } manhattanDistanceTo(v) { return Math.abs(v.x - this.x) + Math.abs(v.y - this.y); } copy() { return new Vector(this.x, this.y); } rotate(angle) { return new Vector(this.x * Math.cos(angle) - this.y * Math.sin(angle), this.x * Math.sin(angle) + this.y * Math.cos(angle)); } rotateTo(angle) { let x = this.x * Math.cos(angle) - this.y * Math.sin(angle); let y = this.x * Math.sin(angle) + this.y * Math.cos(angle); this.x = x; this.y = y; return this; } rotateAround(v, angle) { let x = (this.x - v.x) * Math.cos(angle) - (v.y - this.y) * Math.sin(angle) + v.x; let y = (this.x - v.x) * Math.sin(angle) + (v.y - this.y) * Math.cos(angle) + v.y; return new Vector(x, y); } rotateMeAround(v, angle) { let x = (this.x - v.x) * Math.cos(angle) - (v.y - this.y) * Math.sin(angle) + v.x; let y = (this.x - v.x) * Math.sin(angle) + (v.y - this.y) * Math.cos(angle) + v.y; this.x = x; this.y = y; return this; } equals(v) { return this.x == v.x && this.y == v.y; }} </script> <script > /* Johan Karlsson (DonKarlssonSan) 2022 */ class Particle { constructor(x, y) { this.pos = new Vector(x, y); this.prevPos = new Vector(x, y); this.vel = new Vector(Math.random() - 0.5, Math.random() - 0.5); this.acc = new Vector(0, 0); } move(acc, delta) { this.prevPos.x = this.pos.x; this.prevPos.y = this.pos.y; if (acc) { acc.multTo(delta * 0.07); if (pointerPos.x !== undefined && pointerPos.y !== undefined) { const diff = pointerPos.sub(this.pos); const dist = diff.getLength(); if (dist < w * 0.05) { acc.addTo(diff.rotate(Math.PI)); } } this.acc.addTo(acc); } this.vel.addTo(this.acc); this.pos.addTo(this.vel); if (this.vel.getLe.........完整代码请登录后点击上方下载按钮下载查看
网友评论0