Make project like Google Gravity using box2d-jQuery 4

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

  • http://twitter.com/enzenhofer franz enzenhofer

    hiho, i published a new version of box2d-jquery on https://github.com/franzenzenhofer/box2d-jquery, with major performance improvements, would be cool if you update your great tutorial with it. thx

    • http://techgigs.in/ pawan maurya

      Sure, I’ll do that and thanx for passing by :)

  • John Moses

    This is really great…

  • Nicolas_Cacace

    friction doesn’t seem to work. If the range is 0-1 then I would expect that a value of 1 would stop almost immediately after an object is no longer being acted upon, such as when you push a box on the ground as apposed to a curling stone on ice.

Join The Geek Side

Recommend on Google