Easing playground

README

#Easing playground

イージングの仕方のチェックするためのツール。

イージング関数の中身を書き、現在の位置を返す関数を作ればイージングが実行されます。  
渡される引数は初期位置（a）と終了位置（b）、そして現在の時間（0 〜 1）です。

jsdoit.css

@import "compass/reset";

$codeHeight: 150px;
#ctrl {
    position: absolute;
    left: 10px;
    bottom: $codeHeight + 70px;
    width: 100%;
    color: lime;
    
    > p {
        display: inline-block;
    }
    
    .load {
        position: absolute;
        right: 10px;
    }
}

#source {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    color: lime;
    
    textarea {
        background: rgb(10, 10, 10);
        border: none;
        width: 95%;
        height: $codeHeight;
        margin-left: 5%;
        color: lime;
        font-size: 16px;
        font-family: monospace;
    }
}

jsdoit.html

<canvas id="cv" width="400" height="400"></canvas>

<div id="source">
    <p>function (a, b, x) {</p>
    <textarea id="code">return a * (1.0 - x) + b * x;</textarea>
    <p>}</p>
</div>

<div id="ctrl">
    <p><input type="button" id="btn" value="RUN" /></p>
    <p class="load">
        Load source as: 
        <select id="sel">
            <option value="linear">linear</option>
            <option value="lerp">lerp</option>
            <option value="easeInBack">easeInBack</option>
            <option value="easeOutBack">easeOutBack</option>
            <option value="easeInOutBack">easeInOutBack</option>
            <option value="ios">like iOS</option>
        </select>
    </p>
</div>

jsdoit.js

do (win = window, doc = window.document) ->

    START_POS = 50
    END_POS = -50
    easingMethod = null
    
    cv = doc.getElementById 'cv'
    ctx = cv.getContext '2d'
    w = cv.width = win.innerWidth
    h = cv.height = win.innerHeight
    hw = w / 2
    hh = h / 2
    val = 0
    duration = 30
    t = 0
    dir = 1

    exec = ->
        source = doc.getElementById('code').value
        easingMethod = new Function('a', 'b', 'x', source)
        

    easing =
        linear: 'return a * (1.0 - x) + b * x;'
        ios: 'var f, t;\nt = 1 - x;\nf = 1 - (t * t * t * t);\nreturn a * (1.0 - f) + b * f;'
        lerp: 'var f;\nf = (1.0 - Math.cos(x * Math.PI)) * 0.5;\nreturn a * (1.0 - f) + b * f;'
        easeInBack: 'var f, s;\ns = 1.70158;\nf = x * x * ((s + 1) * x - s);\nreturn a * (1.0 - f) + b * f;'
        easeOutBack: 'var f, s;\nx = x - 1;\ns = 1.70158;\nf = x * x * ((s + 1) * x + s) + 1;\nreturn a * (1.0 - f) + b * f;'
        easeInOutBack: 'var f, s, t;\ns = 1.70158;\nt = x * 2;\nif (t < 1) {\nf = 1 / 2 * (t * t * (((s *= 1.525) + 1) * t - s));\n} else {\nf = 1 / 2 * ((t -= 2) * t * (((s *= 1.525) + 1) * t + s) + 2);\n}\nreturn a * (1.0 - f) + b * f;'

        
    log = (mes) ->
        args = Array.prototype.slice.call(arguments)
        message =  args.reduce((a, b) ->
            return a + b;
        )
    
        console.log.apply console, args
        
        window.parent.postMessage(
            JSON.stringify({'type':'console.log','message': message}), 
            'http://jsdo.it'
        )
    
    clear = ->
        ctx.fillStyle = 'rgba(10, 10, 10, 1)'
        ctx.fillRect 0, 0, w, h

    draw = ->
        ctx.fillStyle = 'rgba(10, 10, 10, 0.05)'
        ctx.fillRect 0, 0, w, h
        
        ctx.save()
        ctx.fillStyle = 'red'
        ctx.beginPath()
        ctx.arc (val or START_POS), hh / 2, 5, 0, Math.PI * 2, false
        ctx.fill()
        ctx.closePath()
        ctx.restore()
    
    _loop = ->
        #---------------easing method here.
        val = easingMethod(START_POS, (w + END_POS), t / duration)
        #---------------easing method over.
        
        #log val
        draw()

        t += dir
        
        if t > duration
            return
        
        setTimeout _loop, 32
        
    start = ->
        exec()
        clear()
        dir = 1
        t = 0
        _loop()

    setSource = ->
        doc.getElementById('code').value = easing[@value].toString()
        
    init = ->
        clear()
        draw()
        
    doc.getElementById('btn').addEventListener 'click', start, false
    doc.getElementById('sel').addEventListener 'change', setSource, false
    doc.addEventListener 'DOMContentLoaded', init, false