Question

我试图实现像模拟这样的重力，其中在画布上创建的所有点将从画布上随机生成的点返回到原点（0,0）/或画布中心。就像星星被吸入黑洞一样。如何增加或减少x和y值，使它们在同一点到达目的地？现在我加1或减1（我也尝试减慢更大的数字）但是我把x和y关闭，这样它看起来像点击墙然后下降或上升到奇点。

示例：

var point = {
  x: 615,
  y: 215,
  radius: 2
 }

var singularity = {
  x: 751,
  y: 401,
  radius: 2    
}

Answer 1

您必须计算物体距中心点的距离：

distance = sqrt((y1-y0)^2 + (x1-x0)^2)

在你的情况y0和x0 = 0所以distance = sqrt((y1)^2 + (x1)^2)

然后你必须弄清楚该距离的x变化和y变化的比例，所以让我们说对象A的原点距离是100，它的坐标是(x, y)然后我们知道，在每个时间间隔，x位置需要增加((x-0)/100)*velocity，而y需要增加((y-0)/100)*velocity，如果我们想要对象遵循直线。

您应该为每个对象添加一个力度属性，当您接近黑洞时，该属性的绝对值会增加：

    var point = {
      x: 615,
      x0: 615,
      y: 215,
      y0: 215,
      radius: 2,
      velocity: -5, /* maybe make the initial value of this a function of intitialDistance to mimick black hole gravitational pull */
      intitialDistance: Math.sqrt(Math.Pow(this.x0,2) + Math.pow(this.y0,2)),
      deltaX: this.x0/this.initialDistance,
      deltaY: this.y0/this.initialDistance
     }

    var move = setInterval(function() {

      point.x += point.velocity * point.deltaX;
      point.y += point.velocity * point.deltaY;
      point.velocity -= 4;
}, 40);

Answer 2

这是我为简单的矢量操作编写的内容：

function vector(x, y) {

    this.x = x;
    this.y = y;
    var point = this;
    this.toString = function toString() {
        return point.x + "," + point.y;
    }
    this.add = function (pos) {
        var x = point.x + pos.x;
        var y = point.y + pos.y;
        return new vector(x, y);
    }
    this.subtract = function (pos) {
        var x = point.x - pos.x;
        var y = point.y - pos.y;
        return new vector(x, y);
    }
    this.multiply = function multiply(scalar) {
        var x = point.x * scalar;
        var y = point.y * scalar;
        return new vector(x, y);
    }
    this.magnitude = function magnitude() {
        return Math.sqrt(Math.pow(point.x, 2) + Math.pow(point.y, 2));
    }
    this.unit = function unit() {
        var mag = point.magnitude();
        if (mag === 0)
            return point;
        return point.multiply(1 / mag);
    }
    this.angle = function angle() {
        return Math.atan2(y, x);
    }

}

您可以使用它来计算奇点的距离，方向和角度;

var itemPosition = new vector(point.x, pointy);
var singularityPosition = new vector(singularity.x, singularity.y);
var displacementVector = singularityPosition.subtract(itemPosition);

var distanceFromSingluarity = displacementVector.magnitude();
var directionToSingularity = displacementVector.unit();

可能会有一些拼写错误，但它应该让你开始。在矢量对象中使用directionToSingularity.multiply（myCurrentSpeed）方法。它会给你一个你可以添加（）到你的pointVector的数字，以确定它的新位置。

HTML5 Canvas平滑地将x，y增加到原点（0,0）

2 个答案: