p5实现荷塘中荷叶下鱼儿游动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：p5实现荷塘中荷叶下鱼儿游动动画效果代码，点击鼠标可产生波纹吸引鱼群。

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

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

<head>
    <meta charset="UTF-8">
    <style>
        html,body{padding:0;margin:0;width:100vw;height:100vh;overflow:hidden}.verses{position:absolute;transform:translate(-50%,-50%);top:35vh;left:50vw;text-align:center;font-size:2rem;word-break:keep-all}
    </style>
</head>

<body>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script>
    <script>
        class FlockParams {
            constructor() {
                this.maxForce = 0.08
                this.maxSpeed = 3.7
                this.perceptionRadius = 100
                this.alignAmp = 1
                this.cohesionAmp = 1
                this.separationAmp = 1
            }
        }
        
        let flockParams = new FlockParams()
        const gui = new dat.GUI()
        gui.add(flockParams, 'alignAmp', 0.5, 2)
        gui.add(flockParams, 'cohesionAmp', 0.5, 2)
        gui.add(flockParams, 'separationAmp', 0.5, 2)
        gui.add(flockParams, 'maxSpeed', 2, 6)
        gui.add(flockParams, 'maxForce', .05, 3)
        gui.add(flockParams, 'perceptionRadius', 20, 300)
        
        /*==================
        lotusLeaf
        ===================*/
        
        const shadowColor = 'rgba(0,0,0,0.05)'
        
        class lotusLeaf {
            constructor(x, y, offset, scale) {
                this.x = x
                this.y = y
                this.offset = offset
                this.scale = scale
                this.color = color(71, 184, 151)
            }
        
            drawShape(vertices, offset, color) {
                fill(color)
                beginShape()
                    vertices.map(v => vertex(v.x + offset, v.y + offset))
                endShape()
            }
        
            show() {
                push()
                    translate(this.x, this.y)
                    noiseDetail(1, .8)
                    let vertices = []
        
                    for (let i = 0; i < TWO_PI; i += radians(1)) {
                        
                        let x = this.offset * cos(i) + this.offset
                        let y = this.offset * sin(i) + this.offset
                        
                        let r = 180 + map(noise(x, y), 0, 1, -this.scale, this.scale)
                        
                        let x1 = r * cos(i)
                        let y1 = r * sin(i)
                        
                        vertices.push({x: x1, y: y1})
                    }
        
                    noStroke()
                    this.drawShape(vertices, 50, shadowColor)
                    this.drawShape(vertices, 0, this.color)
        
                    vertices.map((v, index) => {
                        if ((index + 1) % 40 === 0) {
                            strokeWeight(6)
                            stroke(23,111,88,40)
                            line(v.x * .1, v.y * .19, v.x * .9, v.y * .86)
                        }
                    })
                pop()
            }
        
        }
        
        /*==================
        Ripple
        ===================*/
        class Ripple {
            constructor(x, y) {
                this.position = createVector(x, y)
                this.size = random(50, 100)
                this.lifespan = 255
                this.color = color(255, 255, 255)
                this.sizeStep = random(2, 3)
                this.lifeStep = random(2, 10)
            }
        
            drawShape(x, y, offset, size, color) {
                stroke(color)
                strokeWeight(1)
                noFill()
                circle(x + offset, y + offset, size)
            }
        
            show() {
                this.color.setAlpha(this.lifespan)
        
                this.drawShape(this.position.x, this.position.y, 0, this.size, this.color)
                this.drawShape(this.position.x, this.position.y, 50, this.size, color(shadowColor))
            }
        
            update() {
                this.size += this.sizeStep
                this.lifespan -= this.lifeStep
            }
        }
        
        /*==================
        Koi
        ===================*/
        
        const koiColors = ['#E95D0C', '#EEA237', '#E02D28']
        
        class Koi {
            constructor(x, y, koiColor) {
                this.color = color(koiColor)
                this.offsetX = random(-100, 100)
                this.offsetY = random(-100, 100)
                this.position = createVector(x + this.offsetX, y + this.offsetY)
                this.velocity = p5.Vector.random2D()
                this.velocity.setMag(random(2, 10))
                this.acceleration = createVector()
                this.maxForce = flockParams.maxForce
                this.maxSpeed = flockParams.maxSpeed
                this.baseSize = int(random(15, 20))
                this.bodyLength = this.baseSize * 2
                this.body = new Array(this.bodyLength).fill({...this.position})
            }
        
            calculateDesiredSteeringForce (kois, factorType) {
                let steering = createVector()
                let total = 0
                for (let other of kois) {
                    let d = dist(
                        this.position.x,
                        this.position.y,
                        other.position.x,
                        other.position.y
                    )
                    if (d < flockParams.perceptionRadius && other != this) {
                        switch (factorType) {
                            case 'align':
                                steering.add(other.velocity)
                                break;
                            case 'cohesion':
                                steering.add(other.position)
                                break;
                            case 'separation':
                                let diff = p5.Vector.sub(this.position, other.position)
                                diff.div(d)
                                steering.add(diff)
                                break;
           .........完整代码请登录后点击上方下载按钮下载查看