Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][HTML5]Canvas
Forum PHP.pl > Forum > Przedszkole
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
  1. var obiekt = {x: 10, y: 10, cx:48, cy:18};
  2. var p = 0;
  3. var proporcja = Math.floor(obiekt.cx / obiekt.cy); // proporcja = 2
  4.  
  5. // pętla animacji
  6. obiekt.x += 1;
  7. if(p == proporcja) {
  8. obiekt.y += 1; // co 2 przejścia pętli zostaje dodany 1px do y
  9. p++;
  10. }
  11. // 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 sad.gif

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 smile.gif 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 smile.gif 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.
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-yA)(xB-xA) - (yB-yA)(x-xA) = 0
Zatem:
(y-10)(45-10)-(18-10)(x-10) = 0
35y - 350 - 8x + 80 = 0
35y = 8x + 270
y = (8x + 270) / 35
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.