P5.js圆形移动项目问题求助：持续碰撞与边界溢出

问题根源 #

• 原碰撞逻辑仅通过反转速度+随机赋值处理碰撞，缺乏物理合理性，导致球体持续重叠触发碰撞，颜色频繁切换引发视觉闪烁。
• 未实现屏幕边界碰撞检测，球体会直接飞出画布。
• 错误的位置修正方式（this.pos.sub(1,1)）加剧了球体偏移，导致飞出问题更严重。

修改后的完整代码 #

function setup() {
  createCanvas(750, 750);
  noStroke();
  balls = [];
  // 初始化球体网格
  for (let x = 0; x < 25; x++) {
    for (let y = 0; y < 25; y++) {
      let b = new Ball(10 + x * 30, 10 + y * 30);
      balls.push(b);
    }
  }
  // 给指定球体初始速度
  balls[210].vel = p5.Vector.random2D().mult(0.3);
}

function draw() {
  background(220);
  for (let b of balls) {
    b.update();
    b.checkCollision(balls);
  }
  for (let b of balls) {
    b.draw();
  }
}

class Ball {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    this.color = 'white';
    this.radius = 10; // 统一半径，方便碰撞计算
  }

  update() {
    // 边界碰撞检测与处理
    // 左右边界
    if (this.pos.x - this.radius < 0 || this.pos.x + this.radius > width) {
      this.vel.x *= -1;
      // 修正位置，避免球体穿出边界
      this.pos.x = constrain(this.pos.x, this.radius, width - this.radius);
    }
    // 上下边界
    if (this.pos.y - this.radius < 0 || this.pos.y + this.radius > height) {
      this.vel.y *= -1;
      this.pos.y = constrain(this.pos.y, this.radius, height - this.radius);
    }

    this.pos.add(this.vel);
  }

  draw() {
    fill(this.color);
    circle(this.pos.x, this.pos.y, this.radius * 2);
  }

  checkCollision(others) {
    for (const other of others) {
      if (other !== this) {
        const d = this.pos.dist(other.pos);
        const minDist = this.radius + other.radius;

        if (d < minDist) {
          // 计算碰撞法线方向
          const normal = p5.Vector.sub(other.pos, this.pos).normalize();
          // 计算相对速度
          const relativeVel = p5.Vector.sub(other.vel, this.vel);
          // 计算沿法线方向的速度分量
          const velAlongNormal = relativeVel.dot(normal);

          // 如果两球正在远离，不处理碰撞
          if (velAlongNormal > 0) continue;

          // 弹性碰撞系数（0.8表示有能量损失）
          const restitution = 0.8;
          // 计算冲量大小
          const impulse = -(1 + restitution) * velAlongNormal;
          // 应用冲量到速度
          this.vel.sub(normal.mult(impulse));
          other.vel.add(normal.mult(impulse));

          // 分离重叠的球体，避免持续碰撞
          const overlap = minDist - d;
          const separation = normal.mult(overlap / 2);
          this.pos.sub(separation);
          other.pos.add(separation);

          // 仅在碰撞时切换一次颜色
          this.color = random(['red','pink','purple','blue','green','orange','yellow','olive','maroon','magenta','indigo','teal','violet','crimson','gold','azure','coral','cyan','emerald']);
          other.color = random(['red','pink','purple','blue','green','orange','yellow','olive','maroon','magenta','indigo','teal','violet','crimson','gold','azure','coral','cyan','emerald']);
        }
      }
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>

关键修改说明 #

• 弹性碰撞实现：
  • 使用物理公式计算碰撞后的速度，确保碰撞符合弹性规律，避免球体持续卡在一起。
  • 碰撞后计算重叠距离，将两球向相反方向分离，彻底解决持续碰撞触发的问题。
• 边界碰撞处理：
  • 在update方法中检测球体是否触及画布边缘，反转对应方向的速度，并使用constrain修正位置，防止球体穿出边界。
• 优化变量声明：
  • 给循环变量添加let声明，避免全局变量污染。
  • 统一球体半径为变量，方便碰撞计算和边界检测。
• 颜色切换优化：
  • 仅在碰撞发生且球体正在靠近时切换颜色，避免因持续重叠反复触发颜色变化导致的闪烁。

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