#### Howdy, Stranger!

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

# Tweens

edited August 2014 in Examples Posts: 4

As a returning Codea coder, I notice a new function called tween. So, I had a play with it and came up with this. I thought it might come in useful for a wee demonstration :-)

``````---

-- Tween Exps

-- Use this function to perform your initial setup
function setup()
displayMode(FULLSCREEN)
-- straight forward back and forth tween used for Codea icon

-- elastic tween for the small circle
tween(2,em,{x=WIDTH-20},{easing=tween.easing.elasticInOut,loop=tween.loop.pingpong})

-- tween for right to left title
marquee={x=WIDTH}
id=tween(5,marquee,{x=-1500},{easing=tween.easing.linear, loop=tween.loop.forever})

-- tweens for clock seconds
my=600
tim={t=1}
tween(59.3,tim,{t=61},{easing=tween.easing.linear,loop=tween.loop.forever})
r=0
circ={a=0}
tween(59.3,circ,{a=math.pi*2},{easing=tween.easing.linear,loop=tween.loop.forever})

mystring="You can use tween to control any movement on screen. It can also be ussed as a counter. See in the code where the tim tween has been created. Basically, the tween has the form id=tween(time, source table, target table, options table, callback function). Time is in seconds or fractions thereof. Source table is the one used to set your initial parameters. Target is the end paramaters. Codea will work out all the values in between. Use the options to set up loop type and smoothing type. Finally you can use the callback function to call a function when the tween has finished. Happy tweening!"

-- scrolling up text tween
txt={y=-1000}
tween(45,txt,{y=HEIGHT+20},{loop=tween.loop.forever})

-- globals and drawing settings
div=((math.pi*2)/12)
cx=WIDTH/2
cy=HEIGHT/2
f=1
textMode(CORNER)
strokeWidth(3)
end

-- This function gets called once every frame
function draw()
-- This sets a dark background color
background(22, 60, 175, 255)

-- clock seconds and hundredths of a second
strokeWidth(2)
fill(255, 0, 0, 50)
fontSize(300)
pushStyle()
textMode(CENTER)
t=math.floor(tim.t-1)
m=math.floor((tim.t-t-1)*100)
pushMatrix()
translate(cx,cy)
rotate(360*math.sin(circ.a))
text(t,0,0)
popMatrix()
fill(55, 42, 65, 255)
fontSize(40)
text(m,cx+50,cy-50)
popStyle()

-- 12 divisions for the clock
fill(255)
for i=1,12 do
a=div*i
line(cx+210*math.sin(a),cy+210*math.cos(a),cx+230*math.sin(a),cy+230*math.cos(a))
end

-- second hand
line(cx,cy,cx+math.sin(circ.a)*200,cy+math.cos(circ.a)*200)

-- small circle nb you can change the size of the circle by inserting a target for rad in the tween
fill(65, 191, 45, 255)
fontSize(22)
text("tween.easing.elasticInOut",0,ell.y-30)

-- scrolling tittle
fill(117, 255, 0, 255)
fontSize(90)
text("A wee demonstration of tweening",marquee.x,my)

-- scrolling up text
pushStyle()
fill(0, 255, 228, 129)
textMode(CORNER)
fontSize(32)
textWrapWidth(360)
text(mystring,WIDTH-360,txt.y)
popStyle()

-- bouncing Codea icon
fontSize(22)
pushMatrix()
translate(ell.x,450)
rotate(f)
sprite("Cargo Bot:Codea Icon",0,0)
popMatrix()
blendMode(NORMAL)
f = f - 2

end

---
``````
Tagged:

• Posts: 4

Sorry, first code posting! Not sure why the formatting hasn't been applied to all the code?

• Posts: 5,396

it needed three ~ on a line before, and after the code. See how I edited it.

• Posts: 4

Thanks. Will remember in future!

• Posts: 3,297

nice!

• Posts: 4

Thanks!