Show HN: A 2D Physics Simulator in JavaScript

this one shows how to solve a double/n pendulum, which is something that is not explained in detail anywhere. So if you want to learn how constraints work that should get you up to speed!

dkonofalski2• 9 years ago

Is this really a simulation if you can't modify any of the objects? For all we know, this could all be pre-calculated or pre-animated. Everything moves exactly the same way every time.

FroshKiller• 9 years ago

It moves differently in different browsers for me. And neither instance seems to actually make physical sense.

In Chrome, the fourth box from the top starts sliding when it hits the floor, pushing the box to the right clear off the floor box. Every box eventually slides along the floor and falls into the pit.

In Firefox, the fourth from the top stays put. It never pushes the box on the right, though all the rest eventually slide into the pit.

SketchySeaBeast• 9 years ago

In Firefox Developer Edition everything happens faster than in regular Firefox, though they seem to end at the same result. I wonder why that is. Animation doesn't seem much faster.

I think the "neither instance seems to actually make physical sense" is due to a lack of friction.

dkonofalski2• 9 years ago

For me, boxes move underneath other boxes due to the lack of friction. It's the exact same movement every time. I wonder why I'm getting downvoted.

xchip19• 9 years ago

:D you are welcome to add objects, make the chain longer or change gravity...

Having always the same animation helps debugging. But yeah I should have added the option to add a mouse!

archgoon2• 9 years ago

For all we know, this could all be pre-calculated or pre-animated. Everything moves exactly the same way every time.

You can look at the source code and see if that's what it's doing.

So you want to change the simulation? Change the initial setup.

This is obviously not user friendly, but I'm not sure how you can possibly suggest this is not a simulation.

ell0ell0• 9 years ago

If you want to look at precedence or what other people have done successfully in this space check out http://brm.io/matter-js/ matter JS. It's pretty sweet.

xchip19• 9 years ago

pretty cool and inspiring!

santaclaus4• 9 years ago

Is there friction or non-zero restitution?

xchip19• 9 years ago

There is no friction so far but I will add it whenever I have a chance!

laythea4• 9 years ago

Erm, no offense but:

a) physics programs are supposed to offer interactivity. Else whats the point?

b) the physics look unearthly

santaclaus4• 9 years ago

physics programs are supposed to offer interactivity. Else whats the point?

To solve differential equations for which analytical solutions do not exist?

Edit: Differential inclusions, if inequality constraints are included in the system (as they would here).

laythea4• 9 years ago

Of course it depends on what the goal of the program is, but something like this should offer user interactivity. By solving whatever is necessary (or faking it).

xchip19• 9 years ago

a) I know, that is still WIP :) b) There is no friction, and as Newton's First Law states "an object will remain at rest or in uniform motion in a straight line unless acted upon by an external force" :)

laythea4• 9 years ago

Hey, again no offense meant. I just think the whole point of something like this is to mimic the real world. And after a couple of seconds my illusion is broken. Ps. It is cool, just needs to be cooler :)

hellofunk• 9 years ago

The link is for interactive demos.

romaniv• 9 years ago

If you're interested in this kind of stuff, I highly recommend reading or watching something about Ivan Sutherland's Sketchpad.

https://www.youtube.com/watch?v=USyoT_Ha_bA

xchip19• 9 years ago

I knew that one! is fantastic isn't it!? This is one of my favourites: https://github.com/xibyte/jsketcher

pdm55• 9 years ago

Thanks, good show. Another one I like is http://physics.weber.edu/schroeder/html5/. See Newton's cannon etc.

olegkikin• 9 years ago

Why is this upvoted so much? In what way is it better than any of the existing JS physics engines?

Matter.js: http://brm.io/matter-js/

Cannon.js: http://www.cannonjs.org/

PhysicsJS: http://wellcaffeinated.net/PhysicsJS/

Box2DJS: http://box2d-js.sourceforge.net/ (Emscripten-compiled from flash)

p2: https://github.com/schteppe/p2.js

Ammo.js: https://github.com/kripken/ammo.js/ (Emscripten-compiled from C++)

JPE: https://github.com/colorhook/JPE

Oimo.js: https://github.com/lo-th/Oimo.js/

Planck.js: https://github.com/shakiba/planck.js

