6 ms·
Google I/O 2011 Countdown clock
- prpon 15y agohttp://cl.ly/2S2y0s1W1S3G220u1Y3i http://cl.ly/2S2y0s1W1S3G220u1Y3i
- aw3c2 15y agoabove is a screenshot of it (after prpon played with it).
- catch23 15y agoGoogle IO contestants had to implement this in a few hours on Android for their last call competition: https://sites.google.com/site/lastcallforio2011/quickfire-submissions https://sites.google.com/site/lastcallforio2011/quickfire-su... This is how I got my Google IO ticket.
- daimyoyo 15y agoThat reminds me of when you could interact with the logo with your mouse. Thanks for sharing a great link.
- akanet 15y agoIf you wanna play with that again, check out http://vincentwoo.com/google.html http://vincentwoo.com/google.html
- tuhin 15y agoBased on the same idea http://www.purincess.com/ExplodingBuddha/ http://www.purincess.com/ExplodingBuddha/
- nostrademons 15y agoThe official version is also up in the Google logo archive: http://www.google.com/logos/particle.html http://www.google.com/logos/particle.html (Actually, almost all the interactive doodles are up in the archive: PacMan: http://www.google.com/pacman/ http://www.google.com/pacman/ Buckyball: http://www.google.com/logos/buckyball.html http://www.google.com/logos/buckyball.html Particle Ball: http://www.google.com/logos/particle.html http://www.google.com/logos/particle.html Instant: http://www.google.com/logos/logos10-3.html http://www.google.com/logos/logos10-3.html (halfway down on the page) Jules Verne: http://www.google.com/logos/verne.html http://www.google.com/logos/verne.html Bunsen: http://www.google.com/logos/bunsen.html http://www.google.com/logos/bunsen.html Charlie Chaplin: http://www.youtube.com/watch?v=3NGSU2PM9dA&feature=player_embedded http://www.youtube.com/watch?v=3NGSU2PM9dA&feature=playe... 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.)
- po 15y ago* 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 15y agore 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.
- saboot 15y agoThere's also something weird going on towards the edges of the screen. The balls become half-balls almost.
- saintdev 15y agoHas 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 15y agoBeat me to it. The balls interact with the logo for me though.
- jonah 15y agoDid you notice you can drag other elements on the page down below the clock and the balls will bounce off them. ;)
- elii 15y agoMobile safari is kinda freaking out if you watch this on an iPad.
- _mattb 15y agomade by Matt King, http://mking.me http://mking.me
- pstack 15y agoWow, that slowed my dual quad core system with 12gb of RAM and a 2gb ATI down to about 5 FPS.
- robryan 15y agoWeird runs perfectly on my oldish 6000+ AMD with 2 gig of ram.
- beaumartinez 15y agoThat's pretty irrelevant if you don't tell us what browser you were rendering it with.
- pstack 15y agoYeah, 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.
- ceejayoz 15y agoIt runs about 2 FPS on an iPhone 4. When was your last malware scan?
- masklinn 15y agoProbably depends on your browser. Stutters on Camino (~Firefox 3.0) when there are lots of balls, runs OK in safari 5, butter smooth in Opera 11.10 and the latest webkit trunk. This is on a base 2010 macbook upgraded to 8GB RAM.
- abhishektwr 15y agoInitially 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.png http://www.google.com/events/io/2011/static/img/ball-13acfa...., so lot of them and Javascript to animate them. Quite heavy though.
- magicalist 15y agohttp://dev.w3.org/html5/spec-author-view/the-img-element.html#the-img-element http://dev.w3.org/html5/spec-author-view/the-img-element.htm... :)
- abhishektwr 15y agoohh thanks, looks like I was wrong. Bad on me.
- sbierwagen 15y agoBall collision seems a bit wacky. It looks like each cohort can bounce off each other, but will pass right through any other ball.
- tintin 15y agoCould be funny to create a real version of this where balls are pushed from behind out of the holes. Very well done!
- joejohnson 15y agoI 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
- pdeva1 15y agoironically it seems to work best on IE 9, due to IE's hardware acceleration
- xhroot 15y agoWhat's supposed to trigger this sound? http://www.google.com/events/io/2011/static/punch-go.mp3 http://www.google.com/events/io/2011/static/punch-go.mp3