p5实现鼠标跟随游动的鱼儿代码-html代码-BFW代码库

p5实现鼠标跟随游动的鱼儿代码

代码语言：html

所属分类：动画

代码描述：p5实现鼠标跟随游动的鱼儿代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>逼真的 p5.js 游鱼模拟</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #0b1026;
        }
        canvas {
            display: block;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
</head>
<body>

<script>
    let fish;
    let ripples = [];

    function setup() {
        createCanvas(windowWidth, windowHeight);
        // 初始化一条锦鲤
        fish = new RealisticFish(width / 2, height / 2);
    }

    function draw() {
        // 1. 绘制动态水体背景
        drawWaterBackground();

        // 2. 处理点击波纹
        drawRipples();

        // 3. 鱼的逻辑与绘制
        let target = createVector(mouseX, mouseY);
        fish.run(target);
    }

    function mousePressed() {
        ripples.push(new Ripple(mouseX, mouseY));
    }

    function windowResized() {
        resizeCanvas(windowWidth, windowHeight);
    }

    // --- 背景绘制 ---
    function drawWaterBackground() {
        // 深邃渐变背景
        noStroke();
        for (let y = 0; y < height; y += 40) {
      .........完整代码请登录后点击上方下载按钮下载查看