Modeling Physics in Javascript: Gravity and Drag | Hacker News Reader

Modeling Physics in Javascript: Gravity and Drag

burakkanber.com

91 pointsbpierre38 comments

I wrote something like this a couple years ago[1]. I also attempted to support ball-to-ball collisions. I rarely do any graphics type programming so this was a fun diversion.

However, the simulation would slow down considerably after adding a few dozen balls. This was largely due to the quadratic nature of my naive collision detection. In order to remedy the speed problems I implemented[2] a quadtree I found online to assist me in culling a lot of my expensive collision checks. The bounds of the quadtree sections will appear as you begin to add balls.

Unfortunately the quadtree wasn't the performance savior I expected it to be. I didn't notice a dramatic improvement in the number of balls I could support. I also introduced a bug with the quadtree version where certain collisions are missed entirely.

Perhaps I should revisit this simulation and see where I was off.

[1] - http://jsfiddle.net/simucal/RvA9w/33/

[2] - http://jsfiddle.net/simucal/RvA9w/

Instead of quadtrees take a look at spatial hashing[0]. It's more simple than quadtrees and the performance is similar if not better.

[0] http://www.gamedev.net/page/resources/_/technical/game-progr...

I know it is educational and it does not matter in presence of dissipation, but it would be nice to mention that Euler method is not only an approximation but also terribly inaccurate one. It won't produce any stable oscillations or orbits for instance.

I actually mentioned that in a comment lower on this page. I will be talking about ODE solvers a couple of articles from now. The Euler method isn't acceptable for actual simulation but it's the easiest to understand and it gets the job done for now!

The Velocity Verlet integration method isn't much of a jump in complexity (http://en.wikipedia.org/wiki/Verlet_integration#Velocity_Ver...) and works _great_ for kinematic simulators.

As a cool feature, it maintains the energy of the system, so you can slow down, stop, and then rewind time and arrive at the same previous configuration, all by changing the delta T's inside the evaluation.

I'll definitely be talking about this one in my Solvers article!

be sure to read "numerical recipes in c" chapter 16 first.

fwiw the only thing you need to do to be one of the best references on numerical integration in js on the net is translate the code to javascript...

Not if you are doing dissipation, as in this case.

I've messed around a bit with the Bullet physics library and was wondering if anyone knows how it works under the hood. It's not brute forcing the collisions, because it can handle thousands of objects.

Does anyone know how they do the approximation? There is a fudge factor you can set for say a 10% boundary around an object, where it's almost like it moves all of the objects and then takes a best guess where they should be placed for the next physics frame. But I'm curious what their approach is called, if it's a general solution.

Look into quadtrees, that's a good way to do collision detection in 2d. Or just partition your world into a fixed grid and only consider collisions with objects in the same grid square. Quadtrees are just a smarter way of doing that.

I recently did something somewhat physics related, implementing Kepler's laws of planetary motion in JS to produce a 3d simulation of the solar system: http://www.asterank.com/3d/ ...I plan to generalize it into an open source educational tool that allows people to build arbitrary space simulations on top of its physics engine.

Another interesting JS physics experiment that I found while looking into this stuff is this n-body gravity simulator: http://www.spacegoo.com/solar_system/

Awesome! I couple years ago I made a simple game that uses orbital mechanics too: http://burakkanber.com/orbit

If it will help at all feel free to poke through the source code!

Very good article and very good explained. I have a hard time really getting physics but if my teachers would have explained it this way I might actually have had fun with it :)

Thanks! That's what this series is all about. Physics and math really are fun, you just need to figure out an application that excites you and also have someone teach it to you in a manner that keeps you engaged. That's what I'm trying to do here, so if you're interested you can sign up for the mailing list and I'll send you emails when new articles are posted!

Yes, did this already :) thanks for making these articles!

The page won't come up for me. Is it already hurting from being HN'ed with only 26 upvotes?

Yeah it's a tiny box with Wordpress on it. Fixed!

Also, it would be great to notified about ALL your blog posts, not only this series. :-)

Thanks for the support! I wanted to set it up so that I'm not flooding inboxes-- so you may be better off subscribing to the blog's Atom/RSS feed :)

Move the Fiddle to the top of the page, and get much more user interest.

Thanks for putting up the email subscriptions

This might become my favorite blog ever.

