Try it now: https://jumpjack.github.io/Divina-Commedia-Animata/index.html
Wiki: https://github.com/jumpjack/Divina-Commedia-Animata/wiki
Le più belle illustrazioni della Divina Commedia, di Gustave Dorè e altri autori, animate e arricchite con effetti di tridimensionalità.
Esistono molte edizioni cartacee di lusso della Divina Commedia, impreziosite dalle bellissime stampe di Gustave Dorè e altri grandi artisti del passato. Adesso è possibile godere di queste illustrazioni, nella lettura della Divina Commedia, in forma più moderna e coinvolgente, grazie all'animazione di oggetti e personaggi delle illustrazioni.
Il programma è strutturato in modo che chiunque possa aggiungere ulteriori immagini animate, semplicemente aggiungendo in un array elementi che elencano quali parti dell'immagine devono venire spostate e in che direzione; unica vera difficoltà è modificare manualmente le immagini in modo da ricostruire a mano le parti di sfondo che nell'originale sono coperte dagli oggetti che si andranno ad animare.
Le immagini devono essere salvate in formato PNG con trasparenza abilitata, e memorizzate nell'array nella sequenza con cui devono sovrapporsi l'una all'altra per coprire correttamente sfondo e oggetti più distanti.
Ogni immagine è rappresentata da un oggetto così strutturato:
{
"id" : "leone",
"canto": "01",
"cantica": "01",
"verso": "16",
"text": "", // Testo a cui si riferisce l'immagine
"areas" : [
{
"id" : "cielo",
"name" : "cielo",
"class" : "cielo",
"src" : "cielo.png",
"layerOrder" : 0, // 0 = background
"move" : {
"type" : "simple", // ="path" if multiple points (to be implemented)
"points" : [], // empty if type is "simple"
"xstart" : -20,
"ystart" : 0,
"xinc" : 1.5,
"yinc" : 0
}
},
// altri elementi/aree da far muovere nell'immagine
}
]
}
Ogni immagine/oggetto è membro dell'array "images" contenuto nell'oggetto principale "movements" nel file "move.js":
movements = {
"steps" : 60, // Numero delle volte che vengono incrementate le coordinate (x,y) dell'immagine.
"interval" : 100, // Intervallo tra un incremento e l'altro.
"images" : []
}
Quindi ogni area soggetta a movimento automatico risulta raggiungibile tramite il percorso:
movements.images[imageIndex].areas[areaIndex]
In ogni area è presente un oggetto"move" che ne definisce il movimento, che è l'unica parte di interesse per chi vuole aggiungere nuove immagini:
"move" : {
"type" : "simple", // ="path" if multiple points (to be implemented)
"points" : [], // empty if type is "simple" (to be implemented)
"xstart" : 0, // Posizione iniziale; "0" se è la stessa dell'immagine originale statica.
"ystart" : 0, // Posizione iniziale; "0" se è la stessa dell'immagine originale statica.
"xinc" : -0.6, // Incremento orizzontale della posizione; positivo = verso destra
"yinc" : 0 // Incremento verticale della posizione; positivo = verso il basso
}
L'immagine viene costruita all'interno del DIV "imgContainer".
Changelog
0.0.3 - Adesso l'animazione tramite DIV è nascosta all'utente, usata solo per percaricare le immagini; una volta precaricate, vengono copiate in un canvas; questo dovrebbe rendere possibile esportare l'animazione in formato GIF. Listbox presente ma ancora non attiva.
0.0.2 - Prima versione pubblica, ancora draft, con immagine non selezionabile (listbox presente ma non attiva).