

Google I/O 2011 Countdown clock - abhishektwr
http://www.google.com/events/io/2011/

======
catch23
Google IO contestants had to implement this in a few hours on Android for
their last call competition:

[https://sites.google.com/site/lastcallforio2011/quickfire-
su...](https://sites.google.com/site/lastcallforio2011/quickfire-submissions)

This is how I got my Google IO ticket.

------
jonah
Did you notice you can drag other elements on the page down below the clock
and the balls will bounce off them. ;)

------
saintdev
Has anyone else noticed you can move most of the design elements around and
they interact with the balls. Everything except the Android holding the QR
sign, the clock itself and the copyright line can be dragged around. The
Google IO logo is the only one that you can move, but doesn't interact with
the balls.

~~~
jonah
Beat me to it. The balls interact with the logo for me though.

------
sbierwagen
Ball collision seems a bit wacky. It looks like each cohort can bounce off
each other, but will pass right through any other ball.

------
po
* I find it pretty hard to read the time. They maybe should reduce the white space between the ball grid.

* The android holding the QR code covers up the time. I think the designer has a larger monitor than me. :-)

* The balls bouncing around _sometimes_ interact with each other and sometimes don't. That's a nice hack to make it 2.5-D.

* The balls that don't move still flicker when the number changes. Fixing that would make it slicker.

Overall, a great concept. :-)

~~~
yaix
re 1: I guess its more about "looking amazing", not about usability. I looked
at the clock and forgot to look at the date (had to re-open the tab to see
when the event was). Looks amazing, though.

re 2: I think that's intentional, because you can drag-and-drop all items on
the page. Just drag the title from behind the QR to an empty place on the
page.

re 3: Dunno. My arm seems to be a bit slow to actually move many balls
simulateously with sufficient FPS.

------
prpon
<http://cl.ly/2S2y0s1W1S3G220u1Y3i>

~~~
aw3c2
above is a screenshot of it (after prpon played with it).

------
tintin
Could be funny to create a real version of this where balls are pushed from
behind out of the holes.

Very well done!

------
abhishektwr
Initially I thought they have done this using HTML5 but not. A closer look on
source code and then each ball is just image like this one
[http://www.google.com/events/io/2011/static/img/ball-13acfa....](http://www.google.com/events/io/2011/static/img/ball-13acfa.png),
so lot of them and Javascript to animate them. Quite heavy though.

~~~
magicalist
[http://dev.w3.org/html5/spec-author-view/the-img-
element.htm...](http://dev.w3.org/html5/spec-author-view/the-img-
element.html#the-img-element)

:)

~~~
abhishektwr
ohh thanks, looks like I was wrong. Bad on me.

------
daimyoyo
That reminds me of when you could interact with the logo with your mouse.
Thanks for sharing a great link.

~~~
akanet
If you wanna play with that again, check out
<http://vincentwoo.com/google.html>

~~~
nostrademons
The official version is also up in the Google logo archive:

<http://www.google.com/logos/particle.html>

(Actually, almost all the interactive doodles are up in the archive:

PacMan: <http://www.google.com/pacman/>

Buckyball: <http://www.google.com/logos/buckyball.html>

Particle Ball: <http://www.google.com/logos/particle.html>

Instant: <http://www.google.com/logos/logos10-3.html> (halfway down on the
page)

Jules Verne: <http://www.google.com/logos/verne.html>

Bunsen: <http://www.google.com/logos/bunsen.html>

Charlie Chaplin:
[http://www.youtube.com/watch?v=3NGSU2PM9dA&feature=playe...](http://www.youtube.com/watch?v=3NGSU2PM9dA&feature=player_embedded)

It's missing Lennon (alas), Rube Goldberg, and Earth Day (which'll probably
get up eventually), along with some other ones that were simple click-through
images.)

------
xhroot
What's supposed to trigger this sound?
<http://www.google.com/events/io/2011/static/punch-go.mp3>

------
elii
Mobile safari is kinda freaking out if you watch this on an iPad.

------
joejohnson
I can't drag and drop. I'm using the latest Chrome build...

Edit: Nevermind, it's just the Android robot and QR code that I can't move

------
pstack
Wow, that slowed my dual quad core system with 12gb of RAM and a 2gb ATI down
to about 5 FPS.

~~~
beaumartinez
That's pretty irrelevant if you don't tell us what browser you were rendering
it with.

~~~
pstack
Yeah, I was going to mention FF4, but didn't want to start a browser
preference war. Also, I tend to not be very impressed with things that only
work (or work well) on one modern browser, but not others.

------
_mattb
made by Matt King, <http://mking.me>

------
pdeva1
ironically it seems to work best on IE 9, due to IE's hardware acceleration

