Tag: JavaScript

You probably noticed the funny animated logo on the Google search page today, January 4, 2010 (Isaac Newton’s birthday). It shows an apple falling from a tree reminding of the story that Isaac Newton was inspired to formulate his theory of gravitation by watching the fall of an apple from a tree.

Animation of an apple falling from a tree in Google’s doodle in memory of Isaac Newton’s birthday

As this seems to be the first animated logo on Google’s home page ever, I wondered how it was implemented (in particular, how well the code simulates gravity on earth). Short explanation: As expected, it’s a mix of JavaScript code and CSS formatting. And not surprising either, the algorithm used is an acceptable simulation of gravity on earth (in vacuum).

Here’s a “reformatted” version of the JavaScript code for better readability, along with some explanations as inline comments (note that this “reformatted” code doesn’t work as-is due to the inserted comments):

window.lol&&lol();
setTimeout( // execute this code once after a timeout of 2 seconds
  function(){ // an anonymous function
    var h=0, // initial horizontal offset (=0) of the apple's position
    v=1, // initial vertical offset ('delta_height' = b(t+1)-b(t)) of the apple's position
    f=document.getElementById('fall'), // get a reference to the apple image
    i=setInterval( // execute repeatedly in intervals of 25 msec
      function(){ // yet another anonymous function
        if(f){ // execute if the apple image exists (a safety net)
          var r=parseInt(f.style.right)+h, // add the horizontal offset (will move apple left for h>0)
          b=parseInt(f.style.bottom)-v; // subtract the vertical offset (will move apple down for v>0)
          f.style.right=r+'px'; // set the apple's new horizontal position
          f.style.bottom=b+'px'; // set the apple's new vertical position
          if(b>-210){ // the apple is above ground level (i.e. falling down or bouncing up)
            v+=2 // increase 'delta_height' by 2 pixels per interval (accelerate the apple's free fall or slow down its rebound)
          } else { // the apple hit the 'ground'
            h=(v>9)?v*0.1:0; // bounce apple to the left at 10% of the last 'delta_height' if speedy, else don't move it horizontally
            v*=(v>9)?-0.3:0 // bounce apple up at 30% of the last 'delta_height' if speedy, else don't move it vertically
          }
        }
      }
      ,25 // the interval in msec
    );
    google.rein&&
    google.rein.push(
      function(){
        clearInterval(i); // disable the interval loop
        h=0;v=1
      }
    )
  },2000 // the timeout in msec
)

The apple’s initial position: position: relative; right: 248px; bottom: 46px;

The apple’s final position (after the rebound): position: relative; right: 286px; bottom: -210px;

Some words about the physics:

The simple algorithm used above reflects the constant acceleration during free fall accurately, supposed we’re neglecting the effect of air drag. IOW: height(t) = height(t=0) – 0.5*g*t^2 = h(t=0) – k*t^2.

The rebound of the apple is less realistic though. I doubt an apple would rebound that high and the fact that it rebounds to the left seems to be rather arbitrary (given the image it’s difficult to judge where the apple’s center of gravity would be compared to the contact area when touching the ground on impact). Further, simulating rotational forces on the apple wouldn’t hurt the realism ;)

Symbolism:

It’s not without irony that Google shows a falling apple on its main page, as one reader points out on Mashable’s article about this animation ;)