[JavaScript][HTML5]Canvas, ruch obiektu po krzywej Opcje

[CuteOne]

Witam, mój problem dotyczy poruszania się obiektu pod odpowiednim kątem. Zacznę może od graficznego przedstawienia tego co zamierzam osiągnąć:


Pierwszy przykład z obrazka jest prawidłowym ruchem obiektu(niebieskiej kulki) po krzywej, którego mimo moich usilnych starań nie jestem w stanie osiągnąć. Drugi przykład to dodawanie do aktualnej pozycji obiektu(x,y) jednego pixela. Niestety tego typu rozwiązanie zawsze daje kąt 45 stopni a gdy y osiągnie max. wartość obiekt zaczyna poruszać się po linii prostej.

Trzeci przykład to "porcjowanie" czyli podczas ruchu obiektu co 2px w pozycji x dodawany jest 1px w pozycji y

[JAVASCRIPT] pobierz, plaintext 
var obiekt = {x: 10, y: 10, cx:48, cy:18};
var p = 0;
var proporcja = Math.floor(obiekt.cx / obiekt.cy); // proporcja = 2
 
// pętla animacji
obiekt.x += 1;
if(p == proporcja) {
 obiekt.y += 1; // co 2 przejścia pętli zostaje dodany 1px do y
 p++;
}
// rysowanie obiektu
[JAVASCRIPT] pobierz, plaintext 

x - pozycja startowa na osi X
y - pozycja startowa na osi Y
cx - pozycja końcowa na osi X
cy - pozycja końcowa na osi Y

Jak widać na obrazku takie rozwiązanie również nie wypali ponieważ powstaną schodki

Próbowałem obliczyć kąt pod jakim obiekt powinien się poruszać za pomocą funkcji atan2() niestety nie byłem w stanie dla każdego przejścia pętli obliczyć aktualnego położenia obiektu.

Pomysły mi się skończyły, więc piszę do was może ktoś zna rozwiązanie mojego problemu?