Parallax iOS7, come riproporlo su sistemi precedenti?

I video di iOS7 hanno sorpreso tutti quanti per l’interessantissimo effetto di parallasse. Ma come funziona? E come è possibile implementarlo anche su versioni precedenti di iOS?

Potete osservarne il funzionamento in questo video dei ragazzi di iDownloadBlog.com

Partiamo dalle basi, spiegando cos’è un effetto di parallasse. La definizione su wikipedia è: “fenomeno per cui un oggetto sembra spostarsi rispetto allo sfondo se si cambia il punto di osservazione”. Nulla da aggiungere, lo sperimentiamo ogni giorno con i nostri occhi. Il nostro cervello per dare aspetto di tridimensionalità a quello che guardiamo grazie alla visione binoculare riesce a comporre immagini che fanno sembrare gli oggetti più vicini più grandi di quelli lontani, fornendo quindi una certa profondità all’immagine composta.

Un esempio lampante è quando si viaggia in treno, lo sfondo sembra composto da più strati che si muovono a velocità diverse.

Su iOS questo effetto ovviamente ottenuto tramite una simulazione con l’aiuto del giroscopio. Credo che ben pochi non siano al corrente che sui dispositivi Apple (da iPhone 4 in su e iPad 2 in su) sia installato un giroscopio oltre al classico accelerometro. Con l’accelerometro si familiarizza più facilmente: è un dispositivo che misura le accelerazioni sui 3 assi cartesiani. Il giroscopio, invece, misura accelerazioni angolari. È un dispositivo molto interessante che consente in alcune applicazioni di fornire un’esplorazione panoramica di una foto (o universo di un gioco) ruotando sul nostro asse. Si tratta dello stesso dispositivo che ci consente di creare le foto panoramiche.

È un tipo di tecnologia proveniente dall’aeronautica e dai lanci spaziali… davvero interessante!

Salvo smentite, sugli ultimi dispositivi, il chip MEMS (se non sapete cos’è un MEMS leggete qua, non posso dirvi tutto io) del giroscopio è fabbricato da una certa STMicroelectronics azienda italo-francese, ma con origini italiane (solo un nome: Adriano Olivetti).

Grazie ai giroscopi è possibile ottenere gli angoli di rotazione del dispositivo. Angoli che hanno il nome di imbardata, beccheggio e rollio, nomi che derivano dalla navigazione marina e aeronautica.

Giroscopes, courtesy Apple Inc.

Giroscopio

 

Su iOS gli accelerometri sia assiali che angolari sono gestiti da un framework chiamato CoreMotion. Esistono tre classi all’interno di questo framework che consentono l’ottenimento dei dati:

  1. CMAccelerometerData: fornisce le accelerazioni assiali
  2. CMGyroData: fornisce le accelerazioni angolari
  3. CMDeviceMotion: incapsula le misurazioni combinate come l’”assetto” del dispositivo

Istanze di CMMotionManager danno l’accesso a questo tipo di informazioni. I dati possono essere ottenuti in due modi:

  •  push: specificando un intervallo di tempo si fornisce un block per gestire i dati. Ad ogni intervallo il block verrà inserito all’interno di una specifica coda di esecuzione in attesa di essere processato
  • pull: è un tipo di richiesta effettuato direttamente dall’app, che in determinati momenti richiede lo stato del dispositivo

Ottenere le informazioni dagli accelerometri è un’operazione che richiede diversa energia e che quindi tende a consumare molta batteria, per questo motivo generalmente è meglio richiedere le informazioni in modalità pull.

CMDeviceMotion è la classe che ci interessa, perché non ci fornisce il dato diretto dagli accelerometri, ma lo rielabora in modo, ad esempio, da eliminare l’accelerazione gravitazionale. Une delle sue proprietà è l’attitude, cioè l’asseto del dispositivo. La simulazione del parallasse funziona leggendo la posizione del dispositivo e modificando la posizione di quello che stiamo guardando sullo schermo, in pratica se prima eravamo noi a muoverci adesso è ciò che viene visualizzato che si muove.

