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ść

Obrót

Oprócz przesuwania siatki, możemy ją również obracać za pomocą funkcji rotate(). Funkcja ta przyjmuje jeden argument, będący liczbą stopni o którą chcemy coś obrócić.
W wersji ProcessingJS którą używamy w Khan Academy, wszystkie funkcje powiązane z rotacją domyślnie mają ustawioną jednostkę stopni, ale mogą być również przestawione na radiany, podstawową jednostkę miary kątowej. Jeśli preferujecie używać radianów, możecie dodać angleMode = "radians"; na początku waszego programu.
Gdy mówimy o kątach za pomocą stopni, mówimy, że pełne koło ma 360°. Gdy mówimy o kątach w radianach, pełne koło ma 2π radianów. Oto wykres, który pozwoli Wam przypomnieć sobie zależność między stopniami i radianami na przykładzie koła:
Chcesz przypomnieć sobie, lub nauczyć się na temat pomiarów kątowych? Zapraszamy do naszego działu "Podstawy kątów i pomiarów" w Khan Academy.
Spróbujmy czegoś łatwego: obracanie kwadratu o 45 stopni:
Hej, co się stało? Jak to się stało, że kwadrat przesunął się i został ucięty? Odpowiedź jest prosta: kwadrat się nie poruszył. Siatka została obrócona. Oto, co tak na prawdę się wydarzyło. Jak widać, na obróconym układzie współrzędnych kwadrat wciąż ma lewy górny róg w (40,40).

Obracanie w prawidłowy sposób

Poprawną metodą obracania kwadratu jest:
  • Przesunięcie środka układu współrzędnych (0,0) do miejsca, w którym ma znajdować się lewy górny róg kwadratu.
  • Obrócenie siatki o 45° (π/4 radianów)
  • Narysowanie kwadratu w środku układu.
Oto program obracający kwadrat, wykonany w poprawny sposób. Zauważ różnicę w kodzie: program wywołuje translate(40,40);, następnie rect(**0, 0,**;40, 40); zamiast po prostu rect(**40, 40,** 40, 40);.

Ten artykuł jest adaptacją Transformacji 2D napisanej przez Davida Eisenberga wykorzystaną na licencji Creative Commons Attribution-NonCommercial-ShareAlike.

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.