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