Questa è solo una prima parte. Per dare un effetto di tridimensionalità non è sufficiente che l’immagine si muova, è necessario anche fornirle una prospettiva. In questo ci viene in aiuto il CATransformLayer e la sua proprietà -sublayerTransform.

CATransformLayer è una classe particolare che non appiattisce le trasformazioni all’interno della gerarchia dei sub-layer, ma riesce a mantenerne la tridimensionalità. -sublayerTransform è invece una proprietà di tutti i CALayer che consente di applicare una trasformazione a tutti i sublayer di quel layer specifico. Preso coscienza della tridimensionalità, esiste ancora una proprietà che fa cambiare prospettiva a tutto quello che vediamo e per farlo bisogna per forza applicarlo alla -sublayerTransform property, in modo che venga propagato lungo tutta la gerarchia di sublayer. In particolare ci interessa toccare un parametro della matrice di trasformazione: il valore m34 (non è un gruppo musicale, quelli sono gli m83 e hanno fatto la colonna sonora di Oblivion). Il valore di m34 rappresenta il punto di fuga applicato alla prospettiva dei layer ed è proprio quello che fornisce realismo a questo effetto.

Per una applicazione che stiamo sviluppando qui a Cloud In Touch, ho deciso di creare un effetto simile a quello di iOS7. Dopo aver navigato sul web, sono venuto a conoscenza del progetto di Arnaud Coomans chiamato Parallax. Si trattava di un ottimo punto di partenza che, purtroppo, non si adattava al porting su un’app da rilasciare in AppStore. Sembrava perfetto… ma solo in apparenza: un bug abbastanza fastidioso portava l’immagine ad impazzire quando l’utente provava a tenere il dispositivo dritto, in modalità portrait.

fuuuuuuuu

FUUUUUUUUUUUUU

Partendo da quel progetto in sé ben studiato (cosa rara), ho deciso di trovare un fix. Ammetto che per un certo tempo la mia mente ha vagato nel vuoto, poi i miei mille anni di ingegneria mi hanno ricordato un concetto di aeronautica che aveva attirato particolarmente la mia attenzione: il cosiddetto GIMBAL LOCK (blocco cardanico) e i QUATERNIONI.

QUATER CHE???????

Cosa è il Gimbal lock e perché è così importante? In pratica è :

perdita di un grado di libertà in uno spazio tridimensionale che avviene quando due, dei tre giunti cardanici, si trovano una configurazione parallela, bloccando il sistema in una rotazione su due dimensioni

Questa immagine con un aereo può fornire un aiuto per comprendere meglio la situazione.

Gimbal lock, courtesy wikipedia

Gimbal lock

Il Gimbal lock è una cosa seria che ha quasi compromesso la missione Apollo 11 (quella dell’allunaggio). Inoltre la questione è ben nota anche a chi ha visto il film nel film Apollo 13.

Non devo allunare, ma solo prendere dei valori corretti da sensori. E in questo caso vengono in aiuto due entità matematiche: le matrici di trasformazione o i quaternioni. Bisogna abbandonare gli angoli di Eulero (imbardata, beccheggio e rollio) per addentrarsi in mondo un po’ più complicato.

Descrivere un quaternione è una cosa complessa vi basti sapere che è un’estensione dei numeri immaginari, trattasi di spazio vettoriale a dimensione 4. Per saperne di più, ecco un bel link a wikipedia (per me rimane un mistero).

Utilizzando questi valori o la matrice di rotazione è possibile evitare quel fastidioso effetto di “agitazione” dell’immagine.

Una volta rilasciata l’app verrà rilasciata anche la classe che crea questo effetto, nel frattempo godetevi il video!! SII PUO’ FARE!!!!

Fonti:

Wikipedia

http://www.macworld.com/article/2042808/inside-the-technology-behind-ios-7s-parallax-effect.html

Leave a Comment!

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Related Posts