Example: Advanced scrolling physics [UPDATED]

Hello,
I thought I might share this code from my game. While it’s not a class for scroll boxes and isn’t individual boxes, it’s the physics in this code that is valuable. Other scroll box classes have had clumsy scrolling physics, so here’s some code to improve it: (you may have to tweak with the numbers to get it working better)



function setup()
    x = 0
    vel = 0
    friction = .95
    width = 1500
    elasticity = 1.3
    
    scrolling = false
    elastising = false
    
    xAvgs = {}
end

function draw()
    --output.clear()
    background(40, 40, 50)
    
    vel = vel * friction
    x = x + vel
    
    if scrolling == false then
        if x >= 0 then
            vel = vel / (elasticity*elasticity)
            if vel <= 1 or elastising then
                elastising = true
                vel = -x / (elasticity * 10)
            end
        elseif x-WIDTH <= -width then
            vel = vel / (elasticity*elasticity)
            if vel >= -1 or elastising then
                elastising = true
                vel = ((-width+WIDTH)-x) / (elasticity * 10)
            end
        end
    end
    
    pushMatrix()
    translate(x,0)
    
    pushStyle()
    fill(0, 92, 255, 255)
    rect(0,0,width,HEIGHT)
    popStyle()
    
    pushStyle()
    fill(255, 255, 255, 255)
    for i = 0,width/100-1 do
        text(i,i*100,HEIGHT/2)
    end
    popStyle()
    
    popMatrix()
end

function touched(t)
    if t.state == ENDED or t.state == CANCELLED then
        --vel = t.deltaX
        local xTotal = 0
        local numAvg = 10
        for i = 1,numAvg do
            xTotal = xTotal + (xAvgs[i] or xAvgs[#xAvgs])
        end
        vel = xTotal / numAvg
        xAvgs = {}
        
        scrolling = false
    elseif t.state == MOVING or t.state == BEGAN then
        elastising = false
        vel = 0
        table.insert(xAvgs,t.deltaX)
        x = x + t.deltaX
        scrolling = true
    end
end

Thanks! Let me know if you have any improvement.

I like the elastic part on the end of the scroller but it should have a bit more damping and a little physical push back so its like flicking an elastic band

@Luatee - I’m trying to find that balance. If you have any luck, let me know.
Thanks!

Your constantly setting velocity on the overhang to the width- x position (the amount it goes over) which means you don’t get realistic velocity and causes it to snap, if I didn’t explain that very well then ask and ill have a play with it and get it back to you

@Luatee - I don’t quite get what your saying. An example would be great. Thanks!

Wouldn’t it make sense to use a tween for this?

@aciolino I don’t use tweens too much so it isnt what I’d have used to tackle this because I didn’t know you could, how do you plan to do this with tweens?

@aciolino - You could, but there’d be many issues. It would be more work for less performance.

@Luatee - Duh. I decided to give the physics another shot today. I fixed it within 30 seconds. Code updated above.

I got it implemented into my app. Works as smooth as… Whatever people say. Anyways, I can’t wait to release the new version (of StackIt) to you guys.

Do you understand what I meant now? You calculate the overhang every step of the way once it goes over which stops the realism.

Just played with it and its exactly how it needs to be, I might find a use for it :smiley:

@Luatee - Yup. The code was always there, just the numbers made it seem like it wasn’t. I missed that when tweaking with tha numbers.
Thanks!