本文详解 p5.js 多实例嵌入时因作用域混淆导致页面空白的常见错误，重点说明 `f.` 前缀的使用原则、全局/局部变量区分方法，并提供可直接运行的修复代码与最佳实践。

在 p5.js 中使用实例模式（instance mode）嵌入多个画布（如 canvas id="footer">）是常见需求，但极易因作用域误用引发整个页面崩溃或白屏——这正是你遇到的问题：添加 id 后编辑器变空白。根本原因并非 HTML 或 ID 本身，而是 f. 前缀滥用与缺失混杂，破坏了 JavaScript 作用域链，导致运行时抛出 ReferenceError（如 particles2 is not defined 或 handleFooterInteractions is not a function），进而使 p5 初始化失败，页面渲染中断。

✅ 正确的作用域划分原则

p5 实例模式中，传入的参数 f 是当前 p5 实例的唯一权威引用，仅用于访问 p5 内置 API：

• ✅ 必须加 f.：f.createCanvas()、f.random()、f.mouseX、f.sqrt()、f.fill() 等所有 p5 函数/属性；
• ❌ 禁止加 f.：你声明的局部变量（如 particles2, viscosity2, c2）、自定义函数（如 handleFooterInteractions）、构造函数（如 Particle2）——它们属于闭包内部作用域，直接调用即可；
• ⚠️ 特别注意：this 在类方法中仍指向实例对象，但其属性（如 this.xPos）不可通过 f. 访问。

? 修复后的关键代码对比（精简版）

var s1 = function(f) {
  // ✅ 局部变量：不加 f.
  var particles2 = [];
  var viscosity2;
  var c2;

  f.setup = function() {
    // ✅ p5 API：必须加 f.
    f.createCanvas(f.windowWidth, f.windowHeight);
    f.frameRate(60);
    f.noStroke();

    c2 = f.color(13, 104, 167); // ✅ c2 是局部变量，但 f.color() 是 p5 方法
    viscosity2 = 0.8;           // ✅ 直接赋值

    for (var i = 0; i < 900; i++) {
      // ✅ new Particle2() 是自定义构造函数，不加 f.
      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);

    // ✅ 自定义函数：不加 f.
    handleFooterInteractions();

    // ✅ 遍历局部数组：particles2.length（非 f.particles2）
    for (var i = 0; i < particles2.length; i++) {
      particles2[i].move();     // ✅ 调用实例方法
      particles2[i].display();  // ✅ 同上
    }
  };

  // ✅ 构造函数定义：不加 f.，且需在 setup 之后、draw 之前声明
  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); // ✅ p5 方法必须加 f.
    this.colour = c;

    this.move = function() {
      this.xPos += this.xVel; // ✅ this 是实例自身，不涉及 f.
      this.yPos += this.yVel;
    };

    this.display = function() {
      f.fill(this.colour); // ✅ p5 方法必须加 f.
      f.ellipse(this.xPos, this.yPos, this.mass * 1000, this.mass * 1000);
    };
  };

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

      // ✅ 访问局部数组元素：particles2[i].xPos（非 f.particles2[i].xPos）
      for (var j = 0; j < particles2.length; j++) {
        if (i !== j) {
          var x = particles2[j].xPos - particles2[i].xPos;
          var y = particles2[j].yPos - particles2[i].yPos;
          var dis = f.sqrt(x * x + y * y); // ✅ sqrt 是 p5 方法
          // ... 其余逻辑保持不变
        }
      }
      // ✅ 更新局部数组元素属性
      particles2[i].xVel = particles2[i].xVel * viscosity2 + accX * particles2[i].mass;
      particles2[i].yVel = particles2[i].yVel * viscosity2 + accY * particles2[i].mass;
    }
  };
};

// ✅ 创建实例：传入 sketch 函数，无需指定容器 ID（由 HTML 控制）
var myp5 = new p5(s1);

? HTML 容器绑定方式（重要！）

你原代码中 new p5(s1, 'footer') 的写法仅在 p5.js v0.x 中有效，v1.0+ 已废弃。现代 p5.js 要求：

• ✅ 将 放在 HTML 中；
• ✅ 移除第二个参数 'footer'，改为在 setup() 中显式指定容器：

f.setup = function() {
  // ✅ 正确：先创建 canvas，再用 parent() 挂载到指定 ID 元素
  canvas = f.createCanvas(f.windowWidth, f.windowHeight);
  canvas.parent('footer'); // ? 关键！将 canvas 插入 id="footer" 的元素内
  // ... 其余 setup 逻辑
};

⚠️ 注意事项与调试建议

• 严格检查控制台报错：白屏时按 F12 打开开发者工具，查看 Console 中首个 Uncaught ReferenceError，它直接暴露作用域错误位置；
• 避免全局污染：所有变量/函数声明在 s1 函数内，确保多实例隔离；
• 两个实例共存示例：只需复制 s1 结构为 s2，并新建 var myp5_2 = new p5(s2);，配合不同 HTML 容器 ID 即可；
• 性能提示：900 个粒子 + 双重循环（O(n²)）可能造成卡顿，生产环境建议用空间分割（如 Quadtree）优化。

遵循以上规则，你的 p5.js 多实例将稳定运行，再也不会因一个多余的 f. 而让整个页面消失。