Oh my... I couldn't wait any longer...

And
many other cool ones here.
Now, if you want to know a bit of the background/making of...
Some months ago the guys at
Instrument commissioned me for doing a experimental piece. This is the first time I get this kind of offer and as I had total creative freedom (as long as the piece was cool :D) I accepted. The experiment mainly had to demonstrate
Google Chrome's performance.
First concept
The best thing to do here was to
directly code it with Javascript. First needed to get a little framework done, a stats widget and then see where it could go. Then I started porting a
super simple collision system in between circles I had in AS3, and mixed that with browser movement. So you could interact with a bunch of circles by shaking your browser. They liked the main concept so I continued developing it.
Google Collapse
At
Hi-ReS! I was working on a experiment that consisted basically in the
google homepage collapsing and you could play with the elements, throw them around and even search. It was done in flash with
box2dflash and I did a custom editor for rebuilding the html layouts. Before you mention it, all this was done in April last year, before
this an even
this (I was quite pissed off when they were released actually). Unfortunately I had to move in to another project and the experiment development got stuck.
Back to this project, as I had a little physics engine going on they suggested using it for breaking elements of a site. At first I said that it couldn't be done because in html you can't rotate elements, then they replied with
this link and I had to eat my words ;) Then I showed them the Google Collapse flash experiment and they seemed very excited about it. I was about to mention that still couldn't be done because I used box2dflash and there wasn't a javascript version, but this time I googled first and,
oh! surprise, a Japanese ported it! :D So it was all decided, it was the perfect chance to finish that experiment.
Javascript < Flash ?
It was all looking good then, it was all a matter of the browser being able to handle css rotations fast and at the same time use the box2d engine. And how surprised I was when I saw how fast it performed.
Seriously, Javascript in Chrome almost reaches the speed of flash. (no, they didn't pay me to say this :P). Another good thing now was that it wasn't a flash hack anymore, meaning that in the original experiments I had images of the buttons, so in MacOS you would see the button using the Ubuntu skin. Not anymore as now uses directly the html elements \o/
Box2d-js improvements
Then it was time to do the usual process, the actual work, the hacks, refactoring, the addictiveness tests... Eventually faced the problem that
box2d-js took a bit of time to load (5-10 seconds) because it loads many files... Well, not anymore! I managed to do a
script to put all the files in one and also jsmined it, and I'll be sending the script to Yasushi later :D Glad to be able to contribute something back to
box2d-js after all :)
Conclusion
Brilliant project, I may still submit another piece that it's half done, we'll see.
Now go and take a look at the code of each piece and feel free to reuse the code, in fact,
I want to see a lot of websites "collapse". The code its really easy to reuse,
just add the class "box2d" to any element you want to collapse, and the code will do the rest. If you do anything with it, post it on the comments down here please :)
could you use this with the old phodoob site?