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!
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.
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.
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.
I found the images used:
I like how the strings stick to the mouse.
Yeah… BTW I found a better obsfucator…
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:
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?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
...|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,{}))
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.
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.
I don’t know if anyone is interested. But I did some digging, and found the old Google Pac Man game here. You can find all the past Google “logos” (including the interactive guitar) right here.
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
Buckyballs
http://www.google.com/logos/buckyball.html
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.
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.
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)?
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.
Yeah, I just read this:
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. 
If you hold your eyes just right, you can make out the Google logo. 
It records what you play.
Oops. I gotta refresh more often.