2012-05-23

Google Electronic Music Doodle

今天的Google首頁來了一個互動性頗高的Doodle.
紀念電子合成器之父 Robert Moog 78歲的誕辰...



自己錄了一小段操作方法,有人猜的出我彈啥嗎?
如果很會玩電音的人來彈,應該可以玩出令人驚奇的音樂吧~


官方介紹影片:




再來分析內容及做法:

電子合成器音箱空殼:
https://www.google.com/logos/2012/moog-hp-base2.png



鍵盤按鍵零件:
https://www.google.com/logos/2012/moog-hp-k-sprite.png


音箱及控制儀表板:
https://www.google.com/logos/2012/moog-hp-sprite2.png



分割取小圖語法:
#moog-discovery{background:no-repeat url(/logos/2012/moog-hp-sprite2.png) -253px -401px;height:72px;left:213px;opacity:0;position:absolute;top:65px;width:39px;z-index:-10005}
#attacktime.knob-showoff,#moog-glide.knob-showoff,#decaytime.knob-showoff,#contouramount.knob-showoff,#sustainlevel.knob-showoff,#mastervol.knob-showoff,#moog-osc2-pb.knob-showoff,#moog-osc3-pb.knob-showoff,#cutoff.knob-showoff{background:no-repeat url(/logos/2012/moog-hp-sprite2.png) -194px -330px;opacity:0.3;}
....
....


排版組合:




行為動作:
[JavaScript]:

(function(){google.doodle||(google.doodle={});var a=document.createElement("script");a.src="/logos/2012/moog.2.js";a.async=!0;document.body.appendChild(a);})();


早上的版本: https://www.google.com/logos/2012/moog.2.js
下午再看到的版本: https://www.google.com/logos/2012/moog.4.js
晚上再看到的版本: https://www.google.com/logos/2012/moog.5.js

原來同一天裡,Google還會繼續小修程式呀...

沒有留言: