While working on a new visualization algorithm I discovered how easy it is to make mobile browsers crash trying to display a relative small amount of images.  I’ve used an IPad 1 with IOs 5 for my tests, so with other devices the results may vary but I think the point is the same, there are two main problems while handling a lot of images from a mobile browser:

Loading rate:

If I load this simple javascript code in my IPad mobile safari just crash, this is because (imho) the device is not able to handle such a big image loading rate and goes into some form of buffer overflow.

Image quantity:

Using the same image (notice how in the previous example I’ve appended a random number after each image URL in order to force its download) I was able to hit another limit, the maximum number of images a mobile device can display simultaneously, this code which tries to print 500 images made my mobile browser freeze:

A workaround:

I’ve managed to load and show thousands of images using canvas, in the following example each image is loaded, printed on canvas and the discarded, also the number of concurrent loads is limited to avoid browser crash, this example uses 10000 images but I think higher image quantities can be easily reached:

Some refinements:

It seems that mobile Safari cannot handle canvas bigger than a certain value (try this), to handle this problem one solution could be using the ‘toDataUrl‘ method when the canvas is full of pics in order to extract a screenshot. Then this screnneshot can be added to the page before the canvas so the canvas can be cleaned and reused for the upcoming pics.

update 19/06/2010: my speakers showcase gets a dedicated post at euruko2010 official blog from Ela. Thanks guys !

Euruko 2010 is over. It was a great week-end spent among cool people having fun and talking about Ruby. As Matz said “we have a nice community”, and that’s absolutely true. To honor this conference (and to test some CSS3 features ^_^ ) I’ve developed a page showcasing the speakers and their talks. For each of them you may find a short summary and some resources (slide, etc..).

Working with CSS3 highlight some browser performances problem I was unaware before, for example I tried to have a scrolling background under a shadowed box, you can try this in your browser and notice how it is slow. However if we turn the shadows off the scrolling become smooth again (try this).

Ok, nothing left to say, hope you’ll enjoy the showcase:

Le istruzioni per ripeterlo sono queste:

1. Mescolate un mazzo di carte da Briscola;
2. Tenete il mazzo in mano in modo che le carte siano a faccia in su;
3. Estraete la prima carta dal mazzo, memorizzatene il valore ( da 1 a 10 ) e appoggiatela a faccia coperta sul tavolo;
4. Estraete le successive 10-k carte ed impilatele, sempre a faccia coperta, sulla precedente ( dove k è il valore memorizzato al punto 3 );
5. Ripetete i punti 3 e 4 con le restanti carte del mazzo. Se non doveste trovare sufficienti carte per completare l’ultima pila disponete le carte di questa pila a faccia in giù sul tavolo separandole una dall’altra ( possiamo chiamarle ‘carte del resto’).

Ok, se avete operato nel modo corretto la somma delle carte capofila di ogni mazzetto (quelle del punto 3) dovrebbe corrispondere alla seguente formula:

(numero di mazzetti * 11) + carte del resto - 40

Cerchiamo di capire come si possa arrivare ad un simile risultato:

Cominciamo affermando che ogni mazzetto di carte è composto da 11 – k carte dove k è il valore della carta a capofila quindi, ad esempio, se la carta capofila è un due il mazzetto conterrà 9 carte: il due e le otto successive, con questa osservazione è possibile stendere una prima versione della formula:

Dove con n indichiamo il numero di mazzetti, con il valore della carta capofila dell’x-esimo mazzetto e con r il numero della ‘carte del resto’. Ora non ci resta che isolare il più possibile k, per fare questo non dobbiamo fare altro che applicare alcune trasformazioni alla formula:

Done, con questi semplici passaggi siamo riusciti a ricostruire il funzionamento di un piccolo gioco che è riuscito ad impressionarmi ed incuriosirmi.

Prendiamo ad esempio gli studi sullo squalo; l’analisi della struttura della sua pella ha portato allo sviluppo delle famose tute acquatiche FastSkin firmate Speedo ma ha anche evidenziato come il pattern della pelle di questo predatore impedisca alle colonie batteriche di attecchire; qualità che è stata replicata con successo nei prodotti medicali della Sharklet Technologies studiati per migliorare le condizioni igeniche degli ambienti ospedalieri.

Di esempi ce ne sono veramente molti, vorrei concludere questo breve post segnalandovi un’ottimo talk dell’edizione 2009 del TED tenuto da Janine Benyus, pioniera in questo campo e asknature.com un portale-community dedicato a tutto quanto possiamo ancora apprendere dalla natura.