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

代码语言:html

所属分类:动画

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

代码标签: 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(fl.........完整代码请登录后点击上方下载按钮下载查看

网友评论0