HTML5畫布平滑地增加x，y到原點（0,0）

Question

我試圖實現像模擬一樣的重力，其中畫布上創建的所有點將從隨機返回到原點（0,0）/或畫布中心在畫布上產生斑點。像星星一樣被吸入黑洞。我如何增加或減少x和y值，使它們在同一點到達目的地？現在即時增加或減少1（我也試圖減少更大的數字減慢），但我得到的X和Y，使它看起來像點擊中牆然後下降或上升到奇點。

例子：

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

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

Answer 1

這裏的東西我寫了簡單的矢量運算：

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來確定它的新位置。

Answer 2

你必須計算出物體距中心點的距離：你的情況y0

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

和x0 = 0所以distance = sqrt((y1)^2 + (x1)^2)

然後你必須弄清楚x變化的比例第二y改變該距離，讓我們說，從產地爲對象的距離是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);