Verlet-js - Open source dynamic body physics engine

by subprotocol • 13 years ago

325 53 13 years ago

subprotocol6• 13 years ago

Hi HN. I recently open sourced a verlet physics engine that I wrote for fun. Four example experiments are in there so far. I have a few other experiment ideas in mind that I hope to get implemented soon. Anyways, it was a blast creating this and thought others might like to look/play with it too.

Cheers

iambot2• 13 years ago

Looks great, thanks for sharing. One thing I would suggest is to not worry about rendering the physics on the canvas, threejs is good at what it does and lacks a good physics engine. It's just my opinion, but I think the project would benefit from either making it work with threejs or by not solving the render problem, and just focus on doing great physics, so that people can use the results in their threejs scenes.

Great work though

subprotocol6• 13 years ago

This is a really great point. Abstracting it away shouldn't be bad, and it is possible to extend by vec2 implementation to 3d. After I finish my next batch of examples I will venture down this path.

Thank you for the feedback!

nivla• 13 years ago

Thank you for open sourcing this. The spider example is just awesome!! Good Job!

moultano• 13 years ago

There seems to be some numerical instability in the rotation. In the shapes demo, several of the shapes start spinning faster and faster when I pick them up. Particularly when I press the outside edge nodes into the center so that the shape sort of flips inside out, after that the shape just spins continuously when it is in the air.

Another way to exhibit it is to take the center node of the wheel and press it against the wall. The whole shape will spin.

morpher• 13 years ago

I wrote a verlet based physics engine years ago and had similar issues. Relaxing distance constraints tended to add a bit of angular momentum in to the system. Sometimes having a drag term in the integrator was enough to compensate, but this appears to be in verlet.js already.

Another issue with defining shapes via distance constraints is that they sometimes have alternate solutions / stable minima. For example, you can smash the circle in to the ground and get it to crumple: http://i.imgur.com/UzxbKvJ.png

But, this is still an awesome demo. Good work subprotocol.

donpark• 13 years ago

There is a similar project named Coffee-Physics [1] by Soulwire.

[1] https://github.com/soulwire/Coffee-Physics

rorrr22• 13 years ago

Also

Box2D JS and Box2Dweb

http://box2d-js.sourceforge.net/

https://code.google.com/p/box2dweb/

Bullet JS

https://github.com/adambom/bullet.js/

Cannon.js

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

Ammo.js

https://github.com/kripken/ammo.js/

Physijs

http://chandlerprall.github.io/Physijs/

JigLibJS

https://github.com/supereggbert/JigLibJS

Ygg2• 13 years ago

Interesting list but I wonder how do these libraries fare when used by JS developers? What are their performances and experience with them?

rorrr22• 13 years ago

Chipmunk-JS

https://github.com/josephg/Chipmunk-js

goyalpulkit• 13 years ago

This looks really good.

Just for fun, try pulling one of the spider's legs and bring it close to the web! I really like how it clings on to the web.

C1D• 13 years ago

This is great, it doesn't seem to have any lag and I can't wait to see this being implemented.

lanstonpeng• 13 years ago

I'm diving into it.LOL

michaelkscott• 13 years ago

Nice project. The spider was a bit unexpected though. I had to jolt back a bit. I then pulled it out of the web and it died. Phew. (:

pooriaazimi• 13 years ago

I thought you were joking (about dragging the spider out), but it actually works! Extremely well-done.

Zecc• 13 years ago

You drag it slightly off the web and she will hold on for dear life. Verly funny!

danbruc• 13 years ago

It will spring back to life if you put it back where it belongs - no spiders have been hurt.

arocks• 13 years ago

The spider has been extremely well done. Spent a lot of time playing with it.

drorweiss2• 13 years ago

Awesome! Thanks for sharing. It's amazing what you can do inside the browser these days.

Any thoughts of integrating it with SVG? SVG is super useful for drawing and manipulating shapes in the browser.

subprotocol6• 13 years ago

Thank you! I have actually not played around with SVG yet. Is it as easy as canvas? I am very new to canvas and found it to be super easy to pick up and run with.

drorweiss2• 13 years ago

I haven't played with canvas yet... it's quite powerful... checkout http://www.netmagazine.com/features/20-svg-uses-will-make-yo...

ricardobeat• 13 years ago

SVG is usually much slower due to it's DOM representation, not a good fit for heavy animations.

accatyyc• 13 years ago

This is awesome. Very well done, and very nice looking examples. Simplistic and stylish. Props for the spider!

buren• 13 years ago

Really great work! Thanks for open-sourcing the project, already love playing with it

f4stjack• 13 years ago

Hey, I downloaded the zip sourcefile from the github repository but any change on the tree example code (for example commenting out tree1) increases load time tenfold. Has anyone experienced this?

Thanks for any reply.

edit: after I deleted google analytics code, everything went hunky dory. Thanks for this amazing piece of code :)

bluepill• 13 years ago

Very nice work, thanks for sharing

talloaktrees• 13 years ago

I pulled on a circle and it became a bicycle.

That is the best bug ever.

BaconJuice• 13 years ago

Holy crap, I am blown away by how amazing this is! great work guys and thank you for sharing.

Hawkee• 13 years ago

Reminds me of another project done in Java Processing. It implements a similar curtain effect except you can tear it to pieces, http://bluethen.com/wordpress/index.php/processing-apps/curt...

blixt• 13 years ago

You should make a benchmarking script to track speed over time. I've written probably 10 different Verlet engines in JavaScript, and the overhead of JavaScript's dynamic nature can be very palpable in the simulations.

For my most recent attempt at something speedy, here's some source code making use of typed arrays and doing away with objects completely. The speed improvement is good, but maybe the maintainability suffers a little (press space to create blob): https://c9.io/blixt/blob/workspace/index.html

Note that the particle-line collision is currently inefficient, so it slows down the simulation a lot more than it should.

alexvr• 13 years ago

Awesome. I love the spider demo, especially -- the way it sticks and everything just feels right, to the point where it's too realistic for comfort. I felt like I was messing with a real spider.

ikawe• 13 years ago

I pulled her off, and then felt awful about it. Luckily you can put her back on.

I'm not sure what about it is so effective.

mouseroot• 13 years ago

that spider example is pretty freaking neat

somid3• 13 years ago

I am intrigued, this is a lot of work it seems, what inspired you to create this engine?

subprotocol6• 13 years ago

It all started as play coding. The deeper I went the funner it became =)

opminion• 13 years ago

Awesome. This kind of well designed personal site mixing tech with demos is very appealing, because if gives you something beautiful, potentially very useful, and chewable.

Anyone knows a good "directory" or collection of such sites?

Another example of that kind of site: http://worrydream.com/

Verlet-js - Open source dynamic body physics engine

Related Stories