为嵌入双p5.js代码添加canvas ID后页面空白问题排查

核心问题分析 #

• 变量作用域错误：你在draw()和handleFooterInteractions()中使用f.particles2调用粒子数组，但实际上particles2是定义在sketch函数s1内部的局部变量，并非p5实例f的属性。未添加ID前可能是全局模式，变量默认挂在全局对象上，所以能正常访问；改成实例模式后，f.particles2会返回undefined，导致循环遍历时报错，页面直接空白。
• 未绑定实例的鼠标变量：代码中直接使用mouseX/mouseY，在实例模式下必须通过p5实例f访问（即f.mouseX/f.mouseY），否则会读取全局未定义的变量，计算出NaN值，导致粒子位置异常，最终渲染失败。

修正后的代码 #

var s1 = function(f) {
  var particles2 = [];
  var viscosity2;
  var c2;
  var canvas;

  f.setup = function() {
    canvas = f.createCanvas(f.windowWidth, f.windowHeight);
    f.frameRate(60);
    f.noStroke();

    c2 = f.color(13, 104, 167);
    viscosity2 = 0.8;

    // 增加粒子密度
    for (var 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.keyPressed = function() {
    if (f.key === ' ') {
      f.noLoop();
    }
    if (f.key === 's') {
      f.save();
    }
  };

  f.draw = function() {
    f.background(0);

    // 处理粒子间及鼠标交互
    f.handleFooterInteractions();

    // 移动并绘制每个粒子
    for (var i = 0; i < particles2.length; i++) {
      particles2[i].move();
      particles2[i].display();
    }
  };

  function Particle2(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.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;
      var accY = 0;

      // 粒子间交互
      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);
          if (dis < 1) dis = 1;

          // 调整粒子间作用力范围
          var force = (dis - 600) * particles2[j].mass / dis;
          accX += force * x;
          accY += force * y;
        }

        // 鼠标交互：使用实例绑定的mouseX/mouseY
        var x = f.mouseX - particles2[i].xPos;
        var y = f.mouseY - particles2[i].yPos;
        var dis = f.sqrt(x * x + y * y);

        // 添加阻尼效果
        if (dis < 40) dis = 40;
        if (dis > 50) dis = 50;

        var force = (dis - 50) / (5 * dis);
        accX += force * x;
        accY += force * y;
      }
      particles2[i].xVel = particles2[i].xVel * viscosity2 + accX * particles2[i].mass;
      particles2[i].yVel = particles2[i].yVel * viscosity2 + accY * particles2[i].mass;
    }
  }

};

var myp5 = new p5(s1, 'footer');

额外说明 #

• 实例模式下，所有p5相关的变量和方法都需要通过传入的f（即p5实例）访问，避免和全局变量冲突；
• 自定义的构造函数Particle2直接定义在sketch内部即可，无需挂载到p5实例上，这样作用域更清晰；
• 确保HTML中存在ID为footer的元素，且该元素有足够的宽高（如果是块级元素，默认宽100%，高需要设置，否则canvas高度为0也会导致页面空白）。

内容的提问来源于stack exchange，提问作者Tongggg