Google tries new concepts in creating doodles these days and we always watch how google creates doodles.Today they have put up the live streaming google doodle that gets updated in realtime as the lunar eclipse happens.
google lunar eclipse doodle
The longest lunar eclipse of the decade was live streamed by Google on youtube and also on their doodle.Now lets check how did they do the live streaming doodle.
This lunar eclipse doodle concept is easy to explain when compared to previous doodles as it was created with help of CSS3 sprites and Javascript.
1.Background Image
Lunar eclipse doodle-background
As you can see this is a static image with the transparent hole in the centre of the image where the live moon stream images are loaded.
2.The Dynamic moon image
Not like the previous doodle the movement through css sprite is made dynamically. The live moon image is actually a sequence of moon photographs that are stitched together at frequent intervals.
The images were taken by google and stitched to existing image,so whenever you refresh your page the recent image will get loaded in the right.
This following image strip is taken after some time.See the number of moons increased in the below image and it means the latest moon image is stitched dynamically over the right.
Dynamic google doodle moon image strip
Dynamic google doodle moon image strip
This one is getting larger (see high resolution image) as the css3 sprite animation gets lengthy now.
For all the 100 minutes google will update the moon image with the latest one updated at the right.In their previous martha graham doodle all the dancing images were drawn into one image but here the moon image is created dynamically.
The moon strip image was loaded from this URL : http://www.google.com/logos/2011/eclipse/strip.jpg?cache=1308162471 and this URL is not static.
3.The animation:
Here comes the animation of the moon,When the google.com page is loaded the entire strip image will get buffered up in the browser and the movement starts once the entire image load is complete.Starting from left end of the script the sprite moves along to right thus creating the animation.
Before the entire moon strip images gets loaded the default moon image[first one in the strip] will be loaded.Hence you wont see the movement controller at the bottom before entire strip loads.
Default moon image-lunar eclipse doodle
4.Code
Not much coding involved in here but the css3 sprite loaded as per the coordinates.
5.The Live moon player
lunar eclipse player
This is the live player which you can drag along to see the state of moon.This live player is just as simple sprite that makes the dynamic moon image to change.
We will share how Google doodles are made every time.Follow us on Facebook and Ttwitter to get the latest doodle updates
