类鸟群Boid模拟动画效果-html代码-BFW代码库

类鸟群Boid模拟动画效果

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html, body {
  margin: 0;
  padding: 0;
}

canvas {
  width: 100vw !important;
  height: 52vw !important;
}
</style>

</head>
<body translate="no">

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/p5.js"></script>
<script>
var logo;
var vectors = [];
var logoW=703;
var logoH=221;

const flock = [];

class Boid {
  constructor() {
    this.position = createVector(random(width), random(height));
    this.velocity = p5.Vector.random2D();
    this.velocity.setMag(random(2, 4));
    this.accelleration = createVector();
    this.maxForce = 1;
    this.maxSpeed = 4;
    this.radius = 16;
    this.color = color("hsl("+floor(random(360))+",50%,50%)");
    this.size = random(.5, 1.75);
  }
  
  edges() {
    if(this.position.x > width+this.radius) {
      this.position.x = 0-this.radius;
    } else if(this.position.x < 0-this.radius) {
      this.position.x = width+this.radius;
    }
    if(this.position.y > height+this.radius) {
      this.position.y = 0-this.radius;
    } else if(this.position.y < 0-this.radius) {
      this.position.y = height+this.radius;
    }
  }
  
  align (boids) {
    let perceptionRadius = 50;
    let steering = createVector();
    let count = 0;
    
    // TRY WITH REDUCE
    for ( let other of boids ) {
      let d = dist(
        this.position.x, 
        this.position.y, 
        other.position.x, 
        other.position.y
      );
      
      if ( d < perceptionRadius && other != this ) {
        count++;
        steering.add(other.velocity); 
      }
    }
    
    if ( count > 0 ) {
      steering.div(count);
      steering.setMag(this.maxSpeed)
      steering.sub(this.velocity);
      steering.limit(this.maxForce);
    }
    return steering;
  }
  
  cohesion (boids) {
    let perceptionRadius = 50;
    let steering = createVector();
    let count = 0;
    
    // TRY WITH REDUCE
    for ( let other of boids ) {
      let d = dist(
        this.position.x, 
        this.position.y, 
        other.position.x, 
        other.position.y
      );
      
      if ( d < perceptionRadius && other != this ) {
        count++;
        steering.add(other.position); 
      }
    }
    
    if ( count > 0 ) {
      steering.div(count);
      steering.sub(this.position)
      steering.setMag(this.maxSpeed)
      steering.sub(this.velocity);
      steering.limit(this.maxForce);
    }
    return steering;
  }
  
  separation (boids) {
    let perceptionRadius = 50;
    let steering = createVector();
    let count = 0;
    
    // TRY WITH REDUCE
    for ( let other of boids ) {
      let d = dist(
        this.position.x, 
        this.position.y, 
        other.position.x, 
        other.position.y
      );
      
      if ( d < perceptionRadius && other != this ) {
        let diff = p5.Vector.sub(this.position, other.position);
        diff.div(d);
        steering.add(diff); 
        count++;
      }
    }
    
    if ( count > 0 ) {
      steering.div(count);
      steering.setMag(this.maxSpeed)
      steering.sub(this.velocity);
      steering.limit(this.maxForce);
    }
    return steering;
  }
  
  flock(boids) {
    let alignment = this.align(boids);
    let cohesion = this.cohesion(boids);
    let separation = this.separation(boids);
    
    separation.mult(1.1);
    cohesion.mult(1);
    alignment.mult(.8);
    
    this.accelleration.add(alignm.........完整代码请登录后点击上方下载按钮下载查看