Główna zawartość

Programowanie

Kurs: Programowanie > Rozdział 4

Lekcja 7: Bryły w trzech wymiarach

Obracanie brył w trzech wymiarach

Obracanie obiektów w trzech wymiarach brzmi skomplikowanie i może takie być, ale istnieją pewne proste rotacje. Na przykład, jeżeli wyobrazimy sobie obracanie naszego sześcianu wokół osi z(tej, która wychodzi poza ekran), po prostu obracamy kwadrat w dwóch wymiarach:

Powód, dla którego warto nauczyć się trygonometrii

Możemy jeszcze bardziej uprościć sprawę, skupiając się tylko na jednym węźle na pozycji (x, 0). Za pomocą prostej trygonometrii możemy znaleźć położenie punktu po obrocie o kąt θ w odniesieniu do środka układu:

\begin{aligned} x^{'} = x \cdot \cos (θ) \\ y^{'} = x \cdot \sin (θ) \end{aligned}

Jeżeli nie wiecie skąd wzięły się te równania,ten film może wam pomóc.

Obracanie punktu względem środka układu współrzędnych

Powyższy przykład pozwala nam obrócić punkt, który przed obrotem znajduje się na osi x - co jednak mamy zrobić, jeżeli nie znajduje się on na osi x? Będzie to od nas wymagało trochę bardziej zaawansowanej trygonometrii. Jeżeli nazwiemy odległość pomiędzy punktem (x, y) i środkiem układu współrzędnych

r

, a kąt pomiędzy linią do (x, y) a osią x

α

, to:

\begin{aligned} x = r \cdot \cos (α) \\ y = r \cdot \sin (α) \end{aligned}

Jeżeli obracamy o

β

do punktu (x', y'), to:

\begin{aligned} x^{'} = r \cdot \cos (α + β) \\ y^{'} = r \cdot \sin (α + β) \end{aligned}

Wykorzystując tożsamości trygonometryczne, otrzymujemy:

\begin{aligned} x^{'} = r \cdot \cos (α) \cos (β) - r \cdot \sin (α) \sin (β) \\ y^{'} = r \cdot \sin (α) \cos (β) + r \cdot \cos (α) \sin (β) \end{aligned}

Podstawiając wartości za x i y otrzymamy równania, które zwracają nowe współrzędne. Równania te są funkcją przyjmującą zmienne w postaci starych współrzędnych i kąta obrotu:

\begin{aligned} x^{'} = x \cdot \cos (β) - y \cdot \sin (β) \\ y^{'} = y \cdot \cos (β) + x \cdot \sin (β) \end{aligned}

Kodowanie funkcji obracającej

Skoro znamy już podstawy matematyczne, możemy napisać funkcję obracającą węzeł, albo nawet lepiej - tablicę węzłów wokół osi z. Funkcja ta będzie iterować po wszystkich węzłach w tablicy, po czym na podstawie aktualnych wartości x i y wyznaczać nowe, po czym aktualizować je. Trzymamy sin(theta) i cos(theta) poza pętlą, gdyż dzięki temu obliczamy je tylko raz:

var rotateZ3D = function(theta) {
  var sinTheta = sin(theta);
  var cosTheta = cos(theta);
  for (var n = 0; n < nodes.length; n++) {
    var node = nodes[n];
    var x = node[0];
    var y = node[1];
    node[0] = x * cosTheta - y * sinTheta;
    node[1] = y * cosTheta + x * sinTheta;
  }
};

By obrócić sześcian o 30 stopni, używamy tej funkcji w następujący sposób:

rotateZ3D(60);

Możecie zobaczyć obracający się sześcian poniżej - jest odrobinę ciekawszy niż wcześniej, ale dalej nie aż tak, jak byśmy chcieli:

Obracanie w trzech wymiarach

Możemy teraz obracać nasz sześcian w dwóch wymiarach, ale przez to wciąż wygląda jak kwadrat. Co zrobić, jeżeli chcemy obrócić nasz sześcian wokół osi X (osi poziomej)? Jeżeli wyobrazimy sobie spoglądanie na nasz sześcian od góry podczas obracania go po osi X, widzielibyśmy tylko obracający się kwadrat tak, jak w przypadku obrotu względem osi Z.

