Add existing SVG or HTML5 Elements to a Box2D World

Question

I have an SVG logo made up predominatly of elements. I want to animate this, or more specifically drop it into a "gravity world". I was hoping to use Box2D (web port).

I'm a noob to Box2D and Canvas really, but I've got as far as converting my SVG into HTML5 canvas using canvg and I'm now reading through the getting started tutorials for Box2dWeb and I can see how to create a world with gravity, but I can't find any examples of walking an existing SVG or Canvas and simply adding the shapes to that world.

It looks like you need to use the Box2D drawing methods. Can anyone point me at a simple example that takes an existing set of shapes (SVG or on Canvas) and simply drops them onto a Box2DWeb gravity world so they simply collapse to the bottom, much like nearly all the existing Box2D demos and tutorials?

Note that with CanVG I'm not adding the shapes to Canvas myself, it is creating the Canvas for me from the SVG.

Answer 1

You can add whatever you want on top of box2d. If you wanted to draw dancing elephants instead of a box shape, that's up to you. Otherwise games would look pretty boring.

Nothing prevents you from using either SVG, canvas, WebGL or even HTML with box2d, you don't need to use the box2d drawing methods if you don't want to.

See this blogpost (and code) for using box2d together with raphaël (SVG). Dmitry Baranovskiy (the author of Raphaël) has also shown some demos of a custom box2d port/wrapper called newton.js. It's not yet released AFAIK, but it promises a simpler and more javascript-like API.

Answer 2

Please check out these links,

1) Box2D orientation for the JavaScript developer
2) Box2dweb Study Notes Series
3) BOX2D JS – PHYSICS IN HTML5 & JAVASCRIPT GUIDE

Regarding the html elements to apply box2d effects i also can't find any other links expect the one you mentioned in your answer.

Answer 3

I had been hoping that with a bounty somebody would be able to illustrate for me the "hello world" of 'gravity demos' that could animate some arbitrary shapes. Articles and links I've been shown (and found) so far are much more complicated than I'm looking for.

Whilst I hate to answer my own question, I'd just like to set the bar. This is EXACTLY what I'm looking for;

http://mrdoob.com/projects/chromeexperiments/google-gravity/

This script for this code is licensed under GPL3 I understand and I've tried it out successfully on my site. In fact, it just causes all the DIVs on my page to drop, so it's just the ticket, and I could use it.

It's not however, a simple script. I'd have preferred a simple stand-alone sample if it were possible. Failing that, hopefully this answer will help anyone else looking for something similar.

[Updated]

I've also since found this plugin, although it's a little CPU intensive and crashed Chrome for me.

http://tinybigideas.com/plugins/jquery-gravity/

I'd still be delighted to award the bounty for any better answers.

Answer 4

I'm pretty sure that this is what you want, it uses Gravity Script (the file's so large because it includes jQuery and Box2d.js):

Demo: http://jsfiddle.net/SO_AMK/Cf7jn/

JavaScript: None! It's in it's default configuration.