以恒定速度沿路径移动物体
Moving an object along a path with constant speed
我有一个由折线(3D 点阵列)组成的对象路径,其点分布非常不均匀。我需要使用间隔设置为 10 毫秒的计时器以恒定速度移动物体。
不均匀分布的点会产生人眼变化的速度。所以现在我需要决定如何处理这一长串 3D 点。
我的第一个想法是将长段细分为更小的部分。它工作得更好,但问题仍然存在。
在这些情况下最好的方法是什么?另一个想法,可能是使用 Ramer–Douglas–Peucker algorithm 简化原始路径,然后再次平均细分它,但我不确定它是否能完全解决我的问题。
这在 3D 图形的许多领域应该是一个相当普遍的问题,那么是否存在经过验证的方法?
我为你制作了一支 JavaScript 笔 https://codepen.io/dawken/pen/eYpxRmN?editors=0010 但它在任何其他语言中应该非常相似。单击矩形以添加点。
你必须以恒定的速度保持时间依赖性 distance
,像这样:
const t = currentTime - startTime;
const distance = (t * speed) % totalLength;
然后你必须找到路径中的两个点,使得当前距离介于路径上的 "distance" 之间;您将 "distance from start of the path" 存储在每个点 {x, y, distanceFromStart}
上。第一点 points[i]
这样 distance < points[i].distanceFromStart
就是你的目的地; points[i - 1]
之前的那一点是你的来源。您需要在它们之间进行线性插值。
假设你没有重复点(否则你会被零除)你可以这样做。
for (let i = 0; i < points.length; i++) {
if (distance < points[i].distanceFromStart) {
const pFrom = points[i - 1];
const pTo = points[i];
const f = (distance - pFrom.distanceFromStart) / (pTo.distanceFromStart- pFrom.distanceFromStart);
const x = pFrom.x + (pTo.x - pFrom.x) * f;
const y = pFrom.y + (pTo.y - pFrom.y) * f;
ctx.fillRect(x - 1, y - 1, 3, 3);
break;
}
}
看到这支笔。点击矩形添加点:https://codepen.io/dawken/pen/eYpxRmN?editors=0010
我有一个由折线(3D 点阵列)组成的对象路径,其点分布非常不均匀。我需要使用间隔设置为 10 毫秒的计时器以恒定速度移动物体。
不均匀分布的点会产生人眼变化的速度。所以现在我需要决定如何处理这一长串 3D 点。
我的第一个想法是将长段细分为更小的部分。它工作得更好,但问题仍然存在。
在这些情况下最好的方法是什么?另一个想法,可能是使用 Ramer–Douglas–Peucker algorithm 简化原始路径,然后再次平均细分它,但我不确定它是否能完全解决我的问题。
这在 3D 图形的许多领域应该是一个相当普遍的问题,那么是否存在经过验证的方法?
我为你制作了一支 JavaScript 笔 https://codepen.io/dawken/pen/eYpxRmN?editors=0010 但它在任何其他语言中应该非常相似。单击矩形以添加点。
你必须以恒定的速度保持时间依赖性 distance
,像这样:
const t = currentTime - startTime;
const distance = (t * speed) % totalLength;
然后你必须找到路径中的两个点,使得当前距离介于路径上的 "distance" 之间;您将 "distance from start of the path" 存储在每个点 {x, y, distanceFromStart}
上。第一点 points[i]
这样 distance < points[i].distanceFromStart
就是你的目的地; points[i - 1]
之前的那一点是你的来源。您需要在它们之间进行线性插值。
假设你没有重复点(否则你会被零除)你可以这样做。
for (let i = 0; i < points.length; i++) {
if (distance < points[i].distanceFromStart) {
const pFrom = points[i - 1];
const pTo = points[i];
const f = (distance - pFrom.distanceFromStart) / (pTo.distanceFromStart- pFrom.distanceFromStart);
const x = pFrom.x + (pTo.x - pFrom.x) * f;
const y = pFrom.y + (pTo.y - pFrom.y) * f;
ctx.fillRect(x - 1, y - 1, 3, 3);
break;
}
}
看到这支笔。点击矩形添加点:https://codepen.io/dawken/pen/eYpxRmN?editors=0010