p5实现一个粒子旋涡旋转动画效果代码
代码语言:html
所属分类:粒子
代码描述:p5实现一个粒子旋涡旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: linear-gradient(to bottom, #ccc, #999); height: 100vh; } .canvas { border-radius: 4px; box-shadow: 0 16px 20px -8px rgba(0, 0, 0, 0.9); height: 500px; left: 50%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); width: 500px; } .info { bottom: 0; background: rgba(0, 0, 0, 0.65); border-top-right-radius: 4px; color: white; font-family: monospace; font-size: 16px; font-style: italic; left: 0; padding: 4px 8px; position: fixed; } </style> </head> <body> <p class="info">sketch::vortex </p> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script> <script> const canvasSize = 500 const center = .5 * canvasSize const particleCount = 1000 const hueBase = 10 const hueRange = 40 const fadeInOut = (t, m) => { let hm = 0.5 * m return abs((t + hm) % m - hm) / hm } const angle = (x1, y1, x2, y2) => atan2(y2 - y1, x2 - x1) let buffer let particles let dOffset let dOffset2 class AttributeArray { constructor(count, attrs) { this.count = count this.attrs = attrs this.spread = attrs.length this.values = new Float32Array(count * this.spread) } get length() { return this.values.length } set(a, i, normalize = false) { normalize && (i *= this.spread) this.values.set(a, i) } get(i, normalize = false) { normalize && (i *= this.spread) return this.values.slice(i, i + this.spread) } forEach(cb) { let i = 0 let j = 0 for (; i < this.length; i += this.spread, j++) { cb(this.get(i), j, this) } } map(cb) { let i = 0 let j = 0 for (; i < this.length; i += this.spread, j++) { this.set(cb(this.get(i), j, this), i) } } reverseMap(cb) { let i = this.length - this.spread let j = this.count - 1 for (; i >= 0; i -= this.spread, j--) { this.set(cb(this.get(i), j, this), i) } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0