Funzionamento del programma
Il programma anima un'immagine mediante la movimentazione di parti di essa secondo percorsi prestabiliti; lo scopo è dare un senso di tridimensionalità a immagini 3d, movimentando a velocità diverse aree che risulterebbero a distanze diverse dall'osservatore. E' però anche possibile movimentare aree corrispondenti ad oggetti che nel ambiente inquadrato dall'immagine risulterebbero in movimento.
Per rendere possibile l'animazione differenziata, ogni immagine deve essere precedentemente suddivisa nelle aree di interesse mediante cancellazione della parte di immagine non di interesse; è fondamentale che la cancellazione venga effettuata usando il canale trasparente dell'immagine, per permettere la sovrapposizione delle varie aree a riformare l'immagine originale.
Ad esempio, la seguente immagine:
è stata così suddivisa:
in modo da produrre queste singole immagini:
Ecco un esempio di una di queste immagini: sono stati ritagliati solo i rami di un cespuglio; in questo modo è possibile sovrapporre i rami in movimento al personaggio di Dante.
Una volta create le singole aree da movimentare, bisogna definirne i movimenti nel file move.js , come spiegato in apposita pagina.
Tutte le immagini vengono precaricate all'apertura della pagina creando dinamicamente oggetti DOM "img" memorizzati nell'array imgDummy[] e poi "appese" tutte al DIV unico imgContainer , ma non vengono visualizzate: gli oggetti img vengono invece usati come sorgenti per essere incollati dentro a una canvas, tramite context.drawImage() , nella posizione desiderata, partendo da quella memorizzata nel file di configurazione, e modificandola in loop come da parametri indicati nello stesso file.