what is the best way to model scroll edge bounce with physics engine

[urbien]

This issue has been discussed over email and I will try to summarize the ideas my Ellen, Mark and me below. All the work so far was done with physics.js. Great thanks to its creator Jasper for lending his expertise and suggesting ways to use his physics.js for momentum scrolling with bounce.

Problem

Scroller needs to freely move the contents of the page until the tail of the content reaches the edge of the scroll areas (not edge of the screen, as we need fixed top and bottom headers). When the tail of the scrolled content passes the edge it needs to bounce back to the edge and move a bit past it (and repeat the bounce with the smaller amplitude). We need a physical world model for such behavior. A constraint does not work here as it will prevent the movement in both directions. We need this to work for both vertical scrolls and for the horizontal scrolls, like the photo strip inside the page, like in IMDB app they let user scroll movie shots horizontally while still standing on a movie page.

Once implemented we will use it also for a mobile drawer (left/right side menu) transition, and probably for many more cases. So below are some imperfect ideas, may be you can shut them down and suggest something better.

Ideas

• One asymmetric force, i.e. latch with bounce and release. This works like the rubber band that is activated when scroller's tail crosses the latch while moving in the direction A, and released when an object goes far away in the opposite direction B. (btw, p2.js physics engine has a notion of breakable forces. But keep in mind that in this latch mechanism the force must be breakable only in one direction). We could, I guess, implement latch based on a collision.
• Two forces, i.e. door stop with a magnet. This works like a bouncing ball, which collides with a floor, bounces up and returns under the force of gravity, repeating the motion with small amplitude. Scroller's head bumps into the door stop object and bounces back, only to be attracted again by a magnet. I think this mechanism is more expensive as the magnetic force permeates the whole world and will need to be calculated on every step, even on distance where it does not have any effect.

Discussion with Jasper and Mark

• Jasper: I think I understand what you're going for... and I think I've got the answer for you here:
  http://jsfiddle.net/wellcaffeinated/AYPHb/1/
• Gene & Mark: Jasper, thank you! I reviewed with Mark as he will be doing the changes and looks like it will do the trick.

So, when user flicks in the opposite direction, we will break the constraint (by removing it) at the same distance (threshold) at which we added it. But we should let dev set the second distance manually.

We would also need to check not just the distance, but also a direction. As users can flick in both directions but break it only in one.

we r thinking to add things like:
c.breakOnDistance(distance1, direction /* optional /, distance2 / optional / )
for to make it flexible, also:
c.breakon(function breakTest1(body) {}) / allows dev to add his own condition checks for pos, speed, acceleration, and later for color, scale, etc. etc. */

• Jasper: Another possibility might be to define an AABB and check the position is inside that. If not break the connection.

eg:

var range = Physics.aabb( x1, y1, x2, y2 );
c.breakOutside( range );

// breakOutside implements...
if ( ! this.range.contains( this.body.state.pos ) ){
// break the constraint

[urbien]

Based on the ideas above Mark has made a first cut of the infinite scroll with bounces which uses PhysicsJS. Here it is applied to a concept app Trees, which we worked on for the Department of Recreation in NYC. Note that the amount of resources in this demo is about 600k so you can scroll till you are blue in the face. Note that although images look the same they all have different URLs so it is a realistic demo. To test bottom bounce go to smaller lists, like App Gallery and Ideas Gallery at Urbien App home. The cool part of this demo is that it is a masonry, so it combines a layout manager, a sliding window manager and physics engine and runs them in a #6 worker thread.

There is some polishing to do still. Drag and release is not ideal yet, will work on it tomorrow. But the main problem is that bounces are too bouncy. If we increase stiffness they becomes small in amplitude but still bounce too much. If we decrease stiffness, it starts to bounce so long and with such amplitude that it soon gets on your nerves. Seem like we need to tune some variable other than stiffness of the constraint.

[wellcaffeinated]

You might be looking to an analog of energy dissipation. You could try modifying the verlet constraint behavior to reduce the relative velocities when constraints are resolved by some input factor. You could also try modifying the "drag" coefficient on the integrator dynamically as you need it.

[urbien]

Thanks. Mark added linear damping proportional to velocity. He found it on the site physics labs and then noticed that p2.js does it this way. It worked out perfectly.