【30分钟学完】canvas动画|游戏基础(7)：动量守恒与多物体碰撞
前言
一路沿着本系列教程学习的朋友可能会发现，前面教程中都尽量避免提及质量的概念，很多运动概念也时刻提醒大家这不是真实的物体运动。因为真实的物体运动其实跟质量都是密不可分的，而且质量的引入自然必须提及力学概念，所以为了不内容冗余才忽略了质量。
从本篇开始，将会正式引入物理力学概念，给每个物体赋予质量概念，为了更加真实的模拟现实环境的物体运动。
阅读本篇前请先打好前面的基础。
本人能力有限，欢迎牛人共同讨论，批评指正。
动量与动量守恒
【科普】一般而言，一个物体的动量指的是这个物体在它运动方向上保持运动的趋势。动量实际上是牛顿第一定律的一个推论。
动量即是“物体运动的量”，是物体的质量和速度的乘积，是矢量，能够反应出运动的效果，一般用p表示。举个例子，低速运动的重物，跟高速运动的子弹，拥有相同的威力。
p = m * v
【科普】动量是守恒量。动量守恒定律表示为：一个系统不受外力或者所受外力之和为零，这个系统中所有物体的总动量保持不变。它的一个推论为：在没有外力干预的情况下，任何系统的质心都将保持匀速直线运动或静止状态不变。动量守恒定律可由机械能对空间平移对称性推出。
动量守恒即系统在碰撞前的总动量等于系统在碰撞后的总动量。其中的系统简单理解就是物体的集合。在可以忽略碰撞以外的因素时，动量是守恒的。
(m0 * v0) + (m1 * v1) = (m0 * v0Final) + (m1 * v1Final)
这条公式是我们计算碰撞后速度的基础，因为我们假定我们的物体都是刚体，并且忽略外力做碰撞。现在只要推导出末速度v0Final和v1Final的公式，就可以应用到我们的模拟碰撞的编程动画中。推导过程如下：
其实推导过程不重要，只要记得结论：
v1Final = (2 * m0 * v0) + v1 * (m1 - m0) / (m0 + m1) v0Final = (2 * m1 * v1) - v0 * (m0 - m1) / (m0 + m1) // 二者可直接转换 v1Final = (v0 - v1) + v0Final
单轴碰撞
我们开始使用前面推导出的公式，先来个最简单的单轴碰撞例子，这里演示了两个球相撞的效果，mass定义了他们的质量，由于他们初始速度相同，所以依据动量守恒碰撞后ball0的速度变为-1/3，而ball1的速度变为5/3。
【PS】这里有个细节，碰撞时可能出现球已经重叠的情况，这个例子只是简单将末速度加给碰撞后的球，用以弹开他们，这是不严谨但有效的做法。
完整示例：单轴碰撞
/**
* 单轴碰撞
* */
window.onload = function () {
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const ball0 = new Ball();
const ball1 = new Ball();
// 定义ball0的属性
ball0.mass = 2;
ball0.x = 50;
ball0.y = canvas.height / 2;
ball0.vx = 1;
// 定义ball1的属性
ball1.mass = 1;
ball1.x = 300;
ball1.y = canvas.height / 2;
ball1.vx = -1;
(function drawFrame() {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
// 移动两个物体的位置
ball0.x += ball0.vx;
ball1.x += ball1.vx;
const dist = ball1.x - ball0.x;
// 碰撞检测
if (Math.abs(dist) < ball0.radius + ball1.radius) {
// 运用动量守恒计算碰撞后速度
const vxTotal = ball0.vx - ball1.vx;
ball0.vx = ((ball0.mass - ball1.mass) * ball0.vx + 2 * ball1.mass * ball1.vx) / (ball0.mass + ball1.mass);
ball1.vx = vxTotal + ball0.vx;
// 将速度加到两物体的位置上实现弹开
ball0.x += ball0.vx;
ball1.y += ball1.vx;
}
// 绘制两球
ball0.draw(context);
ball1.draw(context);
}());
};双轴碰撞
现实情况很少会出现单轴碰撞，如果两个轴上都有速度，处理起来会比较麻烦，把速度分解出来再代入动量守恒公式，这里运用到上一篇中关于坐标旋转的知识。
基本思路：
- 使用旋转公式，以其中一个物体为原点，旋转整个系统，将两物体的中心连线置为水平场景；
- 求出物体x轴上的速度；
- 使用动量守恒计算x轴上的碰撞后速度；
- 再旋转回来。
示例是两个随机初始速度的球在空间内碰撞，碰到边界也会反弹，由于代码量较大，这里只截取部分核心代码：
注意：旋转是以ball0为原点进行的，也就是说旋转中的所有位置和速度都是相对于ball0的，所有回旋后的位置和速度需要转换成相对于相对区域位置。
完整示例：双轴碰撞
// 坐标旋转函数
function rotate(x, y, sin, cos, reverse) {
return {
x: (reverse) ? (x * cos + y * sin) : (x * cos - y * sin),
y: (reverse) ? (y * cos - x * sin) : (y * cos + x * sin),
};
}
// 检查碰撞
function checkCollision() {
const dx = ball1.x - ball0.x;
const dy = ball1.y - ball0.y;
const dist = Math.sqrt(dx ** 2 + dy ** 2);
// 基于距离的碰撞检测
if (dist < ball0.radius + ball1.radius) {
// 以ball0为中心点旋转
const angle = Math.atan2(dy, dx);
const sin = Math.sin(angle);
const cos = Math.cos(angle);
// ball0在中心点
const pos0 = {
x: 0,
y: 0,
};
// 依据ball1与ball0的相对距离计算旋转后的坐标（反向）
const pos1 = rotate(dx, dy, sin, cos, true);
// 旋转ball0的速度（反向）
const vel0 = rotate(ball0.vx, ball0.vy, sin, cos, true);
// 旋转ball1的速度（反向）
const vel1 = rotate(ball1.vx, ball1.vy, sin, cos, true);
// 计算相对速度
const vxTotal = vel0.x - vel1.x;
// 计算相撞后速度
vel0.x = ((ball0.mass - ball1.mass) * vel0.x + 2 * ball1.mass * vel1.x) / (ball0.mass + ball1.mass);
vel1.x = vxTotal + vel0.x;
// 计算相撞后位置
pos0.x += vel0.x;
pos1.x += vel1.x;
// 回旋位置
const pos0F = rotate(pos0.x, pos0.y, sin, cos, false);
const pos1F = rotate(pos1.x, pos1.y, sin, cos, false);
// 将相对ball0位置转换为相对区域位置
ball1.x = ball0.x + pos1F.x;
ball1.y = ball0.y + pos1F.y;
ball0.x += pos0F.x;
ball0.y += pos0F.y;
// 回旋速度
const vel0F = rotate(vel0.x, vel0.y, sin, cos, false);
const vel1F = rotate(vel1.x, vel1.y, sin, cos, false);
ball0.vx = vel0F.x;
ball0.vy = vel0F.y;
ball1.vx = vel1F.x;
ball1.vy = vel1F.y;
}
}多物体碰撞
加入多个物体，只是把两个物体的碰撞检测，改变成所有物体两两间做碰撞检测。
基本思路：
- 先遍历一次物体集，让物体移动并处理边界碰撞；
- 再遍历一次物体集，两两物体做碰撞检测并求出碰撞后的速度和位置；
- 最后一次遍历物体集，绘制他们。
依据这个思路我们得到了这样一个示例，球的质量、大小和初始速度都是随机的，碰撞代码基本和前面是一样的。
完整示例：多物体碰撞（无处理重叠）
仔细观察示例，会发现这里会出现一个问题：小球会重叠到一起并且无法分离。这是由如下原因造成的：
- 程序依照三个小球的速度移动他们；
- 程序检测ball0和ball1，ball0和ball2，发现他们并没有碰撞；
- 程序检测ball1和ball2。因为他们发生了碰撞，所以他们的速度和位置都要重新计算，然后弹开。但这不巧让ball1和ball0 接触上了。然而，由于这一组合已经过检测，所以忽略了这一事实；
- 在下一轮循环中，程序依然按照他们的速度移动小球。这样就使得ball0和ball1更加靠近了；
- 现在程序检测到ball0和ball1碰撞了，重新计算速度和位置后，想要将他们分开，却会出现无法完全分开的情况，就卡到了一起。
【PS】为什么无法完全分开？因为我们分开两物体的做法是将新速度加到新位置上，如果旧位置已经重叠，那就永远无法分离了。
改变分开两物体的处理办法就能解决这个问题，这里有个较为简单但不是很精确的办法：
- 先求给出总速度绝对值；
- 再求出重叠部分的长度；
- 以相撞后速度在总速度的比例移开两个物体。
完整示例：多物体碰撞
改造后核心代码如下：
function checkCollision(ball0, ball1) {
const dx = ball1.x - ball0.x;
const dy = ball1.y - ball0.y;
const dist = Math.sqrt(dx ** 2 + dy ** 2);
// 基于距离的碰撞检测
if (dist < ball0.radius + ball1.radius) {
// 以ball0为中心点旋转
const angle = Math.atan2(dy, dx);
const sin = Math.sin(angle);
const cos = Math.cos(angle);
// ball0在中心点
const pos0 = {
x: 0,
y: 0,
};
// 依据ball1与ball0的相对距离计算旋转后的坐标（反向）
const pos1 = rotate(dx, dy, sin, cos, true);
// 旋转ball0的速度（反向）
const vel0 = rotate(ball0.vx, ball0.vy, sin, cos, true);
// 旋转ball1的速度（反向）
const vel1 = rotate(ball1.vx, ball1.vy, sin, cos, true);
// 计算相对速度
const vxTotal = vel0.x - vel1.x;
// 计算相撞后速度
vel0.x = ((ball0.mass - ball1.mass) * vel0.x + 2 * ball1.mass * vel1.x) / (ball0.mass + ball1.mass);
vel1.x = vxTotal + vel0.x;
// 计算出绝对速度和重叠量，分离避免物体重叠
const absV = Math.abs(vel0.x) + Math.abs(vel1.x);
const overlap = (ball0.radius + ball1.radius) - Math.abs(pos0.x - pos1.x);
pos0.x += vel0.x / absV * overlap;
pos1.x += vel1.x / absV * overlap;
// 回旋位置
const pos0F = rotate(pos0.x, pos0.y, sin, cos, false);
const pos1F = rotate(pos1.x, pos1.y, sin, cos, false);
// 将相对ball0位置转换为相对区域位置
ball1.x = ball0.x + pos1F.x;
ball1.y = ball0.y + pos1F.y;
ball0.x += pos0F.x;
ball0.y += pos0F.y;
// 回旋速度
const vel0F = rotate(vel0.x, vel0.y, sin, cos, false);
const vel1F = rotate(vel1.x, vel1.y, sin, cos, false);
ball0.vx = vel0F.x;
ball0.vy = vel0F.y;
ball1.vx = vel1F.x;
ball1.vy = vel1F.y;
}
}