p5实现鱼儿成群结队粒子聚集动画效果代码
代码语言:html
所属分类:粒子
代码描述:p5实现鱼儿成群结队粒子聚集动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { margin: 0; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.0.10.2.js"></script> <script> /** * Work-in-progress flocks simulation */ let flocks = []; let alignSlider, cohesionSlider, separationSlider; class Particle { constructor() { this.position = createVector(random(width), random(height)) this.velocity = p5.Vector.random2D() this.velocity.setMag(random(2, 4)); this.acceleration = createVector() this.maxForce = 0.3 this.maxSpeed = 5 } edges() { if (this.position.x < 0) { let reflect = createVector(this.maxSpeed, this.velocity.y) reflect.sub(this.velocity) reflect.limit(this.maxForce) this.acceleration.add(reflect) } else if (this.position.x > width) { let reflect = createVector(-this.maxSpeed, this.velocity.y) reflect.sub(this.velocity) reflect.limit(this.maxForce) this.acceleration.add(reflect) } if (this.position.y < 0) { let reflect = createVector(this.velocity.x, this.maxSpeed) reflect.sub(this.velocity) reflect.limit(this.maxForce) this.acceleration.add(reflect) } else if (this.position.y > height) { let reflect = createVector(this.velocity.x, -this.maxSpeed) reflect.sub(this.velocity) reflect.limit(this.maxForce) this.acceleration.add(reflect) } } align(flocks) { let senseRadius = 10 let steering = createVector() let total = 0; for (let other of flocks) { if (other != this) { let d = this.position.dist(other.position) if (d <= senseRadius) { steering.add(other.velocity) total++ } } } if (total > 0) { steering.div(total) steering.setMag(this.maxSpeed) steering.sub(this.velocity) steering.limit(this.maxForce) } return steering } cohesion(flocks) { let senseRadius = 50 let steering = createVector() let total = 0 for (let other of flocks) { if (other != this) { let d = this.position.dist(other.position) if (d <= senseRadius) { steering.add(other.position) .........完整代码请登录后点击上方下载按钮下载查看
网友评论0