Tween grapher

This will graph tweens to show the different easing types :


function setup()
    circ={x=100,y=HEIGHT-100,r=20}
    pts={}
    easing={}
    for k,v in pairs(tween.easing)do
        table.insert(easing,{name=k,ease=v})
    end
    parameter.integer("easeType",1,#easing)
    parameter.watch("easing[easeType].name")
    parameter.number("delay",0.1,2,0.5)
    parameter.action("start_tween",startTween)
end

function draw()
    background(0)
    table.insert(pts,vec2(circ.x,circ.y))
    stroke(255,0,0)
    strokeWidth(5)
    for i=1,#pts-1 do
        line(pts[i].x,pts[i].y,pts[i+1].x,pts[i+1].y)
    end
    stroke(255)
    fill(255,0,0)
    ellipseMode(RADIUS)
    ellipse(circ.x,circ.y,circ.r)
end

function startTween()
    pts={}
    circ={x=100,y=HEIGHT-100,r=20}
    tween(delay,circ,{x=HEIGHT-100},tween.easing.linear)
    tween(delay,circ,{y=100},easing[easeType].ease)
end

@Coder I like your graph. It makes viewing what the Tweens do more interesting. Below is a link to something I did with tween viewing.

http://codea.io/talk/discussion/2230/tween-viewer#Item_3

Thanks, yep i never could really tell what some tweens did so i had to visualise it

@Coder Sometimes it’s a lot better to SEE what something is doing than to READ what it’s doing. Your tween grapher does a great job of doing that.

The user and all related content has been deleted.

@Coder nice one!

I just found this easing cheat sheet. It matches codea’s easing types.

Edit: this explains how easing functions work:

-Pass them four parameters t,b,c,d which are time,start value,change in value,duration.

With this we could write our own easing functions!

Nice finding @coder. I wish this link would go to the wiki, cause i’ll loose this post…