Główna zawartość

Ruch zgodnie z wektorem prędkości

Wróćmy do jednego z naszych pierwszych przykładów, tego gdzie obiekt typu Mover przyspieszał w kierunku myszki.

Mogliście zauważyć, że wszystkie kształty które do tej pory rysowaliśmy to okręgi. Jest to dla nas wygodne z kilku powodów, na przykład dlatego, że nie musimy martwić się o obracanie tych figur. Obróćmy okrąg, a dalej będzie wyglądał dokładnie tak samo. Przychodzi jednak taki moment w życiu programisty zajmującego się ruchem, kiedy chce narysować na ekranie coś, co wskazuje na kierunek ruchu. Może rysujesz mrówkę, samochód lub statek kosmiczny. A kiedy mówimy "wskazuje na kierunek ruchu," mamy na myśli “obraca się zgodnie z wektorem prędkości.” Prędkość to wektor, zawierająca współrzędne x i y, ale aby obracać coś w ProcessingJS, potrzebujemy kąta. Narysujmy nasz schemat trygonometryczny raz jeszcze z wektorem prędkości pewnego obiektu:

Dobrze. Wiemy, że wzór na tangens to:

t, a, n, g, e, n, s, left parenthesis, k, ą, t, a, right parenthesis, equals, start fraction, p, r, ę, d, k, o, s, with, acute, on top, c, with, acute, on top, start subscript, y, end subscript, divided by, p, r, ę, d, k, o, s, with, acute, on top, c, with, acute, on top, start subscript, x, end subscript, end fraction

Problemem jest to, że znamy prędkość, ale nie znamy kąta. Musimy uzyskać z tego wzoru kąt. To jest moment, w którym poznamy coś takiego jak odwrotny tangens, czasami określane mianem arcus tangensa lub tan-1. (Istnieje również arcus sinus i arcus cosinus.)

Jeżeli tangens pewnej wartości a równa się b, wtedy arcus tangens wartości b równa się a. Dla przykładu:


jeżeli	t, a, n, g, e, n, t, left parenthesis, a, right parenthesis, equals, b
możemy zapisać	a, equals, a, r, c, t, a, n, g, e, n, t, left parenthesis, b, right parenthesis

Widzicie, na czym polega odwrotność? Powyższe działanie pozwoli nam znaleźć kąt:


jeżeli	t, a, n, g, e, n, t, left parenthesis, a, n, g, l, e, right parenthesis, equals, v, e, l, o, c, i, t, y, start subscript, y, end subscript, slash, v, e, l, o, c, i, t, y, start subscript, x, end subscript
możemy zapisać	a, n, g, l, e, equals, a, r, c, t, a, n, g, e, n, t, left parenthesis, v, e, l, o, c, i, t, y, start subscript, y, end subscript, slash, v, e, l, o, c, i, t, y, start subscript, x, end subscript)

Teraz, gdy mamy wzór, pora odnieść się do funkcji display() naszego obiektu Mover. Zauważcie, że w ProcessingJS funkcja dla arcus tangensa nazywa się atan(). JavaScript zapewnia również natywną metodę Math.atan() (oraz pozostałe podstawowe funkcje trygonometryczne), ale skupmy się na tych dostarczanych przez ProcessingJS.

Mover.prototype.display = function () {
  var angle = atan(this.velocity.y / this.velocity.x);

  stroke(0, 0, 0);
  fill(127, 127, 127);
  pushMatrix();
  rectMode(CENTER);
  translate(this.position.x, this.position.y);
  rotate(angle);
  rect(0, 0, 30, 10);
  popMatrix();
};

Powyższy kod jest już prawie tym, czego potrzebujemy oraz prawie działa. Mamy jednak pewien problem. Rozważmy dwa wektory prędkości przedstawione poniżej.

Pomimo, że wydają się podobne, te dwa wektory mają inny zwrot - zupełnie przeciwny! jednak, jeżeli odniesiemy nasz wzór do kąta każdego wektora…

V1 ⇒ kąt = atan(3/-4) = atan(-0,75) = -0,644 radianów = -57 stopni
V2 ⇒ kąt = atan(-3/4) = atan(-0,75) = -0,644 radianów = -57 stopni

…otrzymamy ten sam kąt dla obu wektorów. To nie może być prawda; te wektory mają przeciwne zwroty! To dosyć pospolity problem podczas pracy z grafiką komputerową. Zamiast po prostu używać atan() z paroma wyrażeniami warunkowymi do rozważenia obu scenariuszy, ProcessingJS (tak jak i JavaScript i większość programistycznych środowisk) posiada funkcję atan2() która robi to za nas.

Mover.prototype.display = function () {
  var angle = atan2(this.velocity.y, this.velocity.x);

  stroke(0, 0, 0);
  fill(127, 127, 127);
  pushMatrix();
  rectMode(CENTER);
  translate(this.position.x, this.position.y);
  rotate(angle);
  rect(0, 0, 30, 10);
  popMatrix();
};

Aby ułatwić to jeszcze bardziej, obiekt PVector posiada funkcję heading(), która zajmuje się wywoływaniem atan() za Was, dzięki czemu możecie uzyskać kąt kierunku dwuwymiarowego w radianach dla dowolnego PVector.

Oto jak wygląda skończony program. Pojeździjcie po nim myszką i zobaczcie, jak się obraca!

Ten kurs "Symulacje Natury" jest pochodną z "Natury Kodu " stworzonej przez Daniela Shiffmana, użytej pod licencją Creative Commons Attribution-NonCommercial 3.0 Unported License.

Chcesz dołączyć do dyskusji?

Zaloguj się

Sortuj według

Na razie brak głosów w dyskusji

Rozumiesz angielski? Kliknij tutaj, aby zobaczyć więcej dyskusji na angielskiej wersji strony Khan Academy.

Programowanie

Kurs: Programowanie > Rozdział 5

Ruch zgodnie z wektorem prędkości

Chcesz dołączyć do dyskusji?