HTML5 Video Mosaic: a proof of concept
Sunday, March 20th, 2011Following a suggestion by a VJ friend of mine I worked on creating a real time HTML5 video mosaic that can be used to aggregate videos from your hard disk in a custom-size grid.
Following a suggestion by a VJ friend of mine I worked on creating a real time HTML5 video mosaic that can be used to aggregate videos from your hard disk in a custom-size grid.
I’m recently enjoying KillZone 2 so much; during one of my gaming sessions I noticed that the loading screen is designed as a bas-relief that you can partially rotate using the joypad oscilloscope, this technique, although easy to implement in a PS3 game, produce a very interesting effect and so I decided to try to transpose it to a web gallery.
CSS3 has gradients and CSS3 has shadows, so why don’t try to use both to simulate a light source ? That is the basic idea behind this project. I’ve set-up a small demo which let you use the mouse to direct a light source over a text and observe its shadow change according to light position.
Conoscevo Google Map e le sue fantastiche API ma solo di recente ho deciso di spulciare un pò più a fondo la sua documentazione e ho scoperto la notevole possibilità di modificare i tiles visualizzati da Google Map trasformando questo strumento da strettamente cartografico a ZUI (zoomable user interface).
Come funziona? Bisogna istanziare un nuovo oggetto della classe GTileLayer e specificarne all’interno una funzione che, ricevuti due parametri (un oggetto GPoint e un numero indicativo del livello di zoom) sappia ritornarne l’immagine appropriata.
Nel prossimo articolo andrò un pò più nel dettaglio, per il momento vi lascio a questa proof-of-concept che potrebbe trasformarsi, a breve, nella gallery ufficiale del sito.
Combinando dimensioni in percentuali e l’effetto morph di Scriptacolous è possibile ottenere un simpatico effetto come questo: