StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POJavascript physics engine and simulated infinite curve
text
Body
copied!<p>I'm trying to do a Tiny Wings like in javascript.</p> <p>I first saw <a href="http://www.emanueleferonato.com/2011/07/14/create-a-terrain-like-the-one-in-tiny-wings-with-flash-and-box2d/" rel="nofollow noreferrer">a technique using Box2D</a>, I'm using the <a href="https://github.com/SuperSkunk/box2dweb-closure" rel="nofollow noreferrer">closure-web version</a> (because of the memory leaks fix).<br> In short, I explode the curve into polygons so it looks like that:</p> <p><img src="https://i.stack.imgur.com/0pAMe.jpg" alt="enter image description here"></p> <p>I also tried with Chipmunk-js and I use the segment shape to simulate my ground like that:</p> <p><img src="https://i.stack.imgur.com/SHz2L.jpg" alt="enter image description here"></p> <p>In both cases, I'm experiencing some "crashes" or "bumps" at the common points between polygons or segments when a circle is rolling. </p> <p>I asked about it for Chipmunk and the author said he implemented a radius property for the segment to reduce this behavior. I tried and it indeed did the trick but it's not perfect. I still have some bumps(I had to set to 30px of radius to get a positive effect).</p> <p>The "bumps" append at the shared points between two polygons :</p> <p><img src="https://i.stack.imgur.com/hpt45.jpg" alt="bump bug"></p> <p>Using, as <a href="https://github.com/illandril" rel="nofollow noreferrer">illandril</a> suggested to me, <strong>the edging technique</strong> (he only tested with polygon-polygon contact) to avoid the circle to crash on an edge:</p> <p><img src="https://i.stack.imgur.com/35kpC.jpg" alt="slope edging technique"></p> <p>Also tried to add <strong>the bullet option</strong> as Luc suggested and nothing seems to change.</p> <p>Here <a href="http://superskunk.github.com/Box2DExperiments/Snowball/" rel="nofollow noreferrer">the demo</a> of the issue.<br> You can try to change the value to check :</p> <ul> <li>bullet option</li> <li>edge size</li> <li>iterations count</li> <li>the physics</li> </ul> <p>(only tested on latest dev Chrome)<br> Be patient (or change the horizontal gravity) and you'll see what I mean.<br> Here <a href="https://github.com/SuperSkunk/Box2DExperiments/tree/develop/Snowball/brunch/app" rel="nofollow noreferrer">the repo</a> for the interested.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload