Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Apply physics to HTML elements

Gravity is a box2dweb wrapper for HTML elements. It provides a way to apply physics to HTML elements, define gravity, handle collisions, apply different parameters as friction, restitution, density and even drag physical HTML element bodies.

Package contains gravity.js, gravity.packed.js (packed javascript) and three example files: simple_example.html, example.html, and dragging_example.html to demonstrate class functionality.

Contents

Download

Example codes

<h1 id='heading' style='width: 300px;
 text-align: center; background-color: red;'>Website heading</h1>
<h1 id='heading2' style='margin-left: 250px; margin-top: 300px; 
width: 300px; text-align: center; background-color: red;'>Website heading2</h1>
</pre>
<pre class='brush:js;'>
<script type='text/javascript'>
var gr = new gravity({
    boundaries: 'document'
});
gr.add('heading', {
    fixed: false,
    restitution: 1,
    friction: 0.1,
    density: 1,
    includeChild: false
});
gr.add('heading2', {
    fixed: true,
    restitution: 1,
    friction: 0.1,
    density: 1,
    includeChild: false
});
gr.load();
</script>

Video Example

Examples in action

Example scripts provided with package in action:

Method list

Constructor

Back to method list

Method namenew canvicon(config);
DescriptionCreate gravity world
Input parameters

json config - Json structure with configuration properties

  • int xGravity - gravity vector on x axis (default: 0)
  • int yGravity - gravity vector on y axis (default: 9.8)
  • float interval - interval at which to update positions of physical bodies (default: 1000/60)
  • bool debugDraw - enable debugDrawing output of physical bodies (default: false)
  • bool dragging - enable dragging of dynamic (not fixed) objects (default: true)
  • string or HTMLelement boundaries - define world boundaries, so objects won't simply fall out of the screen's viewport (default: 'document'). Supported values:
    • document - HTML document is used as boundaries for world
    • viewport - Viewport is used as boundaries for world
    • id of HTML element or HMTL element itself - dimensions of HMTL element defines the boundaries of world
  • function onBeginCollision - callback function when collision begins between any two or more objects. As function agument, array with collisions is provided, where each collision is also an array with HTML element that are colliding in current collision or string value 'bound', which means HMTL object is colliding with boundary wall
  • function onEndCollision - callback function when collision ends between any two or more objects. As function agument, array with collisions is provided, where each collision is also an array with HTML element that are ending their collision or string value 'bound', which means HMTL object is ending collision with boundary wall
Example input
var gr = new gravity({
	xGravity: 0,
	yGravity: 9.8,
	debugDraw: false,
	dragging: true,
	boundaries: "document"
	onBeginCollision: function(collisions){alert(collision);}
});

Add HTML element as body

Back to method list

Method nameadd(elem, config)
DescriptionAdd physical body to HTML element with provided configuration
Input parameters

string or HTMLelement elem - id of HTML element or HTML element itself

json config - Json structure with configuration properties

  • bool fixed - not fixed or dynamix body has different forces as gravity applied to it, fixed body also has physical body and can collide with dynamic bodies, but it will never be moved (default: false)
  • double restitution - the bounciness of element, 0 means HTML element won't bounce back on collision and 1 means, it will bounce back with equal force, that it collided with (default: 0.2)
  • double friction - friction of bodies surface, 0 - it will slide, 1 - it will hardly move on surface (default: 0.1)
  • double density - density of material, which object is make, which effects the mass of object (default: 1)
  • bool includeChild - if true, than bodies won't be created for provided HTML element, but for all its children (default: false)

Load the bodies

Back to method list

Method nameload()
DescriptionAfter adding physical bodies to HTML element, call this method to load this bodies to physical box2d world

Remove physical body

Back to method list

Method nameremove(elem)
DescriptionRemove physical body from HTML element, note that HTML element will be kept in it last position with physical body.
Input parameters

string or HTMLelement elem - id of HTML element or HTML element itself

Apply force

Back to method list

Method nameforce(elem, xVector, yVector, x, y)
DescriptionApply force to HTML element
Input parameters

string or HTMLelement elem - id of HTML element or HTML element itself

double xVector - vector of force on x axis

double yVector - vector of force on y axis

int x - x coordinate relatively to which to apply the force (optional, default value center of HTML element)

int y - y coordinate relatively to which to apply the force (optional, default value center of HTML element)

Apply impulse

Back to method list

Method nameimpulse(elem, xVector, yVector, x, y)
DescriptionApply impulse to HTML element
Input parameters

string or HTMLelement elem - id of HTML element or HTML element itself

double xVector - vector of impulse on x axis

double yVector - vector of impulse on y axis

int x - x coordinate relatively to which to apply the impulse (optional, default value center of HTML element)

int y - y coordinate relatively to which to apply the impulse (optional, default value center of HTML element)

Apply torque

Back to method list

Method nametorque(elem, torque)
DescriptionApply rotattion to HTML element around it's own center
Input parameters

string or HTMLelement elem - id of HTML element or HTML element itself

int torque - force of rotation around it's own center

Check if has body

Back to method list

Method nameisBody(elem)
DescriptionCheck if HTML element has body, return true if it has one and false if not
Input parameters

string or HTMLelement elem - id of HTML element or HTML element itself

Latest changes

None for now

You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus