Log In  

I would like to learn how to reproduce the famous sinus scroller text effect, but i can't make it to work.

Can someone explain the idea behind this ? I don't want the code (i want to find it myself), i just want to understand how to approach this.

I've created a table with a cell for each letter of my text, now i need to print and move each later to the left in a sinus pattern, but i can't figured out :

cls()
table={1,2,3,4,5,6}
x=127

function _update()
end

function _draw()

for i=1,6 do
print(table[i],127-i*10,cos(i*3/12)*20+60)
end

end

With this i have a sinus with my text, but it's not moving in real time, and it's in reverse mode. At some point i need to erase each letter from their previous position ? How to erase only one printed letter ? Print the same letter at the same position with transparent color ? Maybe sprite are better for this because they are easiest to move ?

P#16086 2015-11-01 16:37 ( Edited 2017-03-15 16:20)

I can't explain this without some code, but this is just the formula:

cos(frq * x/128) * yscale + ky

frq is the sinusoid frequency. yscale is the vertical span of the effect, ky is the vertical offset (64 = centered.)

You'll want to increment a frame counter (I use 't') during _update(), then you can do this:

x = i * 6 - t

in the loop -- the 6 here affects the character spacing. You can get pretty crazy with this:

To handle erasing the characters, the common solution is just call cls() at the beginning of _draw() and re-render each frame from scratch each time.

P#16089 2015-11-01 18:10 ( Edited 2015-11-01 23:10)

Thanks a lot, will work on this !

P#16108 2015-11-02 07:05 ( Edited 2015-11-02 12:05)

You can also use simple formula to do basic sinus scroll:

y = baseline + (sin(x)*freq);

where baseline is where text would be drawn if it'd be flat ;). Then manipulate X to move text left/right.

P#16109 2015-11-02 07:08 ( Edited 2015-11-02 12:08)

My 2 cents version :

local text = "hello lexaloffle"
local f = 0

function _load()
end

function _update()
    f+=5
end

function _draw()
    cls()
    local y
    local c
    local x = 128/2 - (#text*4)/2
    for c=1,#text do
        y = sin((x+f)/100) * 8
        color(5)
        print(sub(text,c,c),x,(64-4)+y)
        y = sin((x+10+f)/100) * 8
        color(7)
        print(sub(text,c,c),x,(64-4)+y)
        x = x+4
    end
end
P#32064 2016-10-30 00:46 ( Edited 2016-10-30 04:46)

why do you divide the content of sin() by 128 or 100?

edit: got it, x goes from 0 to 128 on the screen and sin (x) repeat itself after 2pi, so you just tweak the number to get the oscillation you want.

P#38280 2017-03-15 12:20 ( Edited 2017-03-16 13:23)

[Please log in to post a comment]

Follow Lexaloffle:          
Generated 2024-04-20 12:51:20 | 0.006s | Q:18