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

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

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!

This is one of the few demos I can try on Linux without jumping through hoops since it's canvas-based, so I appreciate your choice to not go with WebGL actually. Looks good; looking forward to reading the code more closely!

If you use Chrome/Chromium, you can try setting the "Override software rendering list" option in about:flags. Worked for me.

There is a physics engine for threejs- it's somewhere on their demo page. I'm actually working on a physics engine as well- I'm willing to help you extend it in whatever direction.

A question, Why did you chose Verlet integration? I know it's great for particles but I always had issues trying to do angular mechanics.

Are you thinking of Physijs [0], which is made to work well with ThreeJS? Its a wrapper around Ammojs for ThreeJS.

It does look good and integrates well, but to be honest ThreeJS is so mature and battle tested with multiple renderers (canvas, webgl etc) that when building a physics engine, I really think it would be better to spend ones dev time on the physics and not waste* time reimplementing a portion of ThreeJS.

[0]: http://chandlerprall.github.io/Physijs/

*Obviously not actually 'wasted' time, hacking is great even just for the sake of it - but I'm sure you know what I mean.

Great question- I was reading about verlet integration and started doing some coding to play with it, and I just kept on going with it. Would love some help with it! First thing I would like to do is abstract out canvas.

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.

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.

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

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. (:

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

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

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

Amazingly "life-like" behaviour on the spider considering such simple "AI"

Thanks =)

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.

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.

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.

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

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

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

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

Also, a verlet-based physics engine is a very different beast compared to a rigid-body one (a few in the list above are also based on verlet, but not most).

Err, I thought verlet was just an integration technique? How does it translate into a "very different beast"?

Verlet integration uses an object's change in position at time t to determine the velocity for t+1- it is typically used for particles not full rigid bodies.

Verlet is incredibly stable and allows you to update the position of a mass directly (velocity, force, momentum are all implicit), making it very easy to work with if not very accurate. You can't emulate rigid bodies very well (shape matching kinda works), collision response and stacking is a pain in the ass.

I guess I'm still having trouble understanding where the complexities arise. I have no difficulty believing that they do arise, but I would like to understand how it happens if you're willing to take the time to explain.

I would think that rigid bodies -- either perfectly rigid or semi-rigid via springs & struts -- would not handle all that differently in verlet since force is explicit (typo on your part?) and a v/p estimate is available from the last position, albeit with a bit more phase lag than usual. Does the phase lag induce nasty oscillations or something?

We can make semi-rigid bodies in verlet using strings are shape matching techniques, but the pressure needed to maintain shape necessarily interferes with stacking or any other kind of stable contact. Actually, their was a solution to this in a shape matching paper by Matthias [1] but I was never able to get it to work right.

I've played around a lot with Verlet, it is very powerful in certain cases...especially since you can just update the position of a mass directly (very easy to program, very mouse/touch input friendly). However, a rigid body physics engine is probably better for most game use cases.

[1] http://www.matthiasmueller.info/realtimephysics/

Cool, thanks for the link!

Alright, then why not do the very minor step up to Velocity-Verlet?

I don't really think it really helps with stacking.

Here are some examples of ammo.js running in PlayCanvas[1]

Vehicle: http://apps.playcanvas.com/will/ammo/vehicle

FPS Character Controller: http://apps.playcanvas.com/playcanvas/physics/charactercontr...

Crates!: http://apps.playcanvas.com/will/ammo/crates

[1] Disclaimer: I'm a co-founder :-)

Chipmunk-JS

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

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

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.

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.

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

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

I pulled on a circle and it became a bicycle.

That is the best bug ever.

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.

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/

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 :)

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...

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

I'm diving into it.LOL

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

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

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

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

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

Very nice work, thanks for sharing

that spider example is pretty freaking neat