*blog... kind of... *rss 



Chrome Experiments!
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, I had total creative freedom (as long as the piece was cool :D). 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 Gravity

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. Unfortunately I had to move 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 flash experiment and they seemed very excited about it. I was about to mention that still couldn't be done because I used Box2D 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 :)
38 comments

really cool project.
could you use this with the old phodoob site?
You kick ass.
Impresionante! :-)
@Carl: Yeah, I've always wanted to put physics on that. Maybe on the v3.0? Some day I'll get the inspiration :D But remember, this is Javascript and not Actionscript ^^
they work real nice in safari on a mac too. FF not quite as good.
After hearing so much ranting over the year about the problems with Flash it is funny to see it all being reinvented in the browser with js!
you know, I was going to be a big chrome fan, too. I even browsed ~40 pages of their comics. but when I actually downloaded chrome the next day it came out, it crashed to me several times after some totally harmless flash. I got pissed off (separate process per tab? rrrright) and uninstalled it... so my point here is that, unfortunately, I cannot enjoy your kick-ass-ness this time :(
Ah, you know, the experiments won't get deleted, so I'm sure that sooner or later you'll see them ;)
Works perfectly in Opera too ;)
No, it doesn't. In Opera the elements do not spin.
I used your code for part of my April Fool's Day joke on my site. Thanks! Check it out at endingb.net.
Haha! Nice one! :D
very good work !!!!!!!!!
I'm late on this one, but... my god man, that's astounding. Such great work! And thanks for sharing the code.
I'm late on this one, but... my god man, that's astounding. Such great work! And thanks for sharing the code.
Oh geez. Like a moron, I clicked back to this page from another and it reposted my comment. Ah well. Your work is so good it's worth complimenting twice. If not thrice :)
So how do I use the code on my website I don't get it? I got told to do this on facebook so this is how I've found this link, just wanted to say it's very cool and I can see you've put a lot of work into it! Well done!

And oh yeah, after you've used it can you take it off?
rob google gravity is cool but you suck ballz
great work.
Your work is impressive. Keep coding and designing Mr. doob. :)
This is the first one of your experiments I had the privilege of experience and I must say: it frikkin' rocks. I looked through most of the experiments in awe and wonder; this is the level of awesomeness that I aspire to eventually be, in terms of Javascript/HTML 5/CSS 3/etc. You, sir, kick ass.
Dir. Privilege of experience.
Awesome!!!!! I love the "HARMONY" I can draw different things/sketches! ♥♥
I wand you to keep designing more stuff,man! you are soo pro!
Hey your websites are awesome. They are funny and crazy. I tried on my ipad several times but now it doesn't work. Oh well. Your awesome.
Found a glitch in the project. When you launch the project and minimize chrome, the project vanishes. Nevertheless, still great.
I have a question. You said we can re use the code and stuff and all we have to do is put class gb2, but when i viewed page source, copied the html put it in notepad and changed the title to adam, saved it as a.html document and opened it, the google logo was shown as an image symbol and nothing collapsed. may i ask why, and how to fix it? and also, would i just view a pages source and put class gb2? and where would i put it? thanks for your help!
mUIIIIITO BOM
Can you please answer my question? If you dont i will be forced to chat bomb, and i hate that.
Thank you kindly
Or you can e-mail me the solution @
master_pokemon@hotmail.co.uk
Hi.
Loving your work! :-)
I'm using your example as a base for a new site, but I've just noticed it's not working on iOS devices.
Is there a way to make it happen? Apparently, box2d is supported, so can't see why it's not working......

Cheers

Ray
This one is wierd u should make one that is full of game u dummy
I looooooove this like lalallalalalalalalalalalove it
Hi! I would like to know how u use this code ( for the google fall)
I copied the text in the html of dreamweaver....but it's ajavascript... really never used java;.... could you help me??? thanks a lot!!!
Virg
Good,I really like it!
YOU ARE TRULY TALENTED!!! THE WORLD NEEDS MORE PEOPLE LIKE YOU!!!! LOVE PLAYING WITH YOUR EXPERIMENTS!! XD
man, this is awesome!!
man awsm work its js anothr world now i m expecting more from u...:)
AMAZING!!!!!
Sir, can I get ur personal e-mail id...would like to get in touch with u personally ... :)
I'd be more than pleased!