Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Smooth Scrolling (Text example)

edited August 2015 in Code Sharing Posts: 38

Hello all,

I would like to share the below example of smooth momentum-based scrolling. The method was adopted from this article: http://ariya.ofilabs.com/2011/10/flick-list-with-its-momentum-scrolling-and-deceleration.html

I have noticed that touch.deltaY doesn't always capture the expected initial velocity. I think a solution may include a rolling average of deltaY for the last n number of frames. Suggestions are welcome. What do you guys think?

EDIT: I have found a much simpler solution. Turns out the last deltaY from the moving state can be used. I have modified the below code to include this.

-- Text Scroll

function setup()

    amplitude = 0
    delta = 0
    timeConstant = 10
    scaleFactor = 8

    step = 6 * timeConstant + 1
    position = HEIGHT / 2

    parameter.watch("amplitude")
    parameter.watch("delta")
    parameter.watch("position")

    sText = "You find yourself washed up on the grainy shore of what appears to be a derserted tropical island. The Sun is scorching. You know it's been at least a day or two (maybe more) since you've had anything to eat or drink. You need to find shelter and some source of nurishment."

end

-- This function gets called once every frame
function draw()
    -- This sets a dark background color 
    background(40, 40, 50)

    -- This sets the line thickness
    strokeWidth(5)

    -- Do your drawing here
    textWrapWidth(WIDTH-10)


    if step < 6 * timeConstant then
        delta = amplitude / timeConstant
        position = position + delta 
        amplitude = amplitude - delta
        step = step + 1   
    end

    text(sText, WIDTH/2, position)


end

function touched(t)
    if t.state == MOVING then
        position = position + t.deltaY
        lastDelta = t.deltaY
    end

    if t.state == ENDED then

        amplitude = lastDelta * scaleFactor
        step = 0

        print(amplitude)

    end
end
Tagged:

Comments

  • IgnatzIgnatz Mod
    Posts: 5,396

    Nice work.

    But you forgot one thing.

    What happened to the dude on the island?

  • Posts: 38

    Haha @ignatz
    ...to be continued

  • IgnatzIgnatz Mod
    Posts: 5,396

    I'm not going to take sides, I don't use text much.

    But I think there is something missing in yours, TimurEke. It needs something, like, perhaps, a desert island.

  • Posts: 38

    @TimurEke, holy cow I can't believe I spent a day researching momentum scrolling. Lol! Nice and simplified, good job.

    Btw, just add a check for tapCount in my code where touch state ended and it won't scroll from just a tap. I don't consider that a bug, just a feature. :P

Sign In or Register to comment.