Calling easing without using transition.to

[horacebury]

I have many reasons for writing this bit of code, and of course many more for sharing it, even if I haven’t checked to see if anyone has written it already…

I wanted a quick bit of code to allow me to work out the points on a curve without having to actually wait for time to elapse because I want to plot the course something will take, before it takes it.

Therefore, a piece of code which calls the easing functions without using transition.to or transition.from is required.

Here it is - the functions declared below are there for explanation and because I developed this on the “Lua: demo” (http://www.lua.org/cgi-bin/demo) page (copy/paste it direct - I don’t have access to a mac right now):
[lua]-- this is the ‘easeOut’ function copied from the code exchange page
function easeOut(t, tMax, start, delta)
return start + (delta * _easeOut(t/tMax))
end

– this is the ‘behind the scenes’ function copied from the same page
function _easeOut(ratio)
local invRatio = ratio - 1.0
return (invRatio*invRatio*invRatio) + 1.0
end
– the loop to run to get the values without using time/transition…

local tmax = 10 – total number of iterations (would be the ‘time’ property usually)
local start = 0 – the starting value
local delta = 100 – the destination value

– this loop actually outputs 11 iterations, but that’s ok (change t=0 to t=1 if its not for you)
for t=0, 10 do
local value = start + easeOut(t, tmax, start, delta)
print(t … ': ’ … value) – prints the value derived from the iteration
end[/lua]
Of course, this could be used to calculate a ‘pause’ point during a transition. All you’d need is a table containing the parameters of the transition before it starts and to know at which point in time the transition is stopped. Restarting would be a different issue, but if you replaced the transition call completely with your own function called from ‘eventFrame’ you could have a pause/continue function which uses the same easings.

(Phew… I hope I’m not reinventing the wheel here…)

Matt. [import]uid: 8271 topic_id: 3786 reply_id: 303786[/import]

[horacebury]

Oops, sorry change this line:

[lua]local value = start + easeOut(t, tmax, start, delta)[/lua]

to this:

[lua]local value = easeOut(t, tmax, start, delta)[/lua]

There, all better now…
Just to clarify: Use [lua]for t=0[/lua] if you want the call to produce the first, or starting, value. Use [lua]for t=1[/lua] if you want the call to produce the values after the starting value; which you will because the variable will already be at the starting value!
Matt. [import]uid: 8271 topic_id: 3786 reply_id: 11495[/import]

[horacebury]

Right. I’m sorry. I made a few assumptions. Please accept my apologies for apparently doing development within a forum post (wouldn’t be problem if I could edit the original post, but hey…)

I’ve corrected the code:

[lua]function easeOut(t, tMax, start, delta)
return start + (delta * _easeOut(t/tMax))
end

function _easeOut(ratio)
local invRatio = ratio - 1.0
return (invRatio*invRatio*invRatio) + 1.0
end
local tmax = 10
local start = 50
local delta = 1000
local iterations = 10

delta = delta - start – adjust for the first value

print('First: ’ … easeOut(0, tmax, start, delta))
print()

for t=1, iterations do
local value = easeOut(t, tmax, start, delta)
print(t … ': ’ … value)
end[/lua]
Matt. [import]uid: 8271 topic_id: 3786 reply_id: 11496[/import]

[horacebury]

I just wanted to post this in case anyone wanted to get a head start in manipulating easing/transitions. You should be able to copy/paste this into a main.lua - as long as you have the easing.lua from http://developer.anscamobile.com/code/more-easing - and just run it direct in an iPhone simulator. Run your mouse/finger across the screen to see the positionable blue dot move along the ‘eased’ line. I’m working on a properly pausable transitions library. Matt.

[lua]require(“easing”)
function testTransition()
local tmax = 10
local start = 50
local delta = 1000
local iterations = 10

delta = delta - start – adjust for the first value

print()
print('First: ’ … easing.easeOut(0, tmax, start, delta))
print()

for t=1, iterations do
local value = easing.easeOut(t, tmax, start, delta)
print(t … ': ’ … tostring(value))
end

print()
end
function plotDots()
local tmax = 10
local start = 50
local delta = 100
local iterations = 10

for t=0, iterations do
local x, y = 100+t*10, 100 + easing.easeOut( t, tmax, start, delta )
print(x…’ , '…y)
local circle = display.newCircle( x, y, 2 )
circle.strokeWidth = 1
circle:setFillColor( 255,255,255 )
end

local circle = display.newCircle( 100, 150, 2 )
circle.strokeWidth = 1
circle:setFillColor( 0,255,0 )

transition.to( circle, { time=1000, x=200, transition=easing.linear } )
transition.to( circle, { time=1000, y=250, transition=easing.easeOut } )

print()
end

– these are here simply to ensure the graphics are layered: white, green, blue (bottom to top)
testTransition()
plotDots()

local dot = display.newCircle( 100, 150, 2 )
dot.strokeWidth = 1
dot:setFillColor( 0,0,255 )

function doTouch( event )
local tmax = 10
local start = 50
local delta = 100

local t = event.x/32

local x, y = 100+t*10, 100 + easing.easeOut( t, tmax, start, delta )

dot.x = x
dot.y = y

print(t…’-’…math.floor(dot.x)…’,’…math.floor(dot.y))
end
Runtime:addEventListener( “touch”, doTouch )[/lua] [import]uid: 8271 topic_id: 3786 reply_id: 11549[/import]

[horacebury]

I have followed this up with a pausable transition library here: http://developer.anscamobile.com/forum/2010/11/20/pausable-transitionstween

Matt. [import]uid: 8271 topic_id: 3786 reply_id: 11578[/import]