How Google created les paul guitar doodle

By

June 11, 2011HTML54 Comments

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.

how google created les paul 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 sprite11

Google guitar doodle sprite

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

google guitar strings

The strings

The below animation shows the image replacement as per sprites.

google guitar animation

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

Related posts:

4 Responses to “How Google created les paul guitar doodle”
  1. Bharathy

    Wow! This is a brilliant post explaining google’s doodle! I loved this one particularly, when they had it for the day! Appreciating your post much!

  2. jeyaganesh

    thanks bharathy

  3. Ibanez Artcore

    I just tried playing on your google guitar and I have to say I need lots of work. It was fun but I think I will stick with my regular guitar. This is a fun interactive site.Thanks for sharing.

  4. Cristian

    Great! I always wondered how it could be done. Now I know! Thanks!

Leave a Reply