First of all I won't like to take all credit for this article. This article has been heavily inspired by an article posted on I heavily recommend you to read that article for better understanding. What has been shown here in this demo is just the basic arrow movement and sticking on the wall.

What happens here is that the arrow is given an impulse in it's lateral direction for take off. If we don't do anything else to the arrow it won't rotate. I mean to say that if it shot at an angle of -30 degrees, it will fall at an angle of -30 degrees as there is no air friction or drag in box2d world. So we manually add a drag force to it's tail in opposite direction and it will be such that it rotates a little bit just like an actual arrow.

This drag force will depend upon angle between the direction of movement of arrow and the direction of velocity of the arrow. It will also depend upon arrow's mass and velocity.

And as for the sticking part, I created a weld joint between arrow and wall when they collide based on the criteria that the absolute value of normal impulse due to collision is greater than 200.

Here is a demo of STICKING ARROWS in Box2dweb.

PS: Widescreen recommended.

PS: Please read the's article on Sticky Projectiles.

NOTE: If anyone needs a tutorial on this, please leave a comment or Reply.

By administrator at 12:45:14 AM 12 Comment(s)


Nice job! Seeing your site over the last few weeks has made me take another look at using Box2D with js/canvas for my site. Originally I wanted to put a little 'live' demo on each page so people could see how things worked without having to download anything. I looked into Flash and JS but didn't have much experience in either at the time. I was also a bit put off by the fact that both box2d.js and box2dweb are not kept up with the latest C++ version of Box2D.
By iforce2d on 29 Sep, 2012 at 06:13:26 PM
But this year, I spent about 6 months using javascript at work and I feel much more capable with it now. I also discovered Emscripten, which can convert C++ to Javascript. You can see a demo of it running here: (needs WebGL capable browser).
By iforce2d on 29 Sep, 2012 at 06:13:46 PM
This means that the code could be taken directly from C++ (instead of going through Flash/AS3 first) so it would be easy to keep it up to date when the original C++ is updated.
By iforce2d on 29 Sep, 2012 at 06:14:25 PM
Box2dWeb is definitely a better option than box2d.js, but I get the feeling the Emscripten option may be even better... just wondering if you had heard of it?
By iforce2d on 29 Sep, 2012 at 06:14:43 PM
I would have posted this in a single comment but it seems your form is giving a server error if there is too much text...?!
By iforce2d on 29 Sep, 2012 at 06:15:01 PM
No. I've not heard of Emscripten but the demo on the link you've given looks wonderful. I don't have much experience in C++, just what I've learned in school.
And yes Box2dWeb is definitely a better option than box2d.js. It's simpler.
By administrator on 29 Sep, 2012 at 08:42:43 PM
Also I've no idea why there is a server error due to too much text. You see I am a Mechanical Engineer and this is only my hobby. I've no Professional Training in Web Designing or Box2dWeb or javascript. I love games on browsers especially those involving physics and therefore I turned my attention towards Box2dWeb.
And yes, thanks for Encouragement. :)
By administrator on 29 Sep, 2012 at 08:45:38 PM
And they should keep updating Box2dWeb!! Like Rope Joint is not available in Box2dWeb.
By administrator on 29 Sep, 2012 at 08:51:39 PM
I was looking at box2d.js (emscripten) and while it has great performance and will have forward-compatibility guarantees it requires Typed Arrays support which many platforms (like iOS 5) do not fully implement. Box2dweb seems like a pretty reasonable stopgap.
By unphased on 13 Oct, 2012 at 09:44:22 AM
@unphased You can replace Float64Array with Float32Array, seems to work on iOS 5 (not on iOS 4 though) You can try my experiment here if you like:
By iforce2d on 13 Oct, 2012 at 04:59:10 PM
@unphased But it's true that there are many issues yet to be resolved before the emscripten port is as usable as Box2dWeb. I am not so hot at JavaScript so I am trying to get help here, maybe you can follow this:
By iforce2d on 13 Oct, 2012 at 05:04:04 PM
@iforce2d I have been able (using a few undocumented emscripten features) to assemble a b2Vec2 array which has allowed me to instantiate a chainshape. I may do some work to see if I can get a mousejoint going. One thing that the emscripten port lacks is a reasonable way to get debug draw easily, but it seems like you've barreled through that obstacle already, from looking at your example page. Your Float64Array to Float32Array fix worked really well, also. Thanks so much for that. What I'm really curious about is whether you've been able to successfully compile box2d from the C++ source using emscripten. I've been having difficulty with this, it produces a JS file that attempts to call the value 0 as a function.
By unphased on 19 Oct, 2012 at 03:58:10 AM

Add a Comment

Please enter the email address.Invalid format. (Won't be Displayed)
Notify me of followup comments
Enter the displayed Code: captcha