Howdy, Stranger!

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

Tween Explorer: an experiment with tween and custom easing functions (Codea 1.5)

edited February 2013 in Code Sharing Posts: 489

tween() is a new feature in Codea version 1.5 that facilitates animation. The code below allows the form of the built-in easing functions to be explored, and illustrates the use of a custom easing function (myEasing(t, b, c, d)).

The code also uses the callback argument of the parameter.boolean() and parameter.integer() functions.

--
-- Tween Explorer
--

-- A custom easing function
-- t is the current time
-- d is the duration of the animation
-- b is the initial animated value
-- c is the change in the animated value by the end of the animation
function myEasing(t, b, c, d)
    t = t / d
    return b + c * math.pow(math.sin(t * math.pi * 2.5), 2)
end

supportedOrientations(LANDSCAPE_ANY)
function setup()
    easingType = {
        "quad", "cubic", "quart", "quint",
        "expo", "sine",
        "circ", -- Undocumented in Codea 1.5(16)
        "back", "bounce", "elastic"}
    inOutType = {"In", "Out", "InOut", "OutIn"}
    duration = 3
    dim = math.min(WIDTH, HEIGHT)
    offset = dim / 4
    margin = dim / 20
    width = margin / 10
    dim = dim - offset * 2 - margin - width
    easingFunction = 1
    inOutFunction = 1
    parameter.boolean("isCustomEasingFunction", true, reset)
    parameter.integer("easingFunction", 1, #easingType, 1,
        resetEF)
    parameter.watch("easingType[easingFunction]")
    parameter.integer("inOutFunction", 1, #inOutType, 1, resetEF)
    parameter.watch("inOutType[inOutFunction]")
    local col = color(255, 255, 0)
    fill(col)
    stroke(col.r * 0.5, col.g * 0.5, col.b * 0.5)
    rectMode(CORNER)
    spriteMode(CORNER)
    ellipseMode(CORNER)
    fontSize(32)
end

function draw()
    background(64)
    text(easingString..": touch Viewer to rerun.",
        WIDTH / 2, HEIGHT - 50)
    strokeWidth(5)
    line(offset, offset + margin,
        offset + margin + dim + width, offset + margin)
    line(offset + margin, offset,
        offset + margin, offset + margin + dim + width)
    noStroke()
    rect(offset, subjectY.y + offset + margin, margin, width)
    rect(subjectX.x + offset + margin, offset, width, margin)
    setContext(img)
    ellipse(subjectX.x, subjectY.y + offset + margin, width)
    setContext()
    sprite(img, offset + margin, 1)
end

function touched(touch)
    if touch.state == BEGAN then reset() end
end

function resetEF()
    if isCustomEasingFunction then return end
    reset()
end

function reset()
    img = image(dim + width, dim + width + offset * 2)
    subjectX = {x = 1}
    local targetX = {x = dim}
    tween(duration, subjectX, targetX)
    subjectY = {y = 1}
    local targetY = {y = dim}
    if isCustomEasingFunction then
        easingString = "myEasing"
        tweenId = tween(duration, subjectY, targetY, myEasing)
    else
        easingString = easingType[easingFunction]..
            inOutType[inOutFunction]
        tweenId = tween(duration, subjectY, targetY, easingString)
    end
end
Tagged:

Comments

Sign In or Register to comment.