当使用 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 容器需提前存在：
确保目标容器（如

✅ 完整修复后的工作示例（精简版）：

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 < 900; i++) {
      particles2.push(new Particle2(
        f.random(f.width / 8, f.width / 4),
        f.random(f.height - f.height / 18, f.height + f.height / 15),
        c2
      ));
    }
  };

  f.draw = function() {
    f.background(0);
    handleFooterInteractions(); // ← 无 f.

    for (let i = 0; i < particles2.length; i++) { // ← 无 f.
      particles2[i].move();
      particles2[i].display();
    }
  };

  // 自定义类：不加 f.，直接定义
  Particle2 = function(x, y, c) {
    this.xPos = x;
    this.yPos = y;
    this.xVel = 0;
    this.yVel = 0;
    this.mass = f.random(0.005, 0.02);
    this.colour = c;

    this.move = function() {
      this.xPos += this.xVel;
      this.yPos += this.yVel;
    };

    this.display = function() {
      f.fill(this.colour); // ← 仅此处用 f.（p5 API）
      f.ellipse(this.xPos, this.yPos, this.mass * 1000, this.mass * 1000);
    };
  };

  // 自定义函数：不加 f.
  handleFooterInteractions = function() {
    for (let i = 0; i < particles2.length; i++) {
      let accX = 0, accY = 0;

      // 粒子间作用力（使用 particles2[i]，非 f.particles2[i]）
      for (let j = 0; j < particles2.length; j++) {
        if (i !== j) {
          const dx = particles2[j].xPos - particles2[i].xPos;
          const dy = particles2[j].yPos - particles2[i].yPos;
          const dis = f.sqrt(dx * dx + dy * dy) || 1;
          const force = (dis - 600) * particles2[j].mass / dis;
          accX += force * dx;
          accY += force * dy;
        }
      }

      // 鼠标交互（使用 f.mouseX/f.mouseY，因为是 p5 属性）
      const mx = f.mouseX - particles2[i].xPos;
      const my = f.mouseY - particles2[i].yPos;
      const mdis = f.sqrt(mx * mx + my * my) || 40;
      const mforce = (mdis - 50) / (5 * mdis);
      accX += mforce * mx;
      accY += mforce * my;

      particles2[i].xVel = particles2[i].xVel * viscosity2 + accX * particles2[i].mass;
      particles2[i].yVel = particles2[i].yVel * viscosity2 + accY * particles2[i].mass;
    }
  };
};

// 启动实例：指定容器 ID（确保 HTML 中有 ）
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 实例，彻底规避“页面变白”问题。