本文详解在单页中嵌入多个 p5.js 实例时，因作用域混淆导致页面空白的常见错误，并提供标准化的 iife 封装方案、变量/函数作用域规范及 html 配合要点。
当使用 p5.js 的实例模式（Instance Mode）在单页中运行多个 sketch（如分别渲染页眉、页脚动画），最易踩坑的并非 HTML 结构，而是 JavaScript 作用域管理不当——尤其是混淆了 p5 全局对象方法与用户自定义变量/函数的调用方式。你的代码中大量误加 f. 前缀（如 f.particles2[i].move()），同时又遗漏关键处（如 mouseX 应为 f.mouseX），直接触发运行时错误（如 ReferenceError: particles2 is not defined），最终导致 p5 编辑器或浏览器页面“变白”（即脚本崩溃、渲染中断）。
✅ 正确的作用域划分原则
- 所有 p5 内置 API（如 createCanvas, background, mouseX, random, sqrt 等）必须通过 f. 调用；
- 所有你声明的变量（如 particles2, viscosity2, c2）、函数（如 handleFooterInteractions）、类（如 Particle2）均属于当前闭包作用域，禁止加 f. 前缀；
- 类内部访问 p5 方法仍需 f.（如 f.fill(), f.ellipse()），但访问自身属性用 this. 或直接引用（如 this.xPos）；
- new p5(sketch, 'target-id') 中的 'target-id' 必须是 DOM 中已存在的元素 ID，且该元素需在 script 执行前存在（建议 script 放在
