用 p5.js 打造游动小鱼的数字水族馆：点击即可增加动态画作

关于本文
本文采用生成式 AI 的自动化生成流程创建。通过虚拟数据和浏览器操作，学习 p5.js 的用途、原理及失败时的观察要点。不涉及访问实际服务或个人信息。

验证状态： 在 2026-10-30 之前的现有审核中，已将官方资料与保存的 Daily Code 固定源码进行比对，并记录了 Node.js 语法检查的结果。浏览器的实际操作、渲染以及 CDN 响应尚未经验证。屏幕说明系基于代码的预期值，与实际测量有所区别。

为什么要尝试这项技术

像地图或漫画那样“打开画面就有东西在动”的教材，其魅力在于代码和结果之间的距离非常短。p5.js 是一个以绘制图形为入口，帮助人们学习变量、坐标、循环和事件的库。无需使用复杂的游戏引擎，仅凭 HTML 和简短的 JavaScript 就能让屏幕上的小鱼游动起来。小鱼并非照片，而是由椭圆和三角形组合而成，初始数量为 2 条。通过按钮增减小鱼，可以直观地理解数组与画面的关系。

在制作动态示例时，不能仅停留在“画面动了”这一表面事实，还需要区分“哪个输入改变了哪个变量、哪段处理更新了绘制”。在本教程中，我们会将这种变化明示在画面上。在实际应用到服务中时，请另外设计认证和保存的处理。

首先尝试：在线演示与预期结果

• Daily Code 教程的源代码与 README（固定提交）

• GitHub Pages 在线演示（实际浏览器运行未验证）

打开在线演示后，预计会在深蓝色背景中出现两条鱼。请对比点击添加按钮的次数以及屏幕下方显示的鱼的数量。接着，点击清空按钮后，将只剩下背景。此时显示“0条鱼”这一点非常重要。你可以借此区分是仅仅看不到了，还是管理数组确实被清空了。Canvas 元素虽然是图像，但像鱼的数量这样的状态以文本形式输出，对无障碍访问（Accessibility）也很有利。

操作前确认事项：无法打开公开演示的情况

公开演示属于公开且未经验证运行状态的内容。如果无法打开，请从 GitHub 的 Raw 视图分别获取固定提交的HTML 主体和JavaScript 主体，并将它们分别以index.html和app.js的名称保存到同一个新建文件夹中。由于包含 README 的web/文件夹中没有用于执行的 HTML，因此仅靠 README 是无法运行的。

1. 在一台可使用 Python 3 的电脑上，打开存放这两个文件的文件夹。在 Windows 中，如果在文件夹的地址栏中输入powershell，就可以在该文件夹中打开 PowerShell。

2. 如果是Windows则运行py -3 -m http.server 8000 --bind 127.0.0.1如果是Linux/macOS则运行python3 -m http.server 8000 --bind 127.0.0.1。如果没有Python，请使用其他本地HTTP服务器。不需要管理员权限。

3. 在同一台PC的浏览器中打开http://127.0.0.1:8000/，并检查开发者工具的Console和Network。初始字符在进行到READY: JavaScriptを読み込み中、draw()时RUNNING: 魚 2匹会被设计为。仅凭RUNNING并不能证明canvas实际绘制成功。请目视确认蓝色背景以及两条鱼的显示和移动。

4. 魚を追加按一下按钮变成3条，空にする按一下则设计为变成0条。上限为30条。如果数量没有变化，请检查按钮的id（add / reset）以及Console的错误。结束时请在启动服务器的终端中按Ctrl+C。

file://由于直接在p5@1.11.13中显示存在环境差异，因此推荐通过HTTP分发。因为HTML会从第三方CDN加载，所以需要互联网连接和组织的通信许可。虽然没有将鱼的输入值发送到外部服务器的处理，但获取CDN的通信本身会发生

机制的总体图

flowchart LR
    A["入力やクリック"] --> B["イベントを受ける"]
    B --> C["p5.js のAPI"]
    C --> D["状態と描画を更新"]
    D --> E["見た目と文字で確認"]

此图是用于学习的概念图，并未表示浏览器内部的实现或网络通信的细节。无论是什么库，追踪“操作会到达哪个变量”这一点都是相通的。

它是如何运作的：解读API

