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.

Vaughn

I changed my answer after realizing that it would need some work to be able to function with SVG's, please see my updated answer below. – Posehn

Answer 1

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.

Vaughn

Answer 2

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.

Zygospore

Thanks, but that's not quite the simple introduction I was looking for. So it can be done, but like other examples I've seen it almost anything can be done. What I really need is a simple example of how to add my existing elements to a Box2D world and make them fall. – Vaughn

Answer 3

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.

Zashin

Thanks. Those links (especially the last) look promising (most useful contribution so far), but I can't see how to add existing SVG shapes. It looks like that demo uses the poly draw functions directly again. – Vaughn

This link doesn't have a step-by-step explanation but you can check it out: soledadpenades.com/2011/10/31/macabre-pool – Zashin

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.

Posehn

Thanks for trying, but as you say, it's not hello world, nor is it shapes falling under gravity. SVG id the icing on the cake really. DIVs are OK, and SVG elements are not that dissimilar. I'm almost certain this can be done with a code sample that would fit inside a SO post, but clearly it's a niche, and a tricky one. I should clarify to everyone that I'm not looking to find out whether it can be done. I already know that and I've picked out the technology, I even have an example in my answer. But for a useful SO answer it needs to be a hello world sample illustrating HTML elements falling. – Vaughn

That was my last answer (sort of) that I thought wasn't good, I'm reverting it. – Posehn

Thanks. But this is the same script I already demonstrated in my own answer. I really need somebody who understands Box2DWeb and the skeleton code required to include elements and apply gravity as I've not been able to find such a tutorial on the Web. I'm still confident that this is a code snippit that would fit in a SO answer. – Vaughn

It's a useful fiddle for the records though! – Vaughn

I'm not sure I entirely understand your question, you want to take elements (like div's) that are already on a page and put them into a Box2DWeb world? Or just apply gravity to them? – Posehn

Basically yes. Just a simple example that allows me to animate an existing set of HTML elements (SVG ideally) and make them fall to the ground. – Vaughn

Answer 5

I don't really know 'Box2d', and I'm not sure if this is what you mean but just to clarify if it comes to where you need it, in HTML5, it works like having the background or style to a <table>, Which if you don't know is just about the same thing as a table in MS Word.

Sample Canvas:

<canvas id="myCanvas" width="200" height="100"></canvas>

More Color & Style:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

And If Allowed in 'Box2d' add some javascript:

<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");

    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
</script>

Condemnation

I'm a little confused - are you posting an answer to the right question? – Vaughn

That's what I meant in the top, I wasn't sure if this is what you mean and I'm not totally familiar with 'Box2d' – Condemnation

Answer 6

Well, Dmitry's newton.js is not yet public. But like @cirrus, I needed something similar. So I've gone ahead and created my own newton.js. It is not well tested, but has API similar to what I can see in Dmitry's video + my own requirement (I wanted to create a game engine on top of Raphael as a renderer)

Please fork at - https://github.com/dbose/newton.js

@cirrus, it also has a simple test.html, which takes a simple Raphael element and add it to the Box2D "world"

Contextually, I needed this because the core of my app (Mixow) was a Raphael editor and later I wanted to create a game maker out of it. (http://www.mixow.com)

Ferland