[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?

[JohnnyB]

chyba raczej Math.tan, jeśli masz podany kąt. Pamiętaj tylko, że wartość kąta podaje się w radianach.

[CuteOne]

raczej nie atan2 ładnie wylicza kąt biorąc pod uwagę położenie obiektu na osi x,y bez konieczności obliczania kąta alfa -> przeliczania na radiany.

Problemem jest uzyskanie położenia obiektu po każdorazowym przejściu pętli.

Ten post edytował CuteOne 11.08.2011, 19:43:19

[JohnnyB]

a co masz dane - punkt początkowy i końcowy? Jeśli tak, to najprościej skorzystać z równania prostej y=ax+b

[mortus]

Równanie prostej przechodzącej przez zadane punkty: (y-y_A)(x_B-x_A) - (y_B-y_A)(x-x_A) = 0
Zatem:
(y-10)(45-10)-(18-10)(x-10) = 0
35y - 350 - 8x + 80 = 0
35y = 8x + 270
y = (8x + 270) / 35