Some weeks ago I did yet another chrome experiment for Instrument. In fact, it was a experiment I half started when I realised that with the css property -webkit-transform (and MozTransform) I could scale elements. So I ported my basic 3D engine to Javascript and I got it working in a few hours. But in the end I didn't finish that one.

So for this "second phase" I finished it, but this time using Google Image API. The end result looks like this:



Realtime version: Google Sphere.

Once I had this one done I got totally addicted to Javascript and wondered what else could I try. I have to say that the fact of being able to change the code from anywhere without having to recompile anything is priceless. I keep modifying the Google Sphere every week whenever I find new Javascript tricks, and to improve the movements a bit. The first iteration of the experiment used jsTween but found some problems with it (I actually don't remember what were the problems) and luckily I found JSTweener which with some modifications performed flawlessly.

Then I though about my good old DOF experiment with Papervision3D, and though how could achieve the same effect with Javascript. The trick is background offset. Just check this image and you'll understand :)

While working on this one I really missed the Hi-ReS! Stats because at the beginning it was going a bit slow with only 100 balls. So I ported the Stats to Javascript and thanks to this I ended up having 300 balls runing quite decently. This is how it looks like:



Realtime version: Depth of Field, 100% Javascript (debug).

Of course, you'll need Google Chrome (win/linux/mac) to see all this in full glory.

So, apparently, Javascript is able to move a bunch of pixels these days. Next thing will be to render a actual polygon.

PS: Should I say that the sources are available? ;)