d3实现鱼群游动前行粒子效果代码-html代码-BFW代码库

d3实现鱼群游动前行粒子效果代码

代码语言：html

所属分类：粒子

代码描述：d3实现鱼群游动前行粒子效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  height: 100vh;
  background: #333;
  display:flex;
  align-items: center;
}

svg {
  max-height:500px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 3%,
    rgba(1, 118, 142, 1) 100%
  );
}
</style>




</head>

<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.js"></script>
      <script type="module">

class Vector {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.max = null;
    }
    setLength(newLength) {
        const length = Math.sqrt(this.x * this.x + this.y * this.y);
        this.x *= newLength / length;
        this.y *= newLength / length;
    }
    add(vector) {
        this.x += vector.x;
        this.y += vector.y;
    }
    sub(vector) {
        this.x -= vector.x;
        this.y -= vector.y;
    }
    mul(val) {
        this.x *= val;
        this.y *= val;
    }
    div(val) {
        if (val != 0) {
            this.x /= val;
            this.y /= val;
        }
    }
    checkMax() {
        if (this.max) {
            const length = Math.sqrt(this.x * this.x + this.y * this.y);
            if (length > this.max) {
                this.setLength(this.max);
            }
        }
    }
    angle() {
        let angle = (Math.atan(this.y / this.x) * 180) / Math.PI;
        if (this.x < 0) {
            angle += 180;
        }
        return angle;
    }
    limit(max) {
        this.max = max;
        this.checkMax();
    }
    static add(vector1, vector2) {
        return new Vector(vector1.x + vector2.x, vector1.y + vector2.y);
    }
    static sub(vector1, vector2) {
        return new Vector(vector1.x - vector2.x, vector1.y - vector2.y);
    }
    static dist(vector1, vector2) {
        return Math.sqrt(Math.pow(vector1.x - vector2.x, 2) + Math.pow(vector1.y - vector2.y, 2));
    }
}
const randBetween = (min, max) => {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
};
class Boid {
    constructor(width, height) {
        this.width = width;
        this.height = height;
        this.position = new Vector(randBetween(0, width), randBetween(0, height));
        this.velocity = new Vector(randBetween(-100, 100), randBetween(-100, 100));
        this.velocity.setLength(randBetween(2, 4));
        this.acceleration = new Vector(0, 0);
        this.maxForce = 1;
        this.maxSpeed = 10;
        this.perceptionRadius = 100;
    }
    calcAcceletarion(boids, al, coh, sep) {
        let steering = new Vector(0, 0);
        let align = new Vector(0, 0);
        let cohesion = new Vector(0, 0);
        let separation = new Vector(0, 0);
        let perceptedBoids = 0;
        for (let other of boids) {
            let d = Vector.dist(this.position, other.position);
            if (other != this && d < this.perceptionRadius) {
                perceptedBoids++;
                align.add(other.velocity);
                let diff = Vector.sub(this.position, other.position);
                if (d > 0) {
                    diff.div(d * d);
                }
                separation.add(diff);
                cohesion.add(other.position);
            }
        }
        if (perceptedBoids > 0) {
            align.div(perceptedBoids);
            align.setLength(this.maxSpeed);
            align.sub(this.velocity);
            align.limit(this.maxForce);
            separation.div(perceptedBoids);
            separation.setLength(this.ma.........完整代码请登录后点击上方下载按钮下载查看