Tweens

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 :slight_smile:

---

-- Tween Exps

-- Use this function to perform your initial setup
function setup()
    displayMode(FULLSCREEN)
    -- straight forward back and forth tween used for Codea icon
    ell={x=20, y=100, rad=20, fillcolor=color(255)}
    tween(4,ell,{x=WIDTH-20},{easing=tween.easing.quadInOut,loop=tween.loop.pingpong})
    
    
    -- elastic tween for the small circle
    em={x=20, y=100, rad=20}
    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)
    ellipse(em.x,em.y-19,em.rad)
    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)
    text("tween.easing.quadInOut",0,450)
    blendMode(ADDITIVE)
    pushMatrix()
    translate(ell.x,450)
    rotate(f)
    sprite("Cargo Bot:Codea Icon",0,0)
    popMatrix()
    blendMode(NORMAL)
    f = f - 2

end

---

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

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

Thanks. Will remember in future!

nice!

Thanks!