当使用 p5.js 实例模式（instance mode）为多个 canvas 分配不同 id 时，若混淆了全局 p5 函数调用与自定义变量/函数的作用域，会导致脚本报错、页面白屏——核心在于严格区分 `f.` 前缀的使用边界。
在 p5.js 的实例模式中，所有原生 p5 API（如 createCanvas、background、mouseX、color、sqrt 等）必须通过参数 f 显式调用（即 f.background()），而你自行声明的变量、函数和类（如 particles2、handleFooterInteractions、Particle2）属于闭包内部作用域，不应加 f. 前缀。原始代码中大量错误地在 particles2[i]、f.particles2.length、f.handleFooterInteractions() 等位置滥用 f.，导致 JavaScript 尝试从 f 对象上读取未定义属性，最终引发运行时错误（如 Cannot read property 'length' of undefined），进而使整个页面崩溃白屏。
此外，还需注意以下关键点：
✅ 正确的作用域划分原则：
- ✅ f.xxx：仅用于调用 p5 内置方法/属性（f.width, f.mouseX, f.ellipse()）
- ✅ particles2, viscosity2, handleFooterInteractions, Particle2：全部是闭包内声明的自有变量/函数，直接使用，绝不加 f.
- ❌ f.particles2、f.handleFooterInteractions：错误！particles2 并非挂载在 f 上，而是局部数组；该写法会返回 undefined，后续 .length 或调用将抛出异常。
✅ HTML 容器需提前存在：
确保目标容器（如
<script>
document.addEventListener('DOMContentLoaded', () => {
var myp5 = new p5(s1, 'footer');
});
</script>
✅ 完整修复后的工作示例（精简版）：
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
var s1 = function(f) {
let particles2 = []; // 使用 let/const 更安全
let viscosity2;
let c2;
f.setup = function() {
f.createCanvas(f.windowWidth, f.windowHeight);
f.frameRate(60);
f.noStroke();
c2 = f.color(13, 104, 167);
viscosity2 = 0.8;
for (let i = 0; i ）
new p5(s1, 'footer');
? 总结提醒：
- 白屏 ≠ 语法错误，很可能是运行时 ReferenceError 或 TypeError 导致脚本中断；务必打开浏览器开发者工具（F12 → Console）查看具体报错信息；
- 多实例共存时，每个 sN = function(f){...} 必须相互隔离，避免变量名冲突；
- 若需共享数据（如全局配置），应显式通过参数传入或使用模块化封装，切勿依赖隐式全局变量；
- p5.js 官方文档明确指出：“In instance mode, only the p5 methods and properties are available on the f object — your own variables live in the closure.”（p5.js Instance Mode Docs）
遵循上述规则，即可稳定嵌入多个 p5.js 实例，彻底规避“页面变白”问题。