You really want to play with physics/math with ECMA 262? O_O (hint JS knows nothing of integers) Floats are way to slow (and faulty when div/mul are called) compared to int to do anything serious. All 3D engines tricks are about doing complex math with integers (EDIT: or other tricks http://en.wikipedia.org/wiki/Fast_inverse_square_root#Overvi...)

Why would you post a link to an example using floats then? I mean sure, part of the trick involves treating the float as an integer but the number is still meant to be interpreted as a float.

Your assumptions about speed might be true for something like a Nintendo DS which doesn't have a floating point unit but a 3DS does, a vectorised one no less. Also in Javascript integers that can fit into 32 bits are actually integers nowadays.

All in all, I believe your information is outdated.

Without tests at first glance I might be having false asssumptions on modern JS optimisations: NaCl (C) http://juliamap.googlelabs.com... VS http://www.atopon.org/mandel/# does not strikes me as JS being an order of magnitude slower than NaCl.

It looks like I might be very wrong.

I will make my opinion later by calculating decimal of PI or something like that in C and in JS to benchmark.

I think I need to update my knowledge. :)

Not to mention that most modern games and physics engines all use floating point numbers these days. We're not in the 90's anymore - gpu's all support floats natively and are very fast at processing them, cpu floating point units are as fast as integer units, SIMD (eg SSE) supports fast floats and doubles. There's really no reason to avoid floats unless you're doing something very very special (hint: if you're arguing about these things, you're probably not).

Havok, Bullet, PysX - as far as I know they all use floats.

You really want to discourage someone playing with physics/math in their browser?

Well, I would discourage playing with math if accuracy was important. Just open firebug and multiply

  >>> 10*1.1198 
  11.197999999999999

This limitation is intrinsic to IEEE 754, and no alternative are in the pipe (IEEE854 seems stalled).

I have been working for the web ads industry and canvases were pretty disappointing in terms of performance when the number of sprites were growing up. The funnier part was the inconsistency in result amongst the browsers.

So simulate as much as you want, just don't expect to beat flash or native client in terms of performance...

But for physics, that result is great! An inaccuracy of just one part in 10^12 would be better than practically every physics experiment ever performed. That's like being off by the size of an atom when measuring the distance from LA to New York. (I'm speaking as a physicist rather than as a programmer here, mind you. But my limited experience programming physics would suggest that this is a perfectly acceptable level of error.)

You're totally correct. And honestly, when you're doing numerical simulation like I am in the article, your error stems from the fact that you're only simulating 40 steps a second with only a first-degree solver.

Simulating physics for realsies takes a lot more than that.

The solver algorithm I used is called Euler's method, or ODE1 for short. It's the least accurate numerical ODE solver there is! When people do real physics simulations they use the Runge-Kutta (ODE45) or Adams-Bashforth-Moutlon (ODE113) solves, and they'll have 100,000 steps per second.

So while it's important to be cognizant of these things, it's also best not to stress to much about what's going on in the first of a series of educational articles :)

Unless you have a sensitivity to the initial conditions, hence you have a chaotic system. Which happens as fast as n body interactions in a gravitational field (but how many bodies/iterations do you need, which initial conditions makes the error a problem?)

But as I stated earlier, I think I have to check first because I am not that convinced any more on the performance point of view that JS has a problem, and float representation is not a JS problem, but a problem global to all CPUs.

Well it can be more than 10^-12 sometimes and the problem is not in physics but in trading when errors stack up. That's why I prefer when e-commerce solutions are based on fixed point arithmetic.

Even though canvases are still not homogeneous in terms of performance from browsers to browsers, some works fairly well.

Right, chaotic behavior is a valid issue. But in any realistic situation, you'll have lots of effects that inevitably get left out of simulations that contribute larger perturbations/errors than this rounding error would. (Heck, I suspect that even the thermal motion of the individual atoms in an object would have a larger effect.)

So no simulation will ever get exactly the "right" answer at that level. For practical purposes, all we care about is getting an answer that's within the ensemble of reasonable outcomes for initial conditions like ours.

All that happened there is you entered your factors in a strange base (albeit the same one the output humors you with) and then didn't like the appearance of the answer.

These articles are not about developing video games or getting performance. They're about learning physics through a common language that most developers know: Javascript. It's ok that it won't beat flash or native client. It never intended to.

If you can read an article, understand what's going on and immediately open up Firebug and start playing with the equations, then Javascript has cut out 10 unnecessary steps (buying Flash, installing, learning actionscript, etc) or your path to playing with physics and numerical models!

Aren't the JavaScript engines free to optimize the numbers and treat them as integers as long as they are integers?

https://developer.mozilla.org/en-US/demos/detail/bananabread - seems to be quite performant for a javascript 3d fps.

You might be my favorite reader! Thanks!

Reply on news.ycombinator.com