Translacja/Przesunięcie

Gdy tworzysz program  używając ProcessingJS, wynik jest rysowany na płótnie, które działa tak samo jak papier milimetrowy. Aby narysować kształt, musisz podać jego współrzędne.

Jako przykład narysujemy prostokąt używając funkcji rect(20, 20, 40, 40). Układ współrzędnych (ładniejsza nazwa na "papier milimetrowy") jest wyświetlany na szaro. Aby nasz przykład nie zajmował tyle miejsca układ współrzędnych ma rozmiar 200 pikseli na 200 pikseli (zamiast standardowych 400x400). Na rysunku widzisz prostokąt o środku w x=20 i y=20, którego szerokość i wysokość wynosi 40:

Jeśli chcesz przenieść prostokąt 60 jednostek w prawo i 80 jednostek w dół możesz zmienić jego współrzędne dodając do x i y punkt początkowy: rect(20 + 60, 20 + 80, 40, 40). Dzięki temu figura pojawi się w innym miejscu. (Dodaliśmy strzałkę dla efektu)

Tymczasem istnieje ciekawsza metoda na przesunięcie figury: przesunięcie całego układu. Jeśli przesuniesz płótno 60 jednostek w prawo i 80 jednostek w dół otrzymasz dokładnie taki sam efekt wizualny. Przenoszenie układu współrzędnych jest nazywane translacją.

Ważną rzeczą do zapamiętania w powyższym przykładzie jest fakt, że prostokąt nie zmienił swojej pozycji w układzie współrzędnych. Jego lewy górny róg w dalszym ciągu ma współrzędne (20,20). Gdy używasz translacji, kształty narysowane przez ciebie nie zmieniają pozycji. Swoje położenie zmienia jedynie układ współrzędnych.

Poniżej widzisz program, który rysuje prostokąt, Czerwony prostokąt został narysowany przez zmianę współrzędnych. Niebieski kwadrat został narysowany w tym samym miejscu przez przesunięcie układu (translate()). Kolory wypełnienia są przezroczyste, żebyś mógł zobaczyć, że czerwony i niebieski kwadrat stworzyły fioletowy kwadrat, który jest dokładnie w tym samym miejscu. Kwadraty są w tym samym położeniu. Zmienił się sposób w jaki je przesunęliśmy. Pobaw się liczbami poniżej i przetestuj to sam:

Popatrzmy na nasz kod trochę bardziej szczegółowo. PushMatrix() jest wbudowaną funkcją, która zapisuje aktualną pozycję w układzie współrzędnych. Funkcja translate(60, 80) przesuwa układ współrzędnych 60 jednostek w prawo i 80 jednostek w dół. Funkcja rect(20, 20, 40, 40) rysuje prostokąt w tym samym miejscu. Pamiętaj, rzeczy, które rysujesz nie przemieszczają się — przesuwa się układ współrzędnych. W końcu popMatrix() przywraca układ współrzędnych na miejsce, które zajmował przed translacją.

Dlaczego użyliśmy pushMatrix() i popMatrix()? Mogliśmy użyć translate(-60, -80), żeby przesunąć układ do swojej oryginalnej pozycji. Jednakże, gdy zaczniesz używać układu równań w bardziej wyrafinowany sposób, dużo prościej będzie użyć pushMatrix() i popMatrix() do zapisania i przywrócenia pozycji układu, niż cofania wszystkich twoich operacji. Później w tym dziale dowiesz się dlaczego te funkcje mają tak dziwne nazwy.

Może ci się wydawać, że manipulacja układem współrzędnych jest dużo bardziej skomplikowana niż dodanie przesunięcia do współrzędnych. Gdy weźmiemy pod uwagę prosty przykład taki jak prostokąt, wtedy masz rację. Ale popatrzmy na przykład, w którym translate() ułatwi nam życie.

Poniżej widzisz program, który rysuje rząd domów. Korzysta on z pętli, która wywołuje funkcję drawHouse(). Ta funkcja wykorzystuje współrzędne x i y jako parametry pozycji lewego górnego rogu domu. Weź pod uwagę, że funkcja drawHouse musi wykonać wiele operacji na parametrach, aby narysować dom w podanych współrzędnych:

Co by było, gdybyśmy użyli funkcji translate() zamiast liczenia nowych współrzędnych? W tym przypadku dom zawsze będzie narysowany w lewym górnym rogu o współrzędnych (0,0). Niech translacja wykona resztę pracy.

Nie oznacza to, że powinieneś faworyzować translate() nad liczeniem nowych współrzędnych. Jak większość rzeczy, których cię uczymy translacja to kolejne narzędzie w twoim przyborniku. Tylko od ciebie zależy gdzie użyjesz translate().

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