-
Notifications
You must be signed in to change notification settings - Fork 2
fhoenig/HeavyBoxes
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
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 0
No packages published