Make project like Google Gravity using box2d-jQuery 2

The first time I saw google gravity project, I was astonished and wanted to do the same. And recently i found a jquery plugin for that. Thanx to franz enzenhofer  for creating this awesome plugin which can convert your DOM into physical objects. Have a look at my first miniature project.

Live Demo

How I made this :

• First of all i needed some pictures of my friends . so used fql query to extract image url of my batch mates from facebook.

• I made images circular using following code

img{
   -webkit-border-radius: 50em;
	-moz-border-radius: 50em;
	border-radius: 50em;
}

• Imported Jquery and box2d files.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="./js/lib/jquery.box2d.min.js"></script>

• After  DOM was ready , did this simple jquery function call

$(document).ready(function() {
$("h1").box2d({'y-velocity':10, 'density':2});
$("img").box2d({'shape':'circle','density':0.1, 'restitution':0.8, 'friction':0.2});
  });

.box2d() takes a few options

 {
    'y-velocity': 10, /* everything falls down, default 0 */
    'x-velocity': 10, /* everything falls right, default 0 */
    'debug': false, /* fancy debug modus using canvas, default false */
    'static': false, /* true ... it stays | false ... it moves, default false */
    'density': 1.2 ,/* think weight (relational to its size) between 0 and n, default 1.5 */
    'restitution': 0.4,/* think: bounciness, from 0 to 1, default 0.4 */
    'friction': 0.3, /* think: slideiness, from 0 to 1, default 0.3 */
    'shape': 'box' /* default "box", but could also be a "circle", it it's not a "circle", it's a "box"*/
    }

Pretty simple isn’t it?

Source : https://github.com/franzenzenhofer/box2d-jquery