Animacija sekvence transformacija potrebnih za zrcaljenje na pravcu u 2D
Zrcaljenje na osi X
Jednostavno - mijenja se predznak koordinate y...
Pritiskom tipke 'A' (veliko A) element se prebacuje gore-dolje preko x osi.
Zrcaljenje na osi Y
Jednostavno - mijenja se predznak koordinate x...
Pritiskom tipke 'S' (veliko S) element se prebacuje lijevo-desno preko y osi.
Zrcaljenje na pravcu
Kako bi mogli zrcaliti neki element na proizvoljnom pravcu potrebno je obaviti 5 koraka.
Podsjetimo se sljedećeg:
Zp = T(0,l) R(kut) Zx R(-kut) T(0,-l)
Ovaj izraz nam govori sljedeće - ako želimo zrcaliti neki element na pravcu potrebno
je redom vršiti navedene operacije (translacija, rotacija, zrcaljenje, rotacija, translacija)
Slika nam prikazuje početni raspored i svaki raspored elementa nakon izvršene neke od operacija. Operacije (međukoraci)
se izvode pritiskom na odgovarajuću tipku.
- Tipka "H" -> Translacija u ishodište (0, -l)
- Tipka "J" -> Rotacija za kut arctan(k) - pravac se poklopi s x-osi
- Tipka "K" -> Zrcaljenje s obzirom na x-os
- Tipka "L" -> Rotacija za kut -arctan(k)
- Tipka "M" -> Translacija (0, l)
Crveni pravac nam je pravac oko kojeg se zrcali početni plavi trokut. Konačni crveni trokut je zrcalna slika na pravcu početnog plavog trokuta.
HTML5 canvas pruža brojne mogućnosti za prikaz raznih elementa, njihovo pomicanje, zrcaljenje, rotaciju, animacije...
Međutim, važno je spomenuti da sam canvas ovisi o JavaScriptu te je za neke složenije grafičke prikaze i animacije potrebno dobro poznavanje
tog jezika. Preporuka je naravno da se koriste JavaScript biblioteke kao što je jQuery.
Putem ove poveznice može se preuzeti JavaScript kod ovih primjera.