best way of doing pulsing Text

[zell2002]

not sure the best way of doing this. what i have doesnt look good, and i feel there must be a better way of doing this

ive currently got :

Code: Select all

startRange =1
endRange = 2
range = (endRange - startRange) / 2
offset = range + startRange
pulse = 0
global_time = 0

function love.update(dt)
global_time = global_time + dt
pulse = offset + math.sin(global_time) * range
end

in my hud

Code: Select all

local sw, sh = love.window.getDimensions()
local dx, dy = 0, 0

dx = sw / 2 - currentFont:getWidth("Hello World") * pulse / 2
dy = sh / 2 - currentFont:getHeight("Hello World") * pulse / 2

love.graphics.push()
love.graphics.scale(pulse, pulse)
love.graphics.print("Hello World", dx, dy)
love.graphics.pop()

the text does "Pulse" but it is slow and (as it would do with sin/cos) slow down as it gets to its extremes.
im also not 100% sure that my attempt to keep the text centered is correct ?

[undef]

love.graphics.print takes parameters for scaling and offset, so it can be done with way less code!

Code: Select all

local sx, sy = math.sin( factor*time ) -- change the factor to increase/decrase pulsating speed
love.graphics.print( text, x, y, 0, sx, sy, (text:getWidth()*sx)/2, (text:getHeight()*sy)/2 )

sin/cos functions shouldn't be a performance issue. If you want it to pulsate more quickly change the factor.

[zell2002]

that does seem very clean way of doing it!
my only problem is ive tried math.sin(10 * dt) and the text is tiny, but then i try it at math.sin(100 * dt) and the text is about right but it is very very fast
am i missing something ?

[micha]

that does seem very clean way of doing it!
my only problem is ive tried math.sin(10 * dt) and the text is tiny, but then i try it at math.sin(100 * dt) and the text is about right but it is very very fast
am i missing something ?

The sine-function gives values between -1 and 1. So when you use that as a scaling factor, eventually, the text is inverted. If you want to have a small deviation from the normal size then try using

Code: Select all

sx = 1 + 0.1 * sin(factor * time)
sy = sx

Now, sx is between 0.9 and 1.1.

[undef]

Oh yeah right, like Micha said sin and cos gives you a value between -1 and 1.
And I made another mistake with sy, apparently I'm no good without compiler errors and visual feedback :/

Code: Select all

local s = 1 + amplitude*math.sin( factor*time ) -- change the factor to increase/decrase pulsating speed
love.graphics.print( text, x, y, 0, s, s, (text:getWidth()*sx)/2, (text:getHeight()*sy)/2 )

my only problem is ive tried math.sin(10 * dt) and the text is tiny, but then i try it at math.sin(100 * dt) and the text is about right but it is very very fast

Another problem here is that you use dt.
dt will always be roughly the same value (the time your computer takes to draw one frame).
Try print( dt ) do see what value dt always roughly is.
Then try print( math.sin(100 * dt) ) and print( math.sin(10 * dt) ) to see what kind of scaling value you get.

So you will need to have a time value that you increase every frame. Like this for example:

Code: Select all

local time = 0
function love.update( dt )
    time = time + dt
end

This should provide a smooth pulsating animation.

Tip: Play around with math.sin( time )^n to get steeper waves, if n is an even number the value will always be positive as well, which is quite useful.