If you're seeing this message, it means we're having trouble loading external resources on our website.

Jeżeli jesteś za filtrem sieci web, prosimy, upewnij się, że domeny *.kastatic.org i *.kasandbox.org są odblokowane.

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:
tangens(kąta)=prędkośćyprędkośćx
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żelitangent(a)=b
możemy zapisaća=arctangent(b)
Widzicie, na czym polega odwrotność? Powyższe działanie pozwoli nam znaleźć kąt:
jeżelitangent(angle)=velocityy/velocityx
możemy zapisaćangle=arctangent(velocityy/velocityx)
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?

Na razie brak głosów w dyskusji
Rozumiesz angielski? Kliknij tutaj, aby zobaczyć więcej dyskusji na angielskiej wersji strony Khan Academy.