Otáčení 3D tvarů

Otáčení věcí ve třech rozměrech zní komplikovaně a opravdu takové může být, ale existují i jednoduché způsoby otáčení. Představíme-li si například otáčení krychle kolem osy z (která směřuje mimo obrazovku), ve skutečnosti jen otáčíme čtverec ve dvou rozměrech:

Proč je dobré umět trigonometrii

Věci můžeme dále zjednodušit tím, že se podíváme na jeden uzel na pozici (x, 0). Pomocí jednoduché trigonometrie zjistíme, že poloha bodu po otočení o úhel θ kolem počátku je:

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

Pokud nerozumíš tomu, odkud se tyto rovnice vzaly, toto video ti může pomoci.

Otáčení bodu kolem počátku

Výše uvedený příklad nám umožňuje otáčet bod, který začíná na ose x kolem počátku, ale co když se nenachází na ose x? To už vyžaduje trochu pokročilejší trigonometrii. Pokud nazveme vzdálenost mezi bodem (x, y) a počátkem

r

, a úhel mezi přímkou (x, y) a osou x

α

, platí následující:

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

Otočíme-li se o

β

vzhledem k bodu (x', y'), pak:

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

Za použití trigonometrických pravidel získáme:

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

Po nahrazení výše uvedených hodnot x a y získáme rovnici pro nové souřadnice jako funkci starých souřadnic a úhlu otočení:

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

Tvorba rotační funkce

Za pomocí matematiky teď můžeme napsat funkci, která otočí uzel, nebo ještě lépe, naše pole uzlů, kolem osy z. Tato funkce bude iterovat všemi uzly v poli uzlů, vyhledá aktuální souřadnice x a y a poté je nastaví. Ukládáme sin(theta) a cos(theta) mimo cyklus, aby nám je stačilo spočítat pouze jednou:

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;
   }
};

Pro otočení krychle o 30 stupňů zavoláme funkci takto:

rotateZ3D(60);

Otočenou krychli můžeš vidět níže - je o něco zajímavější než předtím, ale ne o moc:

Otáčení ve třech rozměrech

Nyní můžeme svou krychli otáčet ve dvou rozměrech, ale stále vypadá jako čtverec. Co když chceme otáčet krychli kolem osy x (vodorovná osa)? Když si představíme, že se během otáčení kolem osy x na naši krychli díváme shora, uvidíme jenom otáčející se čtverec, stejně jako při otáčení kolem osy z.

Můžeme použít naši trigonometrii a funkci z předchozího kódu a jednoduše znovu označit osu tak, aby se osa z stala osou x. V tomto případě se souřadnice x uzlu nemění, mění se pouze y a 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;
   }
};

A můžeme použít stejný argument k vytvoření funkce, která otáčí naši krychli kolem osy 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;
   }
};

Nyní, když máme tyto funkce definované, můžeme otočit krychli o 60 stupňů kolem dvou os:

rotateX3D(60);
rotateY3D(60);

Níže můžeš vidět celý kód. Zkus použít posuvník čísel ke změně hodnot ve voláních funkcí.

Směr otáčení

Když otáčíme objekt, můžeme jej otáčet ve směru hodinových ručiček nebo proti směru hodinových ručiček. Můžeš říct, jakým směrem se naše krychle otáčí? Pokud nevíš, posuň se na horní stranu programu a podívej se, jak se krychle otáčí kolem osy z, pak se vrať sem.

Pokud znáš 3D otáčení z hodin matematiky, možná tě to překvapí. Kladné otáčení je obvykle proti směru hodinových ručiček, jak je znázorněno v následujícím diagramu:

Tento diagram zobrazuje tzv. pravoruký souřadnicový systém, kde zatočení tvé pravé ruky kolem osy ukáže směr rotace.

V našem prostředí ProcessingJS však osa y míří směrem dolů místo směrem nahoru.

Toto je levoruký souřadnicový systém, kde otáčení levé ruky kolem každé osy ukazuje směr otáčení. V tomto systému jsou kladné rotace prováděny ve směru hodinových ručiček.

Mnoho počítačových grafických systémů používá levoruké souřadnicové systémy, protože dává smysl, aby byl bod

[0, 0]

v levém horním rohu obrazovky.

Interakce uživatele

Můžeme otáčet krychli přidáním volání funkcí, ale je mnohem užitečnější (a uspokojivější), pokud můžeme umožnit uživateli otáčet krychli pomocí myši. K tomu potřebujeme vytvořit funkci mouseDragged(). Tato funkce je automaticky volána při přetažení myši.

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

mouseX a mouseY jsou vestavěné proměnné, které obsahují aktuální pozici myši. pmouseX a pmouseY jsou vestavěné proměnné, které obsahují pozici myši v předchozím snímku. Takže pokud se souřadnice x zvýšila (pohybujeme myší vpravo), pošleme kladnou hodnotu do rotateY3D() a otočíme krychli proti směru hodinových ručiček kolem osy y.

Na příkladu níže se o tom můžeš přesvědčit.

Chceš se zapojit do diskuze?

Přihlášení

Setřídit podle:

Zatím žádné příspěvky.

Umíš anglicky? Kliknutím zobrazíš diskuzi anglické verze Khan Academy.