5 ms·
Show HN: box2d-jquery - physics-engine for your DOM
- franze 14y agohiho, basically box2d-jquery is a jquery wrapper around box2dweb, it's quite simple to use $("#some_element").box2d({'y-velocity':10}); it was fun to code, basically it * creates absolute positioned clones of your selected elements https://gist.github.com/4051578 * and animates them usind CSS3 transforms / translate / rotate * the values are calculated using box2dweb i created it as i sponsor a javascript/jquery conference in my hometown (we need more dev-conferences here) and wanted to create something cool. please fork it on github (zlib license) https://github.com/franzenzenhofer/box2d-jquery https://github.com/franzenzenhofer/box2d-jquery update: more examples linked from github Readme.md
- asm89 14y agoVery cool! I created a small bookmarklet that injects it into the system we're developing over here. It's nice to amaze some colleagues real quick. ;) javascript:(function(){var%20s=document.createElement('script');s.setAttribute('src','https://raw.github.com/franzenzenhofer/box2d-jquery/master/js/lib/jquery.box2d.min.js');document.getElementsByTagName('body')[0].appendChild(s);window.setTimeout(function(){$("#main-nav,header").box2d({'y-velocity':5,'x-velocity':-0.05,'debug':false});},500);})(); Note: if you copy this in the omnibox of chrome, you will need to re-add "javascript:" in front of it. Edit: And a working bookmarklet for HN that also injects jquery. javascript:(function(){var%20s=document.createElement('script');s.setAttribute('src','//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');document.getElementsByTagName('body')[0].appendChild(s);s=document.createElement('script');s.setAttribute('src','https://raw.github.com/franzenzenhofer/box2d-jquery/master/js/lib/jquery.box2d.min.js');document.getElementsByTagName('body')[0].appendChild(s);window.setTimeout(function(){$("td:first()").box2d({'y-velocity':5,'x-velocity':-0.05,'debug':false});},500);})();
- franze 14y agocool, here is on for the HN frontpage with a little bit more action (selects every <a> element) javascript:(function(){var%20s=document.createElement('script');s.setAttribute('src','//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');document.getElementsByTagName('body')[0].appendChild(s);s=document.createElement('script');s.setAttribute('src','https://raw.github.com/franzenzenhofer/box2d-jquery/master/js/lib/jquery.box2d.min.js');document.getElementsByTagName('body')[0].appendChild(s);window.setTimeout(function(){$("a").box2d({'y-velocity':5});},500);})();
- egfx 14y agoWow very nice. I want to read what it says but I have a hard time keeping the whole thing still! I have some wicked ideas for this.
- franze 14y agonext version will include collision detection (when to elements colide some custom DOM event will be thrown), so we can start to implement simple (to complex) game logic into the DOM as well.
- olegp 14y agoSomebody please make a bookmarklet out of this.
- federicoweber 14y agothat's exactly the first thought that strike my mind.
- franze 14y agocurrently there is a performance overhead to animate deeply nested HTML elements. so we would basically need a sizzle selector that applies to every HTML page that only selects "not deeply nested" nodes. so ":not(:has())" filters will be needed.
- jQueryIsAwesome 14y agoI was trying to do this but it seems like the implementation haves a little bug: https://github.com/franzenzenhofer/box2d-jquery/issues/1 https://github.com/franzenzenhofer/box2d-jquery/issues/1
- franze 14y agothx, all bug-reports are welcome and will be fixed and tested a.s.a.p.
- orng 14y agoA quick and dirty one that only affects h1, divs and imgs (based off the example on the github page): javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://raw.github.com/gist/4257861/bf99710923dc4512338a9f193e05ff9928b0593b/jqb2d.js;})() https://raw.github.com/gist/4257861/bf99710923dc4512338a9f19...; The code can be found here: https://gist.github.com/4257861 https://gist.github.com/4257861
- jQueryIsAwesome 14y ago
- karl_nerd 14y agoVery nice! Though the API of Box2d is a little bit hairy, i really appreciate how stable it is. We built a DOM-based game/ad-thingee with Box2d this spring (http://embassy.de/game/ http://embassy.de/game/) and using a game + physics engine (CAAT was the game engine) and relative measures was also a pretty good way to make it scale across window sizes!
- nodesocket 14y agoForgive me if I am wrong, but shouldn't a true physics engine not behave exactly the same way every time? I refreshed 5 times and every time the word Hey ended up vertical against the word GitHub. I would expect the interactions between colliding objects to vary every reload.
- franze 14y agonope, a true physics engine behaves the same time, always - if there are no outside forces. if you kick stuff around (use your mouse of fingers on touch devices) == outside force -> different outcome this 2d world has no intrinsic random/chaotic forces (i.e. no wind) so everything behaves the same, always, forever. if you want your world to be more random you could write something like this (during the world initiation phase a.k.a. the first box2d-jquery call) $("h1, code, .box2d").box2d({'y-velocity':5, 'x-velocity':Math.random()}
- jasin 14y agoHowever, different binaries may generally yield slightly different results due to compilers ordering floating-point operations differently, for example.
- franze 14y agolike schrödingers cat for physics engines? but with the difference as long as it is the same box, the outcome is always the same?
- lucian1900 14y agoThat is what physics engines tend to aim for. Some even guarantee portably stable results.
- alxbrun 14y agoWhat happens to the Heisenberg principle ??? :P
- 14y ago
- pjmlp 14y agoSo slow on my browser. Back to native applications coding.
- brador 14y agoDoes this have collision events? So if A hits B is there a way of knowing?
- franze 14y agoit's on the todo list, it will work with custom DOM event events.
- BonoboBoner 14y agoOh my god, I will troll my colleagues with this so hard. I'll add this to our website cms for their IP only and watch them panic "Why is our website falling apart?"...
- killahpriest 14y agoBrilliant idea! I just created a JIRA ticket for this unusual issue we seem to be having with the tiles on the landing pages. Let's see what happens...
- BonoboBoner 14y agoAwesome!
- gavanwoolery 14y agoThe future is here. Kiss your boring, practical webpages goodbye. ;)
- toomim 14y agoThis is great, but it seems a little slower than the raw box2d. Is it doing anything else on each animation loop?
- franze 14y agomostly a lot of looping and setting CSS, see https://github.com/franzenzenhofer/box2d-jquery/blob/master/js/src/main.coffee#L327:L352 https://github.com/franzenzenhofer/box2d-jquery/blob/master/... but yes, performance profiling is the next step, also i wonder if position top / position left is faster than transform+translate... any support is welcome
- robmclarty 14y agoI don't know how this is useful, but I want to use it!