# 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)
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…