tachyonbeam• 9 years ago

Because it does something cool and people find it interesting. Doesn't take away from existing systems.

xchip19• 9 years ago

All those are great physics engines. Mine is just very simple and easy to understand, hopefully it inspires other people to get into the world of simulations.

looki• 9 years ago

Also thanks for the reference to Erin Catto's talk, need to check it out. Maybe physics engines aren't magic after all.

Aeolun• 9 years ago

It doesn't take into account surface friction? Those boxes seem covered in soap to me.

opmac• 9 years ago

I'm with you, and I don't even find this particular example that interesting or accurate. You just re-run the same simulation over and over without any control of the initial or boundary conditions.

ivan_ah2• 9 years ago

What's special about this simulation is that the entire code fits on one page, including linear algebra library: https://github.com/aguaviva/Physics/blob/master/RigidBodyCha...

I've been trying to understand js physics simulation for many years, and this is the first demo that I find understandable. Amazing work!

throwaway91111• 9 years ago

This is a Show HN; you don't need to be entirely novel to have things to show.

Personally i found the linked content to be much more approachable than your links, though they are undoubtedly better physics engines.

ivan_ah2• 9 years ago

To add to the list, the best physics engine I've seen (not for js games, for actual physics simulations to teach people physics) is this one: https://www.myphysicslab.com/

PheT also has lots of good stuff: https://phet.colorado.edu/

tapirl• 9 years ago

I used some physics engines. I feel the simulation quality of the one made by op is quit good, even better than some complete engines.

xchip19• 9 years ago

Thanks! :)

danilocesar• 9 years ago

Out of curiosity: The chrome tab running the engine is using 55% of my CPU, an i7-4770K running at 3.5Ghz...

Box2D with many more objects consumes 22%.

Oimo, with a 3D rendering scene with TONS of objects: 35% CPU..

Matter.js, lots of objects with mouse interaction: 15% CPU.

Plank, lots of objects: 25%

I'm wondering how/why this ended up in the front page...

xchip19• 9 years ago

Physics engines are like magic and it is pretty hard understand how the work even if you read the paper many times. Also physics engines are interesting not only because four the dynamics, but also for the way constraints are solved. There are many other problems were you could apply this same techniques. This JavaScript engine it's a couple of pages long, it's easy to understand and potentially could give you a new vision on how to solve problems. The reason why is uses do much CPU time is because the collision detection algorithm compares every single pair of objects, to speed up that part I'd need to add what is called a 'broad phase' but that would complicate the code and the point was to write clear code and leave the low hanging fruit for the reader.

thanatropism2• 9 years ago

This is where I show that I know nothing about physics engines:

... does it have conservation of energy? Can you track total energy somehow?

... does it obey approximately some kind of Liouville theorem?

santaclaus4• 9 years ago

does it have conservation of energy? Can you track total energy somehow?

You're going to need a geometric integrator for that, probably an energy-momentum integrator. In practice it is often better to conserve the symplectic form instead of energy, though, and you can show that for fixed time-steps you can't get all of energy/momentum/symplecticity at the same time (I haven't looked at this for a while, a student of the school of Marsden jump in if I'm saying anything wrong). Furthermore, these guarantees all require integrability...

thanatropism2• 9 years ago

My (ongoing) thesis is in the field of symplectic integrators.

I was asking about these simplified physics engines (in games, etc.) that are probably not deriving physical laws out of whole conservation- (or Noetherian symmetry-) cloth.

yorwba• 9 years ago

It is surprisingly difficult to find a concrete explanation of symplecticity. It seems like https://en.m.wikipedia.org/wiki/Symplectic_integrator has links to all the relevant information, but even there the conserved quantity is given as a differential form dp /\ dq, which makes me wonder whether you can even compute it for individual points, or whether you have to integrate over the whole space.

dmitrygr• 9 years ago

The only part missing? Physics...

Somehow boxes slide along a flat floor with no deceleration until they fall off the screen

eric_h• 9 years ago

I think the word you were looking for was "friction". This certainly looks like a simulation that a physics professor would propose on a chalk board: "Ignoring friction for the purpose of this exercise..."

Show HN: A 2D Physics Simulator in JavaScript

Related Stories