想出一个算法

Question

我的 canvas 有一个圆圈。鼠标位置是相对于 canvas 计算的。我希望圆圈在鼠标距离 <=100px 距离时移动。开始移动的最小距离是 100px，0.5px/tick。它在 20 像素的距离处上升到 2 像素/刻度。

基本上，鼠标离圆圈越近，圆圈应该移动得越快。

到目前为止，当距离小于或等于 100 时，我所拥有的移动圆圈 --（我使用的是 easeljs 库）

function handleTick() {
    distance = calculateDistance(circle, mX, mY);
    if (distance<=100) {
        circle.x += 0.3;
    
    stage.update();
    }
}

我想要的

function handleTick() {
    distance = calculateDistance(circle, mX, mY);
    if (distance<=100) {
        circleSpeed = // equation that takes distance and outputs velocity px/tick.
        circle.x += circleSpeed;
    
    stage.update();
    }
}

所以我认为这是一个数学问题并把它发布到math exchange，但到目前为止没有答案。我尝试在谷歌上搜索几个主题，例如：“如何得出一个关系的方程式”，因为我有定义域 (100, 20) 和范围 (0.5, 2)。什么函数可以关联它们？

问题是我数学不好，这些数字可能甚至没有关系 - 我不确定我在找什么。

我应该写一个随机算法“circleSpeed = 2x + 5x;”并希望它做我想做的事吗？或者是否可以像我一样做 - “我希望这些是最小值和最大值，现在我需要为它想出一个方程式”？

如果有正确方向的指针就更好了，因为到目前为止我都是在黑暗中拍摄。

Answer 1

我假设你想要距离和速度之间的线性关系？

如果是这样，您可以做类似 circleSpeed = (2.5 - 0.5(distance/20)) 的事情。但是，这会在范围（100 到 0）上将速度从 0 线性设置为 2.5，但是如果像这样使用另一个 if (distance < 20) circleSpeed = 2，您会将速度限制在 20 范围内的 2.0。

它不是 100% 准确地满足您的要求，但非常接近，我想它应该看起来不错。它也可能被调整得更近。

但是如果你想让圆圈远离鼠标，你还需要做一些事情来计算正确的移动方向，你的问题会变得有点复杂，因为你需要计算speed_x 和 speed_y

Answer 2

这是一个简单的动画片段线性，这意味着圆的加速度将是恒定的。

if distance > 100:
    print 0
elseif distance < 20:
    print 2
else:
    print  2 - (distance -20 ) * 0.01875

但其他关系也是可能的，（您可能会称之为其他缓动）但它们会更复杂，呵呵。

编辑：糟糕，我弄错了。

Answer 3

如果我没理解错的话，你希望 circleSpeed 是 distance 的函数，这样

circleSpeed 是 0.5 当 distance 是 100.
circleSpeed 是 2 当 distance 是 20.

有无穷大函数可以满足这一点，所以我假设是线性的。

包含点(x₀,y₀)的斜率为m的直线方程为

y = m (x-x₀) + y₀

但在这种情况下你有两个点，(x₁,y₁) 和 (x₂,y₂)，所以你可以用

计算斜率

    y₂ - y₁
m = ───────
    x₂ - x₁

所以直线的方程是

    y₂ - y₁
y = ─────── (x - x₁) + y₁
    x₂ - x₁

有了你的数据，

    0.5 - 2 
y = ──────── (x - 20) + 2 = -0.01875 x + 2.375
    100 - 20

因此，

circleSpeed = -0.01875 * distance + 2.375

想出一个算法

Coming up with an Algorithm

javascript

algorithm

equation

createjs

基本上，鼠标离圆圈越近，圆圈应该移动得越快。