Howdy, Stranger!

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

In this Discussion

Tween.easing graph plotter (plus attempt at hybrid easing type)

edited March 2015 in Code Sharing Posts: 2,020

Here's a tween.easing graph plotter, so you can compare all the easing types.

tween.easing curves

I made it to help me write new easing types

(The background to this is I'm working on a 3D game, and needed some quick and fake physics for something falling and bouncing off the ground. cubicIn is good for the start of the fall, bounceOut for the end, but no way of combining them, hence the attempt here at a hybrid tween.easing.cubicInBounceOut easing type. Unfortunately cubic and bounce don't quite meet in the middle (as you can see in the centre of the image above), so a bit of a cludge was needed to paper over the crack... not sure if it's quite fit for purpose. Improvements welcome!)

 
--# Main
supportedOrientations(PORTRAIT)
displayMode(OVERLAY)
 
function setup()
    fontSize(30)
    font("Vegur")
    parameter.number("plotSpeed", 0.5,5,3)
    parameter.action("ALL", function() tween.plot.setup(plotSpeed, 0) end)
    parameter.action("In", function() tween.plot.setup(plotSpeed, 1) end)
    parameter.action("Out", function() tween.plot.setup(plotSpeed, 2) end)
    parameter.action("InOut", function() tween.plot.setup(plotSpeed, 3) end)
    tween.plot.setup(plotSpeed, 0)
end
 
function draw()
    background(0)
    for i,v in ipairs(graphs) do
        v:draw()
    end
end
 
--# TweenPlot
tween.plot = class()
 
local colors={color(0,255,0), color(255,0,0),color(255,255,0),} --colors for in, out, inOut
 
function tween.plot:init(pos, size, speed, plot, graph, curves)
    self.pos=pos --position of table
    self.size=size --size of table
    self.title=graph --title of graph
    self.speed=speed --how quickly it plots
    self.plot=plot --offset for choosing plot colour
    self.curves={} --tables to hold each curve
    for i,v in ipairs(curves) do
        self.curves[i]={}
        self.curves[i].value=0 --the value being plotted
        self.curves[i].results={} --store the results frame-by-frame
        self.curves[i].tween=tween(speed, self.curves[i], {value=1}, tween.easing[v])
    end
end
 
function tween.plot:draw()
    pushMatrix()
    translate(self.pos.x,self.pos.y)
    stroke(128)
    strokeWidth(1)
    --axis
    line(0,0,self.size,0)
    line(0,0,0,self.size)
    noStroke()
    --title
    fill(128)
    text(self.title,self.size*0.5,self.size*0.5)
    local plot=self.plot
    if plot>0 then plot = plot - 1 end --colour to use
    for a,curve in ipairs(self.curves) do
        if curve.tween.running<curve.tween.time then --if tween running
            --store results
            table.insert(curve.results, vec2(curve.tween.running/self.speed, curve.value))
        end
        fill(colors[a+plot])
        --plot results
        for i,v in ipairs(curve.results) do
            ellipse(v.x*self.size, v.y*self.size, 7)
        end
    end
    popMatrix()
end
 
function tween.plot.setup(speed, plot)
    local easingTypes={ --each line holds one graph
    Quad = {"quadIn", "quadOut", "quadInOut"}, --graph={curve 1, curve 2, ...}
    Cubic = {"cubicIn", "cubicOut", "cubicInOut"}, --nb I haven't bothered with OutIn
    Quart = {"quartIn", "quartOut", "quartInOut"},
    Quint = {"quintIn", "quintOut", "quintInOut"},
    Sine = {"sineIn", "sineOut", "sineInOut"},
    Expo = {"expoIn", "expoOut", "expoInOut"},
    Circ = {"circIn", "circOut", "circInOut"},
    Elastic = {"elasticIn","elasticOut", "elasticInOut"},
    Back = {"backIn", "backOut", "backInOut"},
    Bounce = {"bounceIn", "bounceOut", "bounceInOut"},
    cubicBounce = {"cubicInBounceOut"}, --NEW!! and not 100% successful...
    }
    local grid=vec2(3,4)
    graphs={} --hold the array of graphs we're plotting
    local gutter=10
    local size=math.min(WIDTH/grid.x,HEIGHT/grid.y)
    local x,y=0,0
    for graph,curves in pairs(easingTypes) do
        local pos=vec2(x,y)*size
        if plot>0 and plot<=#curves then
            curves={curves[plot]} --just draw one curve
        end
        table.insert(graphs, tween.plot(pos, size-gutter, speed, plot, graph, curves))
        y = y +  1
        if y==grid.y then
            y = 0
            x = x + 1
            if x==grid.x then return end
        end
    end
end
 
local function outBounce(t, b, c, d)
    t = t / d
    if t < 1 / 2.75 then return c * (7.5625 * t * t) + b end
    if t < 2 / 2.75 then
        t = t - (1.5 / 2.75)
        return c * (7.5625 * t * t + 0.75) + b
    elseif t < 2.5 / 2.75 then
        t = t - (2.25 / 2.75)
        return c * (7.5625 * t * t + 0.9375) + b
    end
    t = t - (2.625 / 2.75)
    return c * (7.5625 * t * t + 0.984375) + b
end
 
function tween.easing.cubicInBounceOut(t, b, c, d)
    local tc = t / d * 2
    if t < d / 2 then return c / 2 * tc * tc * tc + b end
    return outBounce(t*2.15-d,0,c,d*1.08) * 0.5 + c * .5 + b 
end
Tagged:

Comments

Sign In or Register to comment.