Rubber band effect

Question

I'm trying to implement a rubber band effect similar to that in iOS. I'm almost there, but I need some help to make it perfect. It's for a game I'm making with HaxeFlixel.

• 'img' is the draggable image.
• x and y's origin for everything is the top-left corner.

Here's the code I have atm:

// In main update loop
// If img was clicked
offsetY = Math.abs(img.y -mouseY);

...

if (img.y > 0) {
    img.y = mouseY -(mouseY * .7);
}
else {
    img.y = mouseY -offsetY;
}

It works pretty much the way it should, but the problem is that when I start dragging the image, it snaps to a position slightly below the top of the screen before the "rubber band effect" kicks in. If I could get help with getting rid of the snapping it would be great!

Answer 1

I figured it out! Btw, here's an algorithm I found that is very similar (if not the same) as the one Apple uses for its rubber band effect.

// * x = distance from the edge
// * c = constant value, UIScrollView uses 0.55
// * d = dimension, either width or height
// b = (1.0 – (1.0 / ((x * c / d) + 1.0))) * d

And here is what I did to solve the problem:

img.y = (1.0 - (1.0 / (((FlxG.mouse.screenY -offsetY) * .55 / 640) + 1.0))) * 640;

(It works almost exactly like this part I posted above)

img.y = mouseY -(mouseY * .7);

But all I had to do to fix the "snapping" problem, was to subtract the y-offset from the mouse position, duh! ;D Thanks anyways!

Answer 2

Kind of need more context, but the one thing that stands out to me is this line:

x and y's origin for everything is the top-left corner.

I would just double check that the value for x and y's origin in javascript is in the correct context of the document / element... So it might be snapping to versus snapping to "true", document top left origin.