setup 原则上只在最初准备时执行一次，而 draw 则会不断重复绘制。代表鱼的对象具有 x、y、v 这类位置和速度的值。在 draw 中让 x 增加或减少 v，并在下一帧将其绘制到另一个位置，看起来就像是在“游泳”。使用 translate 和 scale 可以改变整个图形的显示位置和方向，而无需单独计算鱼的各个部件。如果不使用 push 和 pop 来保存和恢复变换状态，坐标变换会影响到下一条鱼，导致其出现在意料之外的位置。

如何阅读最小代码

function setup() { createCanvas(640, 350); }
function draw() { background(19, 62, 98); ellipse(80, 80, 53, 25); }

以上是提取了 API 要点的片段。它并不是可以复制并独立运行的完整文件。用于运行的 HTML 和全套实现请在 Daily Code 侧的 README／演示文件中确认。追踪哪个函数选中了 HTML 元素、哪一行更新了数值，并使用已知的虚拟值进行测试。

仅更改一个条件进行对比

实际的app.js开头部分有const fish=[{x:50,y:80,v:1},{x:220,y:160,v:-1.5}];。请首先将第一条v:1仅修改为v:2，然后重新加载浏览器，对比第一条鱼的移动速度是否变快了。鱼的大小和第二条鱼的速度保持不变。由于实际代码是draw()逐个f.x+=f.v进行和累加的，因此这是“每帧的移动量”，并不能保证在设备的帧率发生变化时每秒速度保持一致。

在原本的代码中，已经包含了通过v<0对鱼进行scale(-1,1)左右翻转的处理，以及通过push() / pop()将变换限定在每条鱼内部的处理。无需额外编写翻转处理代码。对比完成后，请将其恢复为v:1并重新加载。

比较的步骤是记录初始值，只更改一个地方，并检查结果是否出现在预期的部分。如果一次更改多个输入，就会搞不清楚是什么产生了影响。请连同恢复到更改前的操作一起进行验证。

失败时应检查哪里

如果开始在同一个画面中绘制数千条鱼，性能就会下降。示例中会为鱼的数量设置上限。当浏览器标签页处于后台时，渲染可能会受到限制，因此不能直接用于严格的实时模拟器。如果要更改屏幕尺寸，请将画布尺寸与鱼的折返边界联动。由于p5.js有较大的API变更，本教材使用的版本固定在1.x系，以后更新到2.x系时请确认兼容性。

浏览器内的错误与公共Web服务器的故障是不同的。前者通过开发者工具中的错误内容进行调查，后者通过HTTP响应和资源的分发条件进行调查。不要将未知的失败表述为成功，这会提高技术笔记的可信度。

在业务与学习中的应用

它可以发展为展示、学习教材、活动现场的动态导览、随数据做出反应的插图等。如果更偏向实务，也可以将点击添加替换为运营事件。不过，将实际的运营数据放到公开浏览器上可能会导致信息泄露。请先仅用虚拟数据敲定界面和状态的设计。

引入前需要确定的事项

面向读者公开时，需要确定显示的数据来源、谁可以修改、留在屏幕上的信息种类，以及更新库时的确认事项。本次演示中既没有登录也没有服务器保存。因此，在添加运营功能之前，建议首先区分“按预期显示的最小部分”与“需要实际业务可靠性、权限及备份的部分”。由于第三方CDN涉及外部通信，因此必须事先确认企业网络是否允许。

与其他方式比较

库是在需要时才选择的工具。请结合想达到的目标和学习成本进行比较。对于小规模页面，不以“引入库”为目的会更容易维护。

GitHub示例

• Daily-Code-Samples：p5.js 教材（固定提交）

• 在线演示（未经验证在实际浏览器中的运行情况）

博客正文用于介绍背景和设计思路，而每日代码（Daily Code）则提供用于运行和修改的代码，两者的分工十分明确。其中不包含用于向外部服务发布或保存数据的 API。

官方信息与第一手资料

• p5.js 官方文档

• API 与辅助资料

• MDN：JavaScript

资料核对范围：于 2026-10-30 重新核对了 p5.js 官方的 setup、draw、push 以及固定提交的实现。未核对 CDN 的实际响应和实际浏览器的渲染情况。

验证范围的补充说明

可参考每日代码的固定提交以及现有的 Node.js 语法检查结果。但未确认实际浏览器的画面显示、库 CDN 的响应以及在所有设备上的运行情况。实际运行效果请读者在自己的环境中利用控制台（Console）和网络（Network）自行确认。