13

Google gravity and gravity script are two nice demonstrations. but no source code or tutorials are available. and the original JS files are very big. How can I create a Gravity effect with Drag & drop(specially being "Throw able" and "rotatable" like google gravity) on a certain element?

Towhid
  • 618
  • 2
  • 5
  • 19
  • 7
    Looking at your second link, the code is absolutely available -- it's at http://gravityscript.googlecode.com/svn/trunk/gravityscript.js. It's big, but that's because it includes several libraries, including jQuery and Box2D. Beyond that, it's actually fairly readable. Just skip skip past the big blocks of minified JS to the actual formatted code. – Ian Clelland Jan 11 '12 at 19:47
  • Actually, if you look at the src code of the gravity script http://code.google.com/p/gravityscript/source/browse/trunk/gravityscript.js, only the jQuery src code is obfuscated, but the code for the gravity is not. It should be not hard to figure that out. – Grace Huang Jan 11 '12 at 19:49
  • 1
    Similar to http://stackoverflow.com/questions/2185850/drag-elements-around-with-gravity-effect – j08691 Jan 11 '12 at 20:33
  • It is easy to build a Gravity Effect. but What I need most is the algorithm that is used to make "google gravity" Elements "Throw able". it's not just moving and releasing. It also is "rotatable" which is very important. – Towhid Jan 11 '12 at 20:53
  • @Towhid: The rotatable appears to be (from playing with it) by treating the mouse as a pivot point you're holding it by (with some amount of friction). The "algorithm" then in known as Newtonian mechanics. – derobert Jan 11 '12 at 21:20
  • Looking at the first link, the gravity calculations are always the same, making the end result always being duplicate. You could add some "breeze" (random side wind force) to the scene too, which will make the outcome of the falling objects more natural. –  Mar 24 '13 at 12:10
  • See [matter-attractors](https://github.com/liabru/matter-attractors) and [this answer](https://stackoverflow.com/questions/31938109/matter-js-gravity-point/74816915#74816915). – ggorlen Dec 15 '22 at 20:35

3 Answers3

10

You will want to start with a physics engine, the one Google Gravity uses is Box2Djs which is a javascript port of Box2D. You can read the manual for Box2D to learn how to use it, though the manual itself states that you will have little idea what you are doing without some knowledge of rigid body physics (force, impulse, torque, etc), though these examples may help you get started.

If you want to write the physics engine yourself you will have to at least implement 2D rigid body dynamics and collision detection for it to look like the examples you gave. A tutorial for doing that would be called a computer simulation class and would have a linear algebra and physics I prerequisite, it's not a trivial task.

Afterwards, you will have to learn about javascript animation techniques. I recommend learning about window.requestAnimationFrame. Using setInterval(stepFunction, time) will work but it won't be as efficient as it could be in modern browsers.

nwellcome
  • 2,279
  • 15
  • 23
  • 1
    thanks,JS version of it is available @ box2d-js.sourceforge.net/index2.html . but I want to create this effect on actual HTML elements. for example I have a few Social buttons which fall when page is activated and users can throw them and play with theme:) . Box2dJS is great for Web based game developing but I think its based on "convas" not HTML elements. – Towhid Jan 13 '12 at 12:53
6

Look a this jquery plugin on github JQuery.throwable just do $("Selector").throwable() and the object will be under gravity

benahm
  • 221
  • 2
  • 8
2

One other framework to consider: Matter.js — Demo: Easy Physics Sandbox in JavaScript.

The Physics

Gravity is hard. That's because gravity is curved spacetime, and we can only make 2d representations of this warping that happens in the third dimension.

On the other hand -- moving an element at a consistent 9.8 m/s^2 in a linear direction towards one direction, that's actually not too hard to implement.

The CSS Solution

All we really need is transition: all 1s linear; to control the speed of the animation, margin-top to animate the element moving downward, and transition-timing-function with a cubic-bezier that's fairly representative of 9.8 m/s^2.

The Demo

document.addEventListener('DOMContentLoaded', function(event) {
    document.getElementById('drop').addEventListener('click', function(ev) {
        div = document.createElement('div');
        div.classList.add('gravity-affected-object');
        image = document.createElement('img');
        image.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Red_Apple.jpg/640px-Red_Apple.jpg';
        image.width = 100;
        image.classList.add('gravity-affected-object');
        div.style.position = 'absolute';
        div.style.left = '50%';
        
        div.appendChild(image);
        
        document.getElementById('page-top').appendChild(div);
        setTimeout(function() {
            div.style.marginTop = '1000px';
        }, 100);
    });
});
.gravity-affected-object {
    transition: all 1s linear;
    transition-timing-function: cubic-bezier(0.33333, 0, 0.66667, 0.33333);
    z-index: -5000;
}
<div id="page-top"></div>

<button id="drop">Drop</button>
HoldOffHunger
  • 18,769
  • 10
  • 104
  • 133