Główna zawartość
Programowanie
Kurs: Programowanie > Rozdział 5
Lekcja 6: Obroty- Kąty i jednostki
- Wyzwanie: Kręcąca się pałeczka
- Prędkość kątowa
- Wyzwanie: Staczający się głaz
- Trygonometria
- Stosunki trygonometryczne w trójkątach prostokątnych
- Ruch zgodnie z wektorem prędkości
- Wyzwanie: Skręcający samochód
- Współrzędne biegunowe
- Wyzwanie: Malujący spiralę
- Projekt: Niszczyciel asteroid
© 2023 Khan AcademyWarunki użytkowaniapolitykę prywatnościInformacja o plikach cookie
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:
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
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