Skip to content

Box2d applied to DOM elements for flying clickable things and more...

Notifications You must be signed in to change notification settings

fhoenig/HeavyBoxes

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

=========================================================================
HEAVYBOXES - DOM Physics

Florian Hoenig
=========================================================================

1) ABOUT

HeavyBoxes is a Javascript library adding physics to DOM elements using 
Box2D and HTML/CSS transforms (rotation).

Heavyboxes was written to implement "episode 1" for http://rianflo.com.
The funny thing about having DOM nodes flying around is that you can still 
click, drag, select, submit a form or do whatever the normal elements 
can do. I wonder what fun things can be created around that effect. 
Maybe we really need to fill out upside-down forms while birds are 
bumping into the submit button?
If you make anything, I'd love to hear about it.

2) BASIC USAGE

Dependencies: heavyboxes.js still uses the version of box2djs which 
depends on prototypejs. Personally I am not a big fan of that and many 
might agree, but it works for now. All other dependencies for the example 
are in /lib.

// 1: Initialize the physics world inside the world div.
// This will create a frame of static bodies around the div's boundries 
// to keep objects from falling outside of the world. The div need a 
// fixed size or the behavior is undefined.

var heavyBoxes = new HeavyBoxes($('world'));
heavyBoxes.run();

// 2: create a dom element or tree of elements (don't attach it yet)
var newDiv = document.createElement("div");
newContent = document.createTextNode("Hi there and greetings!");
// add the text node to the newly created div.
newDiv.appendChild(newContent); 

// 3: add physics body and add to world/DOM
// add at position (120, 60) with initial velocity (-10, 0)
var actor = heavyBoxes.addBox(120, 60, newDiv, -10, 0);

Also check out example1.html for the original 
implementation of "Twittershitter".

Enjoy!


3) LICENSE

Copyright 2012 Florian Hoenig

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

About

Box2d applied to DOM elements for flying clickable things and more...

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published