# Interactive guitar currently at google.com **URL:** \ **Category:** Factual Questions\ **Created:** [June 9, 2011, 3:29am UTC](https://boards.straightdope.com/t/interactive-guitar-currently-at-google-com/584821 "2011-06-09T03:29:49Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![JohnClay](https://avatars.discourse-cdn.com/v4/letter/j/c37758/32.png) [@JohnClay](https://boards.straightdope.com/u/JohnClay)\ **Post date:** [June 9, 2011, 3:29am UTC](https://boards.straightdope.com/t/interactive-guitar-currently-at-google-com/584821/1 "2011-06-09T03:29:49Z")
Hi, currently at Google the title is an interactive guitar… I wanted to see how they made it… does anyone know of a site that teaches you how to make something similar or somewhere where it is easy to see the javascript involved? Thanks! ---
**Author:** ![tellyworth](https://avatars.discourse-cdn.com/v4/letter/t/977dab/32.png) [@tellyworth](https://boards.straightdope.com/u/tellyworth)\ **Post date:** [June 9, 2011, 3:35am UTC](https://boards.straightdope.com/t/interactive-guitar-currently-at-google-com/584821/2 "2011-06-09T03:35:21Z")
View Source in your web browser (often Ctrl-U, Cmd-U or Cmd-Opt-U) will show you the source code. It’s a combination of Javascript (for the graphics) and Flash (for the sound). Learning to do that well is not trivial. ---
**Author:** ![JohnClay](https://avatars.discourse-cdn.com/v4/letter/j/c37758/32.png) [@JohnClay](https://boards.straightdope.com/u/JohnClay)\ **Post date:** [June 9, 2011, 3:45am UTC](https://boards.straightdope.com/t/interactive-guitar-currently-at-google-com/584821/3 "2011-06-09T03:45:10Z")
yeah I did “view source” but the javascript isn’t laid out neatly and the variable and function names are just random looking letters. ---
**Author:** ![simster](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/simster/32/1047_2.png) [@simster](https://boards.straightdope.com/u/simster)\ **Post date:** [June 9, 2011, 3:49am UTC](https://boards.straightdope.com/t/interactive-guitar-currently-at-google-com/584821/4 "2011-06-09T03:49:09Z")
> [@JohnClay](#): > > yeah I did “view source” but the javascript isn’t laid out neatly and the variable and function names are just random looking letters. Thats called “obsfucation”, its intended to keep people from being able to easily steal source code like this (much harder to re-use if you can’t quite reverse engineer what they’ve done) - it also has a nice side affect of making the code smaller. ---
**Author:** ![JohnClay](https://avatars.discourse-cdn.com/v4/letter/j/c37758/32.png) [@JohnClay](https://boards.straightdope.com/u/JohnClay)\ **Post date:** [June 9, 2011, 4:31am UTC](https://boards.straightdope.com/t/interactive-guitar-currently-at-google-com/584821/5 "2011-06-09T04:31:26Z")
BTW I haven’t tested it on an iPad but I have a feeling it would work in it despite it not supporting Flash - it might use an HTML5 audio tag in that case… anyway it’s impressive how you can hear multiple strings at once. ---
**Author:** ![JohnClay](https://avatars.discourse-cdn.com/v4/letter/j/c37758/32.png) [@JohnClay](https://boards.straightdope.com/u/JohnClay)\ **Post date:** [June 9, 2011, 4:39am UTC](https://boards.straightdope.com/t/interactive-guitar-currently-at-google-com/584821/6 "2011-06-09T04:39:43Z")
I found the images used: [![](http://www.google.com/logos/2011/guitar11-hp-sprite.png) ](http://www.google.com/logos/2011/guitar11-hp-sprite.png) I like how the strings stick to the mouse. ---
**Author:** ![JohnClay](https://avatars.discourse-cdn.com/v4/letter/j/c37758/32.png) [@JohnClay](https://boards.straightdope.com/u/JohnClay)\ **Post date:** [June 9, 2011, 5:20am UTC](https://boards.straightdope.com/t/interactive-guitar-currently-at-google-com/584821/7 "2011-06-09T05:20:21Z")
> [@simster](#): > > Thats called “obsfucation”, its intended to keep people from being able to easily steal source code like this (much harder to re-use if you can’t quite reverse engineer what they’ve done) - it also has a nice side affect of making the code smaller. Yeah… BTW I found a better obsfucator… [http://www.obfuscator.ro/en/](http://www.obfuscator.ro/en/) I started off with the already minified version of jquery (89kb without the comments) and got it down to 64kb. It probably runs slower due to it unpacking but it would download quicker. The first bit: ```auto eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(12(a,b){12 cy(a){14 f.4x(a)?a:a.1c===9?a.3E||a.cF:!1}12 cv(a){17(!cD[a]){18 b=f("<"+a+">").8P("1H"),d=b.1x("21");b.2m();17(d....... ``` The last bit ```auto ...|isPrototypeOf|parseFromString|XMLDOM|loadXML|XML|execScript|eval|regexp|compatible|superclass|Boolean|Number|safari|when||background|4px|Bubbles|random|clsid|D27CDB6E|AE6D|11cf|96B8||444553540000|applet|classid|substring|delay|clearQueue|rea|autofocus|autoplay|controls|loop|required|scoped|removeProp|removeAttributeNode|property|can|changed|maxlength|maxLength|cellSpacing|cellPadding|rowspan|rowSpan|colspan|colSpan|usemap|useMap|frameborder|contenteditable|contentEditable|altKey|attrChange|attrName|bubbles|cancelable|detail|eventPhase|layerX|layerY|newValue|offsetX|offsetY|prevValue|relatedNode|screenX|screenY|shiftKey|view|wheelDelta|1e8|beforeunload|defaultPrevented|timeStamp|cancelBubble|stopImmediatePropagation|beforedeactivate|delegate|undelegate|resize|dblclick|mousedown|mouseup||mousemove|keyup|Syntax|unrecognized|expression|child|0n|enabled|header|activeElement|innerText|switch|createComment|| __sizzle__ |mozMatchesSelector|webkitMatchesSelector|msMatchesSelector|sizzle|HTML|Until|andSelf|parentsUntil|nextAll|nextUntil|siblings|reverse|hr|img|meta|java|ecma|CDATA|legend|tfoot|caption|th|wrap|unwrap|512|prependTo|insertAfter|replaceAll|ms|Right|Bottom|zIndex|fontWeight|lineHeight|widows|orphans|styleFloat|curCSS|right|getPropertyValue|fontSize|1em|pixelLeft||mg|color|date|datetime|email|month|range|search|tel||time|week||about|storage|extension|widget|HEAD|POST|serialize|ajaxError|ajaxSuccess|post|getScript|getJSON|plain|clearTimeout|300|Last|Etag|notmodified|Success|Error|1_|Content|Type|Since|None|Match|Accept|01|Transport|callback|was|called|charset|loaded|withCredentials|404|1223|204|marginBottom|paddingTop|paddingBottom|paddingRight|webkitRequestAnimationFrame||mozRequestAnimationFrame|oRequestAnimationFrame|fadeTo|overflowX|overflowY|slideDown|slideUp|slideToggle|fadeIn|fadeOut||fadeToggle|off|linear|cos|PI|Infinity|clearInterval|slow|600|fast|400|animated|able|20px|scrollTo|Height|inner|outer|compatMode|CSS1Compat|window'.split('|'),0,{})) ``` ---
**Author:** ![Monty](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/monty/32/47_2.png) [@Monty](https://boards.straightdope.com/u/Monty)\ **Post date:** [June 9, 2011, 5:22am UTC](https://boards.straightdope.com/t/interactive-guitar-currently-at-google-com/584821/8 "2011-06-09T05:22:02Z")
Anyone know why Google has that today? ---
**Author:** ![Gary\_T](https://avatars.discourse-cdn.com/v4/letter/g/3ec8ea/32.png) [@Gary\_T](https://boards.straightdope.com/u/Gary_T)\ **Post date:** [June 9, 2011, 5:45am UTC](https://boards.straightdope.com/t/interactive-guitar-currently-at-google-com/584821/9 "2011-06-09T05:45:49Z")
> [@Monty](#): > > Anyone know why Google has that today? If you mouseover those special Google graphics it tells you the reason. In this case it’s Les Paul’s birthday. ---
**Author:** ![Monty](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/monty/32/47_2.png) [@Monty](https://boards.straightdope.com/u/Monty)\ **Post date:** [June 9, 2011, 6:11am UTC](https://boards.straightdope.com/t/interactive-guitar-currently-at-google-com/584821/10 "2011-06-09T06:11:04Z")
Appreciate the info, **Gary**. Usually, I get the reason in Hangeul when I do the mouse-over thing, but for some reason it’s not working–I just get nothing. ---
**Author:** ![Jim\_B](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/jim_b/32/4338_2.png) [@Jim\_B](https://boards.straightdope.com/u/Jim_B)\ **Post date:** [June 9, 2011, 6:52am UTC](https://boards.straightdope.com/t/interactive-guitar-currently-at-google-com/584821/11 "2011-06-09T06:52:57Z")
I don’t know if anyone is interested. But I did some digging, and found the old Google Pac Man game [here](http://www.google.com/pacman/). You can find all the past Google “logos” (including the interactive guitar) right [here](http://www.google.com/logos/). 🙂 ---
**Author:** ![JohnClay](https://avatars.discourse-cdn.com/v4/letter/j/c37758/32.png) [@JohnClay](https://boards.straightdope.com/u/JohnClay)\ **Post date:** [June 9, 2011, 8:11am UTC](https://boards.straightdope.com/t/interactive-guitar-currently-at-google-com/584821/12 "2011-06-09T08:11:37Z")
That Pac Man game is impressive - it’s not just some pure Flash thing - it might even work on iPads. BTW here are other interactive ones: Jules Verne: [http://www.google.com/logos/verne.html](http://www.google.com/logos/verne.html) Buckyballs [http://www.google.com/logos/buckyball.html](http://www.google.com/logos/buckyball.html) ---
**Author:** ![cochrane](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/cochrane/32/10441_2.png) [@cochrane](https://boards.straightdope.com/u/cochrane)\ **Post date:** [June 9, 2011, 10:50am UTC](https://boards.straightdope.com/t/interactive-guitar-currently-at-google-com/584821/13 "2011-06-09T10:50:20Z")
> [@JohnClay](#): > > That Pac Man game is impressive - it’s not just some pure Flash thing - it might even work on iPads. It works on my iPhone, but without sound. You drag your finger along the path you want Pac Man to go and he follows it. It should work on the iPad as well. ---
**Author:** ![Jophiel](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/jophiel/32/66_2.png) [@Jophiel](https://boards.straightdope.com/u/Jophiel)\ **Post date:** [June 9, 2011, 11:37am UTC](https://boards.straightdope.com/t/interactive-guitar-currently-at-google-com/584821/14 "2011-06-09T11:37:35Z")
I’d asked this in Cafe Society’s thread as well but it seems a GQ – I know nothing about guitars or how to play music on them but I noticed, while I can’t play anything good on the Google logo, I don’t make a horrible discordant racket either. Are the notes on the Google guitar somehow normalized or something so they’re all within a range that sounds “right” together? I doubt if I was to pick up a real guitars and begin randomly plucking at it, it would sound the same. ---
**Author:** ![njtt](https://avatars.discourse-cdn.com/v4/letter/n/ecd19e/32.png) [@njtt](https://boards.straightdope.com/u/njtt)\ **Post date:** [June 9, 2011, 12:12pm UTC](https://boards.straightdope.com/t/interactive-guitar-currently-at-google-com/584821/15 "2011-06-09T12:12:20Z")
Does the rectangular pad (at the bottom, towards the right) do anything? If I click it, it turns red, but I can’t hear any difference in the sounds (mind you, I have no ear for music). Also, why do many of the strings not reach or cross the bridges or pickups (or whatever they are supposed to be)? ---
**Author:** ![Fake\_Tales\_of\_San\_Francisco](https://avatars.discourse-cdn.com/v4/letter/f/8491ac/32.png) [@Fake\_Tales\_of\_San\_Francisco](https://boards.straightdope.com/u/Fake_Tales_of_San_Francisco)\ **Post date:** [June 9, 2011, 12:19pm UTC](https://boards.straightdope.com/t/interactive-guitar-currently-at-google-com/584821/16 "2011-06-09T12:19:17Z")
> [@Jophiel](#): > > I’d asked this in Cafe Society’s thread as well but it seems a GQ – I know nothing about guitars or how to play music on them but I noticed, while I can’t play anything good on the Google logo, I don’t make a horrible discordant racket either. Are the notes on the Google guitar somehow normalized or something so they’re all within a range that sounds “right” together? I doubt if I was to pick up a real guitars and begin randomly plucking at it, it would sound the same. Yeah, on the left side you have a cmaj7 chord, or G variant (C, E, G, B, G, B if anyone is interested in the actual notes) and on the right side you have a D chord (A, D, F# A). I don’t know if those particular chords are significant in any way though. I haven’t noticed the rectangular button do anything. I was expecting a distortion effect of some sort. And it’s very strange how it’s laid out. Any significance to that, or is it just a design thing? ---
**Author:** ![FoieGrasIsEvil](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/foiegrasisevil/32/16638_2.png) [@FoieGrasIsEvil](https://boards.straightdope.com/u/FoieGrasIsEvil)\ **Post date:** [June 9, 2011, 12:21pm UTC](https://boards.straightdope.com/t/interactive-guitar-currently-at-google-com/584821/17 "2011-06-09T12:21:23Z")
> [@Fake\_Tales\_of\_San\_Francisco](#): > > Yeah, on the left side you have a cmaj7 chord, or G variant (C, E, G, B, G, B if anyone is interested in the actual notes) and on the right side you have a D chord (A, D, F# A). I don’t know if those particular chords are significant in any way though. > > I haven’t noticed the rectangular button do anything. I was expecting a distortion effect of some sort. > > And it’s very strange how it’s laid out. Any significance to that, or is it just a design thing? The button is to record you playing. When you’re done you click on it again and it gives you a URL to your recording. Pretty neat. ---
**Author:** ![Fake\_Tales\_of\_San\_Francisco](https://avatars.discourse-cdn.com/v4/letter/f/8491ac/32.png) [@Fake\_Tales\_of\_San\_Francisco](https://boards.straightdope.com/u/Fake_Tales_of_San_Francisco)\ **Post date:** [June 9, 2011, 12:23pm UTC](https://boards.straightdope.com/t/interactive-guitar-currently-at-google-com/584821/18 "2011-06-09T12:23:29Z")
Yeah, I just read this: > **[Playable & Recordable Google Doodle Honors Guitar Great Les Paul](https://mashable.com/archive/google-doodle-les-paul)** > > Playable & Recordable Google Doodle Honors Guitar Great Les Paul Apparently the record function is only available in the US, ahh well, I’ll spare you my beautiful rendition of Love Will Tear Us Apart then. 😃 ---
**Author:** ![running\_coach](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/running_coach/32/15836_2.png) [@running\_coach](https://boards.straightdope.com/u/running_coach)\ **Post date:** [June 9, 2011, 12:24pm UTC](https://boards.straightdope.com/t/interactive-guitar-currently-at-google-com/584821/19 "2011-06-09T12:24:24Z")
> [@Fake\_Tales\_of\_San\_Francisco](#): > > And it’s very strange how it’s laid out. Any significance to that, or is it just a design thing? If you hold your eyes just right, you can make out the Google logo. 😉 ---
**Author:** ![ethelbert](https://avatars.discourse-cdn.com/v4/letter/e/958977/32.png) [@ethelbert](https://boards.straightdope.com/u/ethelbert)\ **Post date:** [June 9, 2011, 12:29pm UTC](https://boards.straightdope.com/t/interactive-guitar-currently-at-google-com/584821/20 "2011-06-09T12:29:13Z")
> [@njtt](#): > > Does the rectangular pad (at the bottom, towards the right) do anything? If I click it, it turns red, but I can’t hear any difference in the sounds (mind you, I have no ear for music). It records what you play. Oops. I gotta refresh more often. [Next page](https://boards.straightdope.com/t/interactive-guitar-currently-at-google-com/584821.md?page=2)