Google’s 15th birthday doodle how did they do?

By

September 28, 2013HTML5No comments

Google’s 15th birthday was celebrated with a pinata themed doodle that showers chocolates when hit with a stick.Score is calculated based on the number of chocolates that fall from the pinata and you cannot hit more than 10 times.

google doodle

Ok that was one awesome doodle and hours of hitting madness.Now back to business! How Google created this doodle and what logic was applied to obtain this effect? Lets Dig in.

 Creating Google’s 15th birthday doodle

Resources:

List of images/audio/sprites that are used in the doodle

1. Static Image

This static image loads by default on all the browsers.If the HTML5 is not supported then it will be remain as is.

doodle home page

2.Image Sprite

If the browser supports HTML5 you need to load the images dynamically using sprites.This will reduce the bandwidth as all the images are stitched into one single sprite.This can be cropped to fit the single image based on the needs.

<Image sprites Generator>

initial sprite

 

Sprite coordinates should be defined in the JavaScript

doodle sprite

 

 

3.Audio

A merry sound that loads in the background starts playing immediately after the “play” button is clicked.HTML5 audio is implemented here and it uses the audio file with extension .ogg and .mp3 depending on the compatibility. OGG file is a container for audio files that consumes less amount of bandwidth and hence used instead of mp3 file format.

link to the audio1,audio2

Two kinds of files are available in the page.One that is played on loop and another one when the stick hits the pinata.Click both the files to play.

audio load

 

4.HTML5 canvas

The entire doodle is placed in the HTML5 canvas container and updated dynamically using javascript functions.The first step in creating a html5 canvas is to get the application context

html:

<canvas id="hplogoc" width="662" height="224" style="cursor: default;"></canvas>

Javascript:

a= document.getElementById("hplogoc");
a.getContext && ($ = a.getContext("2d"));

 

Some Basic concepts that help you in understanding better.

1. loadedmetadata

This is the JavaScript event that is triggered if all the required data for audio and video files are loaded in the browser.

2.Requestanimation frame

After the background music starts playing , if you switch to another tab you can note that music stops playing.This is because of requestanimation frame which stops the process if the user is not viewing it currently.This enables better browser performance and efficiency.

3.DrawImage

This HTML5 feature enables browser to select the image part from the sprite and load them into the visible frame.

4.Ternary Operator

This is a conditional statement used in javascript to execute the program based on the conditon

ternary operator

In this example if the variable x is set as 10 if it is not zero.

Actual action starts when the user presses play button.The audio file starts playing and the browser is now waiting for the event to trigger.

As you can see pressing space bar will wave the stick at the pinata.browser waits for the space button event to trigger by looking for the keycode number.

The keycode number for space bar is 32.

javascript key code event

 

Pinata Movement

The hanging pinata moves like a pendulum using the canvas drawing

doodle pinata

 

Once the stick hits the pinata the position is calculated at that point of time and score is increased based on the place of impact.

Scoring Categories

In the end when the user completes all the 10 tries a popup image will appear based on the score.

google endscreen

Similarly the scores can be shared in google+ using the score specific image

 

score final

 

Button transitions

doodle buttons

 

color transition

 

 

Also Read

How google creates interactive doodles
Google first world’s fair magnifying glass doodle-how did they do ?
Google dancing animation doodle- How did they do

Related posts:

Leave a Reply