Możemy wykorzystać nasze obliczenia trygonometryczne i funkcję napisaną wyżej, zmieniając oś tak, aby w tym kodzie oś Z została tym razem zastąpiona przez oś X. W związku z tym, podczas wykonania tej funkcji współrzędna x się nie zmienia, za to zmieniają się współrzędne y i z;

var rotateX3D = function(theta) {
  var sinTheta = sin(theta);
  var cosTheta = cos(theta);
  for (var n = 0; n < nodes.length; n++) {
    var node = nodes[n];
    var y = node[1];
    var z = node[2];
    node[1] = y * cosTheta - z * sinTheta;
    node[2] = z * cosTheta + y * sinTheta;
  }
};

Analogicznie możemy stworzyć funkcję która obróci nasz sześcian wokół osi Y:

var rotateY3D = function(theta) {
   var sinTheta = sin(theta);
   var cosTheta = cos(theta);
   for (var n = 0; n < nodes.length; n++) {
      var node = nodes[n];
      var x = node[0];
      var z = node[2];
      node[0] = x * cosTheta + z * sinTheta;
      node[2] = z * cosTheta - x * sinTheta;
   }
};

Mając zdefiniowane te funkcje, możemy obrócić nasz sześcian o 60 stopni wokół pozostałych dwóch osi:

rotateX3D(60);
rotateY3D(60);

Gotowy kod możecie przejrzeć poniżej. Spróbujcie wykorzystać interfejs do zmiany wartości, aby zobaczyć działanie funkcji dla różnych parametrów.

Kierunek obrotu

Możemy obracać nasz obiekt w kierunku zgodnym z ruchem wskazówek zegara lub w kierunku przeciwnym do ruchu wskazówek zegara. Możesz powiedzieć, w jakim kierunku obraca się nasz sześcian? Jeśli nie masz pewności, jak odpowiedzieć, przewiń ten artykuł do samej góry i powtó©z sobie obrót sześcianu wokół osi Z, a następnie wróć tutaj.

Jeśli znasz już obroty w 3D z matematyki, może spotkać Cię niespodzianka. Dodatki kierunek obrotu jest zazwyczaj zdefiniowany jako kierunek przeciwny do ruchu wskazówek zegara, jak pokazano na poniższym rysunku:

Na rysunku przedstawiono prawoskrętny układ współrzędnych. Jeśli Twoja dłoń obraca się od osi X w kierunku osi Y, to obracana takim ruchem śruba prawoskrętna swoim przemieszczeniem wskazuje kierunek osi Z.

Jednak w naszym środowisku ProcessingJS oś Y wskazuje w dół, a nie w górę.

Odpowiada to lewoskrętnemu układowi współrzędnych, w którym kierunek obrotu zgodny z ruchem wskazówek zegara jest kierunkiem dodatnim.

Układy lewoskrętne napotkasz w grafice komputerowej bardzo często, ponieważ wygodnie jest umieścić punkt

[0, 0]

w lewym górnym rogu ekranu.

Interakcja z użytkownikiem

Możemy obracać sześcian za pomocą wywołań funkcji, ale bardziej przydatne (i dające więcej satysfakcji) będzie umożliwienie osobie oglądającej obracanie sześcianu za pomocą jej myszki. Potrzebujemy do tego funkcji mouseDragged(). Ta funkcja jest wywoływana za każdym razem, gdy przeciągamy kursorem po ekranie mając wciśnięty przycisk myszy.

mouseDragged = function() {
  rotateY3D(mouseX - pmouseX);
  rotateX3D(mouseY - pmouseY);
};

mouseX i mouseY to wbudowane zmienne, które zawierają aktualne pozycje myszki. pmouseX i pmouseY to wbudowane zmienne, które zawierają położenie myszki w poprzedniej klatce. Tak więc, jeżeli wzrosła wartość współrzędnej x (przesunęliśmy myszkę w prawo), wysyłamy wartość dodatnią do rotateY3D() i obracamy sześcian wokół osi y przeciwnie do ruchu wskazówek zegara.

Możecie to zaobserwować poniżej.

Chcesz dołączyć do dyskusji?

Zaloguj się

Sortuj według

Na razie brak głosów w dyskusji

Rozumiesz angielski? Kliknij tutaj, aby zobaczyć więcej dyskusji na angielskiej wersji strony Khan Academy.