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).

Poprawną metodą obracania kwadratu jest:

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.