Lately I’ve been pretty busy enjoying some real time data visualization examples and demo. To have some data to work with I decided to use Twitter API, in particular I rely on jQuery LiveTwitter plugin by elektronaut; next I built a stack chart like visualization in which every new tweet of a chosen topic is dropped over its language column.
I’ve been recently playing with some of the newest CSS3 features, such as pseudoclasses selectors, transition and transform properties and attr(). In order to have something concrete on which test these features I created a coverflow effect that works only out of CSS instructions without the use of javascript.
I recently created a small website called ‘La piccola biblioteca della natura’ to showcase some of my girlfriend watercolors. I decided to go for a responsive design and set up some nice media-query statements. If you try to resize the browser window you surely notice how the structure of the fruits change in response to this operation.
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: