Tween viewer

Code Sharing
1

Here is a program that will show the relationship for the different Tweens. There are 10 different easing types, linear, quad, cubic, quart, quint, expo, sine, back, bounce, and elastic. I show them all at the same time so you can see how they differ side by side. One parameter is to change the easing type from, In, Out, InOut, and OutIn. The other parameter is for the looping type, pingpong, once, or forever. The elastic tween only shows for the looping type of once. Not sure what that’s used for at this time. At the top of the screen, I show the changes for the parameters.


supportedOrientations(LANDSCAPE_ANY)

function setup()
    parameter.integer("easing",1,4,1)
    parameter.integer("looping",1,3,1)
    
    w={"In","Out","InOut","OutIn"}
    w1={"pingpong","once","forever"}
    
    te1=easing
    lo1=looping
    
    t1={"linear","quad","cubic","quart","quint","expo","sine","back","bounce","elastic"}   
     
    t21={tween.easing.linear,tween.easing.quadIn,tween.easing.cubicIn,tween.easing.quartIn,tween.easing.quintIn,
    tween.easing.expoIn,tween.easing.sineIn,tween.easing.backIn,tween.easing.bounceIn,tween.easing.elasticIn}
    
    t22={tween.easing.linear,tween.easing.quadOut,tween.easing.cubicOut,tween.easing.quartOut,tween.easing.quintOut,
    tween.easing.expoOut,tween.easing.sineOut,tween.easing.backOut,tween.easing.bounceOut,tween.easing.elasticOut}
    
    t23={tween.easing.linear,tween.easing.quadInOut,tween.easing.cubicInOut,tween.easing.quartInOut,tween.easing.quintInOut,
    tween.easing.expoInOut,tween.easing.sineInOut,tween.easing.backInOut,tween.easing.bounceInOut,tween.easing.elasticInOut}
        
    t24={tween.easing.linear,tween.easing.quadOutIn,tween.easing.cubicOutIn,tween.easing.quartOutIn,tween.easing.quintOutIn,
    tween.easing.expoOutIn,tween.easing.sineOutIn,tween.easing.backOutIn,tween.easing.bounceOutIn,tween.easing.elasticOutIn}  
    
    p={tween.loop.pingpong,tween.loop.once,tween.loop.forever}
    
    setup1()  
 end

function setup1()  
    t3={}
    for z=1,#t1 do
        t3[z]={x=70*z,y=100,fc=color(255,0,0)}
        if easing==1 then
            tween(2,t3[z],{x=70*z, y=700},{easing=t21[z], loop=p[looping]})
        elseif easing==2 then
            tween(2,t3[z],{x=70*z, y=700},{easing=t22[z], loop=p[looping]})
        elseif easing==3 then
            tween(2,t3[z],{x=70*z, y=700},{easing=t23[z], loop=p[looping]})
        elseif easing==4 then
            tween(2,t3[z],{x=70*z, y=700},{easing=t24[z], loop=p[looping]})
        end
    end
end

function draw()
    background(255,255,255)
    fill(255,0,0)
    text("easing-----"..w[easing].."            looping-----"..w1[looping],300,750)
    if te1~=easing or lo1~=looping then
        te1=easing
        lo1=looping
        setup1()
    end
    for z=1,#t1 do
        text(t1[z],t3[z].x,t3[z].y)
    end
end
2

Hello @dave1707. There are actually 11 built-in easing types: circ is not documented in the in-app reference.

3

Thanks @mpilgrem. Here is the updated version with easing type circ added.


supportedOrientations(LANDSCAPE_ANY)

function setup()
    parameter.integer("easing",1,4,1)
    parameter.integer("looping",1,3,1)
    
    w={"In","Out","InOut","OutIn"}
    w1={"pingpong","once","forever"}
    
    te1=easing
    lo1=looping
    
    t1={"linear","quad","cubic","quart","quint","expo","sine","back","bounce","circ","elastic"}   
     
    t21={tween.easing.linear,tween.easing.quadIn,tween.easing.cubicIn,tween.easing.quartIn,
    tween.easing.quintIn,tween.easing.expoIn,tween.easing.sineIn,tween.easing.backIn,
    tween.easing.bounceIn,tween.easing.circIn,tween.easing.elasticIn}
    
    t22={tween.easing.linear,tween.easing.quadOut,tween.easing.cubicOut,tween.easing.quartOut,
    tween.easing.quintOut,tween.easing.expoOut,tween.easing.sineOut,tween.easing.backOut,
    tween.easing.bounceOut,tween.easing.circOut,tween.easing.elasticOut}
    
    t23={tween.easing.linear,tween.easing.quadInOut,tween.easing.cubicInOut,tween.easing.quartInOut,
    tween.easing.quintInOut,tween.easing.expoInOut,tween.easing.sineInOut,tween.easing.backInOut,
    tween.easing.bounceInOut,tween.easing.circInOut,tween.easing.elasticInOut}
        
    t24={tween.easing.linear,tween.easing.quadOutIn,tween.easing.cubicOutIn,tween.easing.quartOutIn,
    tween.easing.quintOutIn,tween.easing.expoOutIn,tween.easing.sineOutIn,tween.easing.backOutIn,
    tween.easing.bounceOutIn,tween.easing.circOutIn,tween.easing.elasticOutIn}  
    
    p={tween.loop.pingpong,tween.loop.once,tween.loop.forever}
    
    setup1()  
 end

function setup1()  
    t3={}
    for z=1,#t1 do
        t3[z]={x=60*z,y=100,fc=color(255,0,0)}
        if easing==1 then
            tween(2,t3[z],{x=60*z, y=700},{easing=t21[z], loop=p[looping]})
        elseif easing==2 then
            tween(2,t3[z],{x=60*z, y=700},{easing=t22[z], loop=p[looping]})
        elseif easing==3 then
            tween(2,t3[z],{x=60*z, y=700},{easing=t23[z], loop=p[looping]})
        elseif easing==4 then
            tween(2,t3[z],{x=60*z, y=700},{easing=t24[z], loop=p[looping]})
        end
    end
end

function draw()
    background(255,255,255)
    fill(255,0,0)
    text("easing-----"..w[easing].."            looping-----"..w1[looping],300,750)
    if te1~=easing or lo1~=looping then
        te1=easing
        lo1=looping
        setup1()
    end
    for z=1,#t1 do
        text(t1[z],t3[z].x,t3[z].y)
    end
end