基于Angular+HTML5 Canvas的三重摆模拟运行失控如何解决？

核心问题定位 #

你代码里的运动模拟逻辑存在多处基础错误，是导致摆运动异常的直接原因：

• 物理更新顺序完全错误：你将本应该是角加速度的计算结果直接赋值给了角度angle，正确的物理模拟顺序应该是：计算角加速度 -> 更新角速度 -> 用角速度更新角度
• 三角函数入参错误：formula2.part3中你错误地将速度差作为参数传入sin和cos，正确入参应该是角度差
• 没有时间步长控制：你没有引入帧间隔时间dt，运动速度完全不受控，极易出现数值溢出导致轨迹混乱
• 公式实现逻辑错误：你引用的论文给出的是运动方程的等式，需要先解三个变量的联立线性方程组得到三个摆的角加速度acc1/acc2/acc3，而不能直接将方程结果赋值给角度
• 初始参数不合理：第二个摆的初始角速度设为10，数值过大，初始扰动直接超出正常摆动范围

可行解决方案 #

按以下步骤修改代码即可恢复正常模拟：

1. 可以先使用固定小时间步长做测试，稳定后再补充动态帧间隔计算，避免数值不稳定
2. 替换你原来update方法中的角度计算逻辑，使用经过验证的三重摆角加速度计算实现：

update() {
  const m1 = this.bob1.mass, m2 = this.bob2.mass, m3 = this.bob3.mass;
  const l1 = this.bob1.length, l2 = this.bob2.length, l3 = this.bob3.length;
  const a1 = this.bob1.angle, a2 = this.bob2.angle, a3 = this.bob3.angle;
  const v1 = this.bob1.velocity, v2 = this.bob2.velocity, v3 = this.bob3.velocity;
  const g = this.gravity;
  const dt = 0.05; // 固定小时间步长，可根据效果调整
  const damping = 0.9999; // 微小阻尼，模拟空气阻力避免能量溢出

  // 计算三个摆的角加速度
  const num1 = -g * (2 * m1 + m2 + m3) * Math.sin(a1) - m2 * g * Math.sin(a1 - 2 * a2) - 2 * Math.sin(a1 - a2) * m2 * (v2 * v2 * l2 + v1 * v1 * l1 * Math.cos(a1 - a2));
  const den1 = l1 * (2 * m1 + m2 + m3 - m2 * Math.cos(2 * a1 - 2 * a2));
  const acc1 = num1 / den1;

  const num2 = 2 * Math.sin(a1 - a2) * (v1 * v1 * l1 * (m1 + m2 + m3) + g * (m1 + m2 + m3) * Math.cos(a1) + v2 * v2 * l2 * m2 * Math.cos(a1 - a2));
  const den2 = l2 * (2 * m1 + m2 + m3 - m2 * Math.cos(2 * a1 - 2 * a2));
  const acc2 = num2 / den2;

  const num3 = 2 * Math.sin(a2 - a3) * (v2 * v2 * l2 * (m2 + m3) + g * (m2 + m3) * Math.cos(a2) + v3 * v3 * l3 * m3 * Math.cos(a2 - a3));
  const den3 = l3 * (2 * m2 + m3 - m3 * Math.cos(2 * a2 - 2 * a3));
  const acc3 = num3 / den3;

  // 正确更新顺序：先更新角速度，再更新角度
  this.bob1.velocity += acc1 * dt;
  this.bob1.velocity *= damping;
  this.bob1.angle += this.bob1.velocity * dt;

  this.bob2.velocity += acc2 * dt;
  this.bob2.velocity *= damping;
  this.bob2.angle += this.bob2.velocity * dt;

  this.bob3.velocity += acc3 * dt;
  this.bob3.velocity *= damping;
  this.bob3.angle += this.bob3.velocity * dt;

  // 原有坐标计算和绘制逻辑不变
  this.bob1.x =  this.canvas.width/2 + this.bob1.length * Math.sin(this.bob1.angle);
  this.bob1.y = this.bob1.length * Math.cos(this.bob1.angle);

  this.bob2.x = this.bob1.x + this.bob2.length * Math.sin(this.bob2.angle);
  this.bob2.y = this.bob1.y + this.bob2.length * Math.cos(this.bob2.angle);

  this.bob3.x = this.bob2.x + this.bob3.length * Math.sin(this.bob3.angle);
  this.bob3.y = this.bob2.y + this.bob3.length * Math.cos(this.bob3.angle);
  this.draw()
}

3. 调整初始参数：将bob2的初始velocity从10改成0，避免初始扰动过大

修改完成后运行项目，即可看到符合物理规律的三重摆混沌运动效果，不会再出现乱飞的异常情况。

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