Need help with rubber band-effect

[Xerosugar]

Hi all!

So I found this cool algorithm that mimics the behaviour you see in iOS when you drag/scroll elements around and hit the edge. What happens then is called the rubber band effect, where the more you pull, the less the elements move. I have got it to work when working from the top of the screen, but I just can't figure out what values to use when counting from the bottom of the screen... :s

http://s27.postimg.org/rj25ysowj/rubber_band.png

Here's the algorithm:

// * 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 below is what I'm working with at the moment ('img' is the object being dragged on the screen). My screen size is 960*640 px (landscape-orientation) and the image is this: http://s16.postimg.org/xxnu3vyj9/image.png

img.y = FlxG.mouse.screenY -offsetY;

// This works
if (img.y >= 0) {
    img.y = (1.0 - (1.0 / (( (FlxG.mouse.screenY -offsetY) * .55 / 640) + 1.0))) * 640;
}

if (FlxG.height -(img.y +img.height) >= 0) {
    var distScreenBottom:Float = Math.abs(FlxG.height -FlxG.mouse.screenY);
    img.y = ( -(1.0 - (1.0 / (( (distScreenBottom * .55 / 640) + 1.0))) * 640) -offsetY);
}

Any ideas?

[Xerosugar]

So, according to this: https://twitter.com/chpwn/status/285540192096497664 the above formula gives you the distance from the edge (I didn't see it that way first, duh!). 

I'll try to mess around with it some more and see what I can come up with.

[Xerosugar]

Solved it.

// img y-value when the image's bottom edge is at the bottom of the screen
var imgStartY:Float = FlxG.height -img.height;
// Distance: img-bottom-edge -> Screen bottom edge
var curDistToScreenBottom:Float = Math.abs(img.y - imgStartY);
// Apply formula
curDistToScreenBottom = (1.0 - (1.0 / (( curDistToScreenBottom * .55 / 640) + 1.0))) * 640;

img.y = imgStartY -curDistToScreenBottom;

[Xerosugar]

Also, an update for setting the distance to the top of the image; since the y-value will always be the distance to the top of the screen, you can just do this:

img.y = (1.0 - (1.0 / (( img.y * .55 / 640) + 1.0))) * 640;

On Monday, March 3, 2014 7:25:48 PM UTC+1, Xerosugar wrote:

Hi all!

So I found this cool algorithm that mimics the behaviour you see in iOS when you drag/scroll elements around and hit the edge. What happens then is called the rubber band effect, where the more you pull, the less the elements move. I have got it to work when working from the top of the screen, but I just can't figure out what values to use when counting from the bottom of the screen... :s

http://s27.postimg.org/rj25ysowj/rubber_band.png

Here's the algorithm:

// * 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 below is what I'm working with at the moment ('img' is the object being dragged on the screen). My screen size is 960*640 px (landscape-orientation) and the image is this: http://s16.postimg.org/xxnu3vyj9/image.png

img.y = FlxG.mouse.screenY -offsetY;

// This works
if (img.y >= 0) {
    img.y = (1.0 - (1.0 / (( (FlxG.mouse.screenY -offsetY) * .55 / 640) + 1.0))) * 640;
}

if (FlxG.height -(img.y +img.height) >= 0) {
    var distScreenBottom:Float = Math.abs(FlxG.height -FlxG.mouse.screenY);

    img.y = ( -(1.0 - (1.0 / (( (distScreenBottom * .55 / 640) + 1.0))) * 640) -offsetY);
}

Any ideas?