JS - 將2D矢量變成曲線？

我在畫布上有兩個Points（x/y），可以使用requestanimationframe或setinterval在一條直線上移動它們之間的圖像。JS - 將2D矢量變成曲線？

然而，代替我想，不知何故，移動對象以彎曲的動畫，取決於速度的向量組合的x/y和尤其是S（步驟）我已經創建了這個JSBin：？！

http://jsbin.com/furomu/edit?html,js,console,output - （點擊init）。

是否有可能以某種方式將此「矢量」變成某種曲線來繪製平滑的運動？如果不是，我還需要其他什麼值才能將它變成彎曲運動？

//start at 50,50 
    //move to 150,125 
// Vector is 100/75 or v +1/+0.75 at 100 steps 


function Move(ox, oy, x, y){ 
    this.ox = ox; 
    this.oy = oy; 
    this.x = x 
    this.y = y 
    this.p; 
    this.v = {x: x - ox, y: y - oy}; 

    this.setup = function(){ 

    var p = {}; 
    var v = this.v; 

    if (this.x > this.y){ 
     p.s = v.y; 
     p.y = 1; 
     p.x = v.x/v.y; 
    } 
    else { 
     p.s = v.x; 
     p.x = 1; 
     p.y = v.y/v.x; 
    } 

    this.p = p; 
    } 

    this.setup(); 
} 


function Ship(x, y){ 
    this.x = x; 
    this.y = y; 

    this.moves = []; 

    this.draw = function(){ 
    this.drawSelf(); 
    this.drawTarget(); 
    } 

    this.create = function(){ 
    var move = new Move(this.x, this.y, 150, 125); 
    this.moves.push(move); 
    } 

    this.update = function(){ 
    var m = this.moves[0]; 
    var self = this; 

    anim = setInterval(function(){   
     ctx.clearRect(0, 0, res, res); 
     self.x += m.p.x; 
     self.y += m.p.y; 
     m.p.s--; 

    self.draw(); 

     if (m.p.s == 0){ 
     clearInterval(anim); 
     } 
    }, 30); 
    } 

    this.create(); 
    this.draw(); 
    this.update(); 
} 

function init(){ 
    var ship = new Ship(50, 50); 
     }

來源

2016-08-16 user431806

你需要至少3個點來定義曲線。 Google「splines」。如果你有一個速度，你可以用它來定義第三個點，從初始速度方向的起點向前投影。 – samgak