Collisions with boundaries should stop at interesection point

[cwgreene]

Currently, the bounds are handled by forcing any particles outside of the bounds to be inside the bounds. However, since we're using verlet integration, this will result in an effective tangential acceleration (green vector) being applied to the body.

https://github.com/cwgreene/verlet-js/blob/master/images/error_type1.png?raw=true

This is visible by dragging the tire object in the demo to the left of the screen. Since the acceleration is applied downwards on the left hand side, the body rotates counter clockwise. When moved to the right hand side the acceleration will be applied upwards on the right hand side, again resulting in counter clockwise rotation.

I believe that by computing the intersection point (the origin of the green vector), and moving the particle there instead of the nearest bounding point (what is currently done), this issue will be resolved.

[cwgreene]

Note that the proposed solution will result in the walls becoming 'sticky'. To make the collisions more elastic, the new position should actually be the reflected position across the boundary, and the old position should like wise be updated to be it's mirror image. This will get the next frame's velocity to be consistent.

[subprotocol]

I agree, this should fix the issue. Great callout! You are right, both position vectors will need to be updated. It should be possible to slip this functionality into the new bounds checking function on line 58: https://github.com/subprotocol/verlet-js/blob/master/js/verlet-js/verlet.js

[cwgreene]

Implemented inelastic solution ('sticky' is the wrong word, 'soft' or 'absorbent' would have been better) for the left hand side and it works as expected.

Sample Solution: https://github.com/cwgreene/verlet-js/commit/2dbc7214b29fa0ba62caf4b904b98b25417e653b

I'm going to implement the generic bounding line solution.