Eltolás

Amikor a ProcessingJS használatával programokat készítesz itt a Khan Academyn, a kimenet egy vásznon jelenik meg, ami úgy viselkedik, mint egy milliméterpapír. Az alakzatok rajzolásához megadjuk a koordinátáit a milliméterpapíron.

Nézzünk egy egyszerű téglalapot, amit a rect(20, 20, 40, 40) kóddal rajzolunk ki. A koordináta-rendszert (vagy milliméterpapírt) szürkével jelöltük, és 200 pixelszer 200 pixelesként ábrázoltuk (az alapértelmezett 400x400-as méret helyett), hogy a példa kép kisebb méretű legyen. Láthatod, hogy a téglalap az x=20, y=20 pontban van, 40 a szélessége és a magassága is:

Ha a téglalapot 60 egységgel jobbra, és 80 egységgel lefele szeretnéd mozgatni, megváltoztathatod a koordinátáit úgy, hogy a kezdő x és y pontokhoz hozzáadod ezeket értékeket: rect(20 + 60, 20 + 80, 40, 40), ezzel a téglalap máshol fog megjelenni. (A nyilat a könnyebb érthetőség kedvéért rajzoltuk oda.)

Van azonban egy érdekesebb megoldás is erre: mozgassuk inkább a milliméterpapírt! Ha a milliméterpapírt 60 egységgel jobbra és 80 egységgel lejjebb mozgatod, ránézésre ugyanazt az eredményt fogod kapni. A koordináta-rendszer mozgatását eltolásnak hívjuk.

Fontos megjegyeznünk, hogy az előző ábrán maga a téglalap nem mozdult el sehova. A bal felső sarka továbbra is a (20, 20) pontban van. Transzformációk használatánál a kirajzolt alakzatok helyzete sose változik; helyette a koordináta-rendszeré változik!

Íme egy program, ami megrajzolja az eredeti téglalapot, majd megrajzolja pirossal egy új helyen a koordináták megváltoztatásával, végül megrajzolja kékkel egy új helyen, a négyzetháló mozgatásával (translate() használatával). A kitöltő színek áttetszőek, ezért láthatod, hogy az átfedő piros és kék színek egy lila téglalapot alkotnak, ugyanazon a helyen. Csak a mozgatásukhoz használt módszer változott meg. Játszadozz az alábbi számokkal, hogy magad is lásd:

Nézzük meg az eltolási kódot részletesen. A pushMatrix() egy beépített függvény, ami a koordináta-rendszer aktuális helyzetét elmenti. A translate(60, 80) elmozgatja a koordináta-rendszert 60 egységgel jobbra és 80 egységgel lefelé. A rect(20, 20, 40, 40) kirajzol egy téglalapot ugyanarra pozícióra, ahova az eredetit rajzolta. Ne feledd, azok, amiket rajzolunk, nem mozognak – a koordináta-rendszer mozog helyettük. Végül a popMatrix() visszaállítja a koordináta-rendszert arra az állapotra, amelyben az eltolás előtt volt.

Miért használjuk a pushMatrix()-ot és a popMatrix()-ot? Használhattad volna a translate(-60, -80)-ot arra, hogy a négyzethálót visszamozgasd az eredeti helyére. Amikor azonban már bonyolultabb műveleteket fogsz végezni a koordináta-rendszerrel, egyszerűbb lesz a pushMatrix()-ot és a popMatrix()-ot használni arra, hogy elmentsd és visszaállítsd az négyzetháló eredeti állapotát, ahelyett, hogy a műveleteket próbálnád egyenként visszacsinálni. Ennek a fejezetnek egy későbbi részében meg fogod tudni, hogy miért van ilyen furcsa nevük ezeknek a függvényeknek.

Lehet, hogy azt gondolod, egy koordináta-rendszer mozgatása sokkal több gonddal jár, mintha csak értékeket adnánk hozzá a koordinátákhoz. Egy egyszerűbb esetben, mint például az előbbi téglalap, igazad is van. De nézzünk most egy példát, ahol a translate() használata sokat könnyít:

Íme egy program, mely házak sorát rajzolja. Egy ciklust használ, ami meghívja a drawHouse() függvényt, mely az x-et és y-t, a ház bal felső sarka helyzetét veszi paraméterekként. Figyeld meg, hogy a drawHouse függvénynek nagyon sokat kell módosítgatnia a paramétereket azért, hogy a házat a megfelelő koordinátára rajzolja ki:

Mi történne, ha az új koordináták kiszámolása helyett a translate() függvényt használnánk? Ebben az esetben a rajzoló kód mindig ugyanoda rajzolná a házat: a bal felső sarka a (0, 0)-ban lenne, és magát az eltolást az eltolást elvégző függvényre hagyná inkább.

Ez nem jelenti azt, hogy mindig a translate()-et kell használnod új koordináták kiszámítása helyett. Ahogy más is, amit tanítunk, ez is csak egy eszköz az eszköztáradból, és rajtad múlik, hogy eldöntsd, mikor van értelme ezt az új translate() eszközt használnod!

A tananyag a 2D Transformations adaptációja, mely J David Eisenberg munkája, és a következő licenc alatt elérhető: Creative Commons Attribution-NonCommercial-ShareAlike.