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

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

代码语言：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)
    .........完整代码请登录后点击上方下载按钮下载查看