How Google created les paul guitar doodle

Google doodle for les-paul’s 96th birthday is different from all other doodle that Google created till now,featuring the live guitar strings both playable and recordable. The interactive doodle honors the electric guitar maestro allowing people to strum guitar in their home page doodle.

Now lets see how google would have made this Guitar doodle.

Google Guitar

Hover around the strings or type in your keyboard to create music and also you can record and send across to your friends too.[try a sample]

The doodle was created by Google engineers Kristopher Hom and Joey Hurst and the team lead Ryan Germick.This doodle is a made of CSS sprites,Javascript,Flash,App engine,Web font API all together.HTML5 is used in modern browsers to draw the guitar strings.

1.Background Image

Google guitar doodle sprite

Google guitar doodle sprite

CSS sprites are usual part of google doodle these days,the sprite image shows the various positions of strings while playing the guitar.

2.Movement

The strings

The below animation shows the image replacement as per sprites.

3.Colors

The string colors are applied dynamically using the javascript.[screen shot of the code below]

The hexcode #776a62 is the default gray color of the string.

4.Sound

The string sounds are made from Rock and Roll Hall of Fame inductee.These sounds are tied to events through the flash file guitar11.swf [ this cannot be accessed directly] you need to enable security setting of plash player.Goto flash site and add the path of the swf file.

The swf file is added to the homepage as an iframe.

Google finds this popular doodle in their site.You can now access guitar doodle in this path.

We will share how Google doodles are made every time.Follow us on Facebook and twitter to get the latest doodle updates