JSFiddle - React, Tailwind, and code Playground

by Merlin Ye

JavaScript

var Ticker = (function() {
    var _callbacks = []
    var _count = 0
    var _tick = function () {
        _callbacks.forEach(cbArr => {
            var callback = cbArr[0]
            var scope = cbArr[1]
            callback.call(scope, _count)
        })

        _count++
        window.requestAnimationFrame(_tick)
    }
    var _raf = window.requestAnimationFrame(_tick)

    var instance = {}

    instance.on = function (callback, scope) {
        var result = _callbacks.filter(cbArr => {
            return callback == cbArr[0] && scope == cbArr[1]
        })

        if(!result.length){
            _callbacks.push([callback, scope])
        }
    }

    instance.off = function (callback, scope) {
        for (var cbArr of _callbacks) {
            if(cbArr[0] == callback || cbArr[1] == scope){
                _callbacks.splice(_callbacks.indexOf(cbArr), 1)
            }
        }
    }

    return instance
})()

var mapping = function (val, inputMin, inputMax, outputMin, outputMax) {
    return ((outputMax - outputMin) * ((val - inputMin) / (inputMax - inputMin))) + outputMin
};

var EaseFunctions = {
    linear (p) {
        return p
    },

    sineOut (p) {
        return Math.sin(p * Math.PI / 2)
    },

    backInOut (p) {
        if (p < 1 / 2.75) {
            return (7.5625 * p * p);
        } else if (p < 2 / 2.75) {
            return (7.5625 * ( p -= 1.5 / 2.75) * p + 0.75);
        } else if (p < 2.5 / 2.75) {
            return (7.5625 * (p -= 2.25 / 2.75) * p + 0.9375);
        } else {
            return (7.5625 * (p -= 2.625 / 2.75) * p + 0.984375);
        }
    }
}

var canvas = document.createElement('canvas')
document.body.appendChild(canvas)
document.body.style.cssText = 'margin: 0; padding: 0'

canvas.width = window.innerWidth
canvas.height = window.innerHeight
canvas.style.cssText = 'position: absolute'
var ctx = canvas.getContext('2d')

var tarX = window.innerWidth / 2
var tarY = window.innerHeight / 2
var initX = tarX
var initY =...