Help with advanced finger scrolling mechanism

Questions
1

Have you ever found yourself scrolling down a page on an smartphone or tablet and realize your ability to slide it and let go to watch it continue sliding down the page? Well I’ve been looking to recreate such a function in codea’s code format however I simply don’t know where to start. To be clear, I want to make it so that you can not only scroll, but also potentially scroll really quickly, take your finger off the screen, and have the page continue to slide in your fingers direction at a velocity which gradually slows down from that of your finger (kind of like how you scroll down through your code when using Codea on your tablet). I’m trying to work off of this finger scrolling code segment as contributed by @dave1707, which currently lacks such a feature as the one I have described.

function setup()
    tab={}
    dy=HEIGHT/2
    for z=1,100 do
        table.insert(tab,z)
    end
end

function draw()
    fill(255)
    background(40, 40, 50)
    sprite("Planet Cute:Character Boy",100,dy)
    for z=1,100 do
        text("Scroll some text  "..tab[z],300,dy-20*(z-50))
    end
end

function touched(t)
    dy=dy+t.deltaY
end

I’d appreciate any and all suggestion. Thank you in advance.

2

If it’s possible I’d also like any suggestion on recreating the “elastic” function for when the scrolled page runs out of content.

3

I posted a project called Thermal Ball a while ago that uses the same kind of thing, but instead you would just restrict movement to the y-axis

4

in this excellent project http://codea.io/talk/discussion/6710/markdown-codea-rich-text-formatting @yojimbo2000 made exactly what you want. He averages the last 10 touch.deltaY values to define the speed, then decaying is easy.

5

I think I got that technique from @Ignatz . Can’t remember which blog post it was tho. The reason why you average 10 values is because often the very last delta value is quite low, because it is truncated by your finger leaving the surface. So it’s the delta values just prior to the touch ending that are more representative of the speed.

For an elastic bounce, invert the y velocity if the y position goes beyond the text’s bounds.

Really it’s a very simple physics simulation (velocity, decay, collision). Something like:

velY = velY + avDeltaY --increase velocity
velY = velY * 0.97 --resistance. This stops the velocity increasing indefinitely, and also makes it slow down once finger is removed
posY = posY + velY --update position
if posY<0 then velY = math.abs(velY) * 0.8 --bounce, with some decay (restitution)
elseif posY>textBoxHeight then velY = -math.abs(velY) * 0.8
end
6

Just to clarify, as I posted several versions of the code on that thread, this is the one with the scrolling:

http://codea.io/talk/discussion/comment/61503/#Comment_61503

7

@yojimbo2000 Huh this is exactly what I was looking for, Thanks! I might try to fix the manner in which the text rebounds after reaching its limit as that mechanism is a bit buggy. I’ll repost the edit version of your code here if I come up with anything.

8

I see what you mean, the bounce isn’t quite right is it. I guess that algorithm is for bouncing off a hard surface, whereas want you actually want is elastic stretching past the end of a page, and then pinging back. Looking forward to what you (or anyone else) can come up with. :slight_smile:

9

@Paintcannon Here’s a change to my above code. Not sure if this is everything you’re after. I tried to keep the added code to a minimum.

function setup()
    topLimit=0
    bottomLimit=3000
    dy=0
    dyy=0
    tab={}
    yy=0
    for z=1,200 do
        table.insert(tab,z)
    end
end

function draw()
    fill(255)
    background(40, 40, 50)
    sprite("Planet Cute:Character Boy",100,dy)
    for z=1,200 do
        text("Scroll some text  "..tab[z],300,dy-20*(z-51))
    end
    scroll()
end

function touched(t)
    if t.state==MOVING then
        endd=false
        dy=dy+t.deltaY
        dyy=t.deltaY
    end
    if t.state==ENDED then
        endd=true
        yy=dyy
    end
end

function scroll()
    yy=yy/1.06
    dy=dy+yy
    if endd then
        if dy<topLimit then
            up=true
            yy=12
        elseif dy>bottomLimit then
            dn=true
            yy=-12
        end
    end
    if up and dy>topLimit then
        yy=0
        up=false 
        endd=false       
    end
    if dn and dy<bottomLimit then
        yy=0
        dn=false  
        en=false      
    end
end