[Update 11/Sep] I'm loving Ian Devlin's adaptation of my and Mark Brenig-Jones' code. Are Google's Bouncing Balls HTML5?
[Update 9/Sep] Mark Brenig-Jones has adapted my code to create a little app that lets you visualise your own words with the Google balls effect.
[Update 8/Sep] I've added touch-based input so iOS users can enjoy the Google goodness.
Today Google released a new version of their homepage with the logo constructed of little balls that move around with your mouse. Pretty impressive, but for some reason they decided against using HTML5 canvas. I couldn't have this, so I spent the morning coding and recreated the logo using HTML5 canvas.
There are a few bits and pieces that could be improved upon, but overall I'm impressed with how it came out after just a couple hours coding time.
I've put all the source code for the experiment up on Github for you to play around with. Enjoy!
Transmissions Received
Ian Devlin
You did a great job of it too, excellent stuff.
Shame half of Twitter seems to think that Google’s was done in HTML5. Massively irritating.
Kevin Le
Why are you so smart :-)? Congratulations.
Chris Wharton
Nice work, this looks awesome!
Tomas
Google’s version seem to be more responsive and quicker
Matthew Seremet
Yeah yours reacts almost too quickly, and never returns to the point of origin if the mouse is left in the middle. What’s up with that?
Bob
Obviously Google wanted it to work in IE (didn’t check, but it DOES work in IE, right?). I mean, that’s the only logical reason…
Tina Lurving
Hmm..much prefer Googles version I’m afraid, good effort tho! Do you get paid to do this???
Rob Hawkes
Thanks for the comments guys. I readily admit that I left out some of the original features. I only spent a couple hours working on this. Also, I took a bit of initiative and changed some things, like the balls not going back to the middle straight away. :)
Bob: I could get this working in IE if I really wanted. There is a IE hack from Google themselves which enables canvas in IE. It’s called explorercanvas.
@Tina: Unfortunately I don’t get paid to do this. What do you prefer about Google’s version btw? I’m looking to improve mine.
John Goode
There aren’t too many people out there that sit in the *better than google camp*. You, though, are!
James Long
Grr. I’ve had that effect up on my site for months! http://jlongster.com/
Your looks cool too though. The 3d thing is really nice.
Mika
Very impressive! Do you mind if I borrow your code?
drt
Yours doesn’t move when I shake my browser window. Still great work though.
al_biglan
Missing from yours is - If you shake the browser window, the particles don’t jiggle. Overall, nice version!
Foxumon
That’s sweet! Viva HTML5! :D
viks
how to write html 5 coordinate {new Point(202, 78, 0.0, 9, “#ed9d33”)} like that you have written for “google”
i want to write studyink , can you plz help me .
Justin
Nice! Although not all the “features” of Google’s were implemented, I kind of like yours better. It’s a lot cleaner looking than Google’s, i.e. the zoom effect on the particles is not as extreme and just looks better overall. Also, @James Long, that looks good on your site as well. Both of these look very fluid. Great job! Keep the HTML5 coming!
David Burton
Nice work Rob
Steve Ranger
I prefer your version :)
Cory
Like @viks am also curious how you generated the coordinates and colors for the individual balls. did you do it by hand or use some program/script to do it? Would be super-cool if you could generate the .js coordinates from a text file with what you want to put in.
Kibble Bitezy
What’s that song playing in the video? I need to buy it from ITunes. Thanks!
Steve
Really nice job :)
(btw video’s song is “This Space - Royksopp”)
Tuisto
Awesome job Rob !
If you decide to add ameliorations to your code I noticed another effect.
If you switch between tabs the balls have a nice effect too.
I’ve test it on [IE/Firefox/Opera/Safari/Chrome] but it’s only working on Chrome.
Thanks for your code ^^
Daniel Huckstep
This is very cool. I think the best part is there really isn’t much code to do it.
Xander
One word: Awesome. :-)
awesome dude
literally emboss every piece of text. html5 owns.
Allan
The Google version seems to use the mouse velocity as the disturbance to the balls - the faster you move the mouse, the further out the balls get. Also, if you don’t move the mouse in the middle of the logo, the balls eventually return to their original positions.
Kleeman7
Thanks, I missed googles today, and i was glad i found this. I enjoy playing with it.
Ricky
Great work :)
zeming
a couple hours?!
??
Whimsy Collective
http://dmongeau-petitpas.blogspot.com/2010/09/google-doodle-moving-circles-google.html
Luke Jones
Awesome work job! Loving it :-)
Ian Devlin
And remember folks: http://www.aregooglesbouncingballshtml5.com/
acid
damn i studied googles code whole morning and now i find out your animation looks even better !
??????
? google ???? ?? ???. ???? ???????????? ???????????, ?? ???????? ???? ???????.
DSM Design
Ah! Now we can re-live the awesomeness of Google on our iPhone…great work!!
Eirik
The question has come up already, but I feel I have to ask too:
How did you “write” the text with balls (line 13 in main.js)?
Did you put the balls on the canvas one by one (this must have been painfully slow and dull, especially considering the beautiful result), or are there some more advanced tools for adding (drawing/writing) points (and other elements) to a canvas?
PS: great work!
Kevin Wilde
Great work!!
I was planning on grabbing Googles code for this but it was all minimised/compressed, so there was no point making head nor tail of it.
Thanks for a being the top block you are and making it readily available, the world needs more people like you.
Thanks!
Whimsy Collective
*2nd transmission; revision from my 1st post from earlier.*
Copy of the original js particle physics of css balls elements.
http://dmongeau-petitpas.blogspot.com/2010/09/google-doodle-moving-circles-google.html
Sample; view source code, it contains annotation.
http://quebe.ca/doodle.html
Nate Balcom
Fantastic job. I really need to get on board with html 5. Is this going to kill flash all together?
Mike
How would you spell something other than Google?
Tomas
Compare with Flash performance
http://www.onemotion.com/flash/google-logo-balls/
STB
Great example of canvas. Google should use it, not divs.
Michael S. Scherotter
It works great on the IE9 platform preview as well (http://ie.microsoft.com/testdrive/) -
This is HTML5 done right - same markup - same experience!
Vedetta
I really like your version, and it used canvas. Well done.
M Merrill
Awesome! Good job.
Shannon
Dude this is Awesome!! you should keep it on here.
Kathir Maya
awesome!
riceryder
seem to work best in firefox, where the movement of the balls were more dimensional. IE 8 on the otherhand, lacked that functionality, where the balls had less movement and stayed small. Overall, it was great, very interactive.
Sam Cordery
Great stuff - and a brilliant blog….. just one thing, did you notice how the Google logo reacted when you ‘shook’ the window?
Jon
Excellent work! A great example of the potential power of HTML5 canvas!