6 ms·
Modeling Physics in Javascript: Gravity and Drag
- gbrindisi 14y agoThis might become my favorite blog ever.
- ObnoxiousJul 14y agoYou 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#Overview_of_the_code http://en.wikipedia.org/wiki/Fast_inverse_square_root#Overvi...)
- grimboy 14y agoWhy 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.
- deleted 14y ago[deleted]
- ObnoxiousJul 14y agoWithout tests at first glance I might be having false asssumptions on modern JS optimisations: NaCl (C) http://juliamap.googlelabs.com.. http://juliamap.googlelabs.com... VS http://www.atopon.org/mandel/# 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. :)
- dkersten 14y agoNot 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.
- mrspeaker 14y agoYou really want to discourage someone playing with physics/math in their browser?
- ObnoxiousJul 14y agoWell, 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...
- Steuard 14y agoBut 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.)
- bkanber 14y agoYou'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 :)
- 14y ago
- Tichy 14y agoAren't the JavaScript engines free to optimize the numbers and treat them as integers as long as they are integers?
- mburns 14y agohttps://developer.mozilla.org/en-US/demos/detail/bananabread https://developer.mozilla.org/en-US/demos/detail/bananabread - seems to be quite performant for a javascript 3d fps.
- bkanber 14y agoYou might be my favorite reader! Thanks!
- hrabago 14y agoThe page won't come up for me. Is it already hurting from being HN'ed with only 26 upvotes?
- bkanber 14y agoYeah it's a tiny box with Wordpress on it. Fixed!
- mweibel 14y agoVery 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 :)
- bkanber 14y agoThanks! 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!
- mweibel 14y agoYes, did this already :) thanks for making these articles!
- mbq 14y agoI 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.
- bkanber 14y agoI 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!
- xxbondsxx 14y agoThe Velocity Verlet integration method isn't much of a jump in complexity (http://en.wikipedia.org/wiki/Verlet_integration#Velocity_Verlet 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.
- bkanber 14y agoI'll definitely be talking about this one in my Solvers article!
- baq 14y agobe 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...
- mbq 14y agoNot if you are doing dissipation, as in this case.
- viraj_shah 14y agoThanks for putting up the email subscriptions
- Simucal 14y agoI 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/ http://jsfiddle.net/simucal/RvA9w/33/ [2] - http://jsfiddle.net/simucal/RvA9w/ http://jsfiddle.net/simucal/RvA9w/
- deleted 14y ago[deleted]
- bkanber 14y agoPerformance is great for me too, but when you have a ton of balls the collision detection fails. Probably just a bug in the quadtree. Otherwise, great performance!
- mrhyperpenguin 14y agoInstead 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-programming/spatial-hashing-r2697 http://www.gamedev.net/page/resources/_/technical/game-progr...
- zackmorris 14y agoI'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.
- bkanber 14y agoLook 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.
- typpo 14y agoI 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/ 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/ http://www.spacegoo.com/solar_system/
- bkanber 14y agoAwesome! I couple years ago I made a simple game that uses orbital mechanics too: http://burakkanber.com/orbit http://burakkanber.com/orbit If it will help at all feel free to poke through the source code!
- akldfgj 14y agoMove the Fiddle to the top of the page, and get much more user interest.