Posunutí

Když zde vytvoříš program pomocí ProcessingJS, výstup bude nakreslen na plátno, které má funkci milimetrového papíru. Chceš-li nakreslit tvar, musíš zadat jeho souřadnice na tomto papíru.

Jako příklad je zde jednoduchý čtverec nakreslený kódem rect(20, 20, 40, 40). Souřadnicový systém (vhodnější způsob popisu milimetrového papíru) je znázorněn šedě, a pro zachování menší velikosti příkladových obrázků je zobrazený souřadnicový systém velikosti 200 pixelů na 200 pixelů (místo výchozí velikosti 400x400). Zde vidíš, že se obdélník nachází v x=20, y=20 se šířkou a výškou rovných 40:

Pokud chceš čtverec přesunout o 60 jednotek doprava a 80 jednotek dolů, můžeš změnit souřadnice přičtením k jejich výchozímu x a y: rect(20 + 60, 20 + 80, 40, 40) a obdélník se objeví na jiném místě. (Pro dramatický efekt jsme tam vložili šipku.)

Existuje ale zajímavější způsob, jak to udělat: posunout namísto toho samotný milimetrový papír. Pokud přesuneš milimetrový papír o 60 jednotek doprava a 80 jednotek dolů, dostaneš ten samý vizuální výsledek. Přesun souřadnicového systému se nazývá posun.

Je důležité všimnout si toho, že v předchozím diagramu nedošlo k žádnému posunutí čtverce. Jeho levý horní roh je stále v (20, 20). Používáš-li transformace, tebou kreslené tvary nikdy nemění polohu, polohu mění pouze souřadnicový systém.

Zde je program, který nakreslí původní čtverec, pak ho vykreslí červeně na novém místě pomocí změny jeho souřadnic a pak ho nakreslí modře na novém místě pomocí přesunu souřadnic (za použití translate()). Barvy výplně jsou průsvitné, takže můžeš vidět červenou a modrou, jak se překrývají a vytvářejí fialový čtverec, který je prakticky na stejném místě. Změnila se pouze metoda použita k jejich přesunu. Pohraj si s čísly níže a vyzkoušej si to:

Podívejme se na kód posunu podrobněji. pushMatrix() je vestavěná funkce, která ukládá aktuální polohu souřadnicového systému. translate(60, 80) přesune souřadnicový systém 60 jednotek doprava a 80 jednotek dolů. rect(20, 20, 40, 40) nakreslí obdélník na stejné místo, kde byl původně. Pamatuj, že věci, které kreslíš, se nepohybují — místo nich se pohybuje souřadnicová soustava. Nakonec popMatrix() obnoví soustavu souřadnic do takové podoby, v jaké byla před provedením posunu.

Proč používat pushMatrix() a popMatrix()? Stačilo by použít translate(-60, -80) pro přesun mřížky zpět na původní pozici. Když však začneš se souřadnicovým systémem provádět složitější operace, je snazší použít pushMatrix() a popMatrix() k uložení a obnovení stavu místo zpětného vrácení všech tvých operací. Později v této sekci zjistíš, proč mají tyto funkce tak zvláštní jména.

Možná ti připadá, že je zvednutí a přesunutí souřadnicového systému mnohem složitější než jen přičtení k souřadnicím. U jednoduchých příkladů, jako je čtverec, máš pravdu. Podívejme se však na příklad, kdy translate() opravdu usnadňuje život.

Zde je program, který kreslí řadu domů. Používá cyklus, který volá funkci drawHouse(), která jako své parametry používá polohu x a y levého horního rohu domu. Všimni si, že funkce drawHouse musí provést spoustu operací s parametry, aby byl dům nakreslen v daných souřadnicích:

Co kdybychom místo počítaní nových souřadnic použili funkci translate()? V tomto případě kód vykreslí dům pokaždé na stejném místě s jeho levým horním rohem v (0, 0) a přenechá všechnu práci posunu.

To neznamená, že máš vždy upřednostňovat translate() místo výpočtu nových souřadnic. Stejně jako u většiny toho, co vyučujeme, se jedná jen o další nástroj ve tvé skříňce nástrojů. Bude jen na tobě určit, kdy bude dávat smysl tento nový nástroj translate() používat.

Tento článek je adaptací 2D Transformace od J David Eisenberga, používaný pod Creative Commons Attribution-NonCommercial-ShareAlike License.