Home arrow DHTML arrow Google Gives Buckyball a Tribute Doodle in HTML5

Google Gives Buckyball a Tribute Doodle in HTML5

Google dedicates a very cool tribute doodle to Buckminster Fuller's Buckyball. Developers, take note...it's all HTML 5.

TABLE OF CONTENTS:
  1. Google Gives Buckyball a Tribute Doodle in HTML5
  2. More Reading About Buckyballs
By: Dev Shed
Rating: starstarstarstarstar / 2
September 04, 2010

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Google makes an art form out of holidays by changing their logo to suit the mood. Almost one-upping their Pac-Man anniversary logo, they have created a Buckyball in full animation using only DHTML and, more specifically, HTML 5.

Google's doodles are always a hit, and the Pac-Man Doodle was certainly one to circulate with your friends, but this Google Doodle of a Buckyball that reacts to your mouse in both speed of rotation and direction is really impressive. The doodle is even more impressive when you lift the covers...

The Buckyball on Google's home page is constructed with two images...an atom and a connector. That's it. Beyond that, it's all math formulas that we probably saw in some of our early books (those of us that did any kind of geometric plotting). The simplicity of the Buckyball is reflected in the doodle's code.

The code is set up with, basically, a structure that would make a Buckyball just as easily as an atomic structure with those two graphics, and in that they are able to plug in formulas to javascript that will manipulate the specific divs housing any number of atom or bond images. So when you inspect the elements, you can see the formulas at work as they change the pixel locations to simulate the Buckyball rotation and speed.

Keep an eye on the Google Logo Page because this will resurrect there.



 
 
>>> More DHTML Articles          >>> More By Dev Shed
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

DHTML ARTICLES

- Google Gives Buckyball a Tribute Doodle in H...
- Rough Guide To The DOM (part 2)
- Rough Guide To The DOM (part 1)
- Filters And Transitions In IE5
- Understanding Embedded Fonts

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: