requirebin sketch

index.js

var prime = require("prime"),
    defer = require("prime/defer");

var Transition = prime({

  constructor: function Transition(duration, equation, callback) {
    if (!duration) throw new Error('no duration given');
    if (!equation) throw new Error('no equation given');
    if (!callback) throw new Error('no callback given');

    this.duration = duration;
    this.equation = equation;
    this.callback = callback;
  },

  get paused() {
    return this.cancel == null && this.elapsed != null;
  },

  get active() {
    return this.cancel != null;
  },

  get idle() {
    return this.cancel == null && this.elapsed == null;
  },

  start: function() {
    if (this.idle) {
      this.elapsed = 0;
      this.cancel = defer.frame(this.step, this);
    }
    return this;
  },

  step: function(time) {
    this.elapsed += time - (this.time || time);

    var factor = this.elapsed / this.duration;
    if (factor > 1) factor = 1;

    if (factor !== 1) { // keep calling step
      this.time = time;
      this.cancel = defer.frame(this.step, this);
    } else { // end of the animation
      this.cancel = this.time = this.elapsed = null;
    }

    var delta = this.equation(factor);

    this.callback(delta);
  },

  stop: function() {
    if (this.active) {
      this.cancel();
      this.elapsed = this.cancel = this.time = null;
    }
    return this;
  },

  pause: function() {
    if (this.active) {
      this.cancel();
      this.cancel = this.time = null;
    }
    return this;
  },

  resume: function() {
    if (this.paused) {
      this.cancel = defer.frame(this.step, this);
    }
    return this;
  }

});


var forIn = require('mout/object/forIn');

var slice_ = Array.prototype.slice;

var equations = {

  quad: function(p) {
    return Math.pow(p, 2);
  },

  cubic: function(p) {
    return Math.pow(p, 3);
  },

  quart: function(p) {
    return Math.pow(p, 4);
  },

  quint: function(p) {
    return Math.pow(p, 5);
  },

  expo: function(p) {
    return Math.pow(2, 8 * (p - 1));
  },

  circ: function(p) {
    return 1 - Math.sin(Math.acos(p));
  },

  sine: function(p) {
    return 1 - Math.cos(p * Math.PI / 2);
  },

  bounce: function(p) {
    var value;
    for (var a = 0, b = 1; 1; a += b, b /= 2) {
      if (p >= (7 - 4 * a) / 11) {
        value = b * b - Math.pow((11 - 6 * a - 11 * p) / 4, 2);
        break;
      }
    }
    return value;
  },

  pow: function(p, x) {
    if (x == null) x = 6;
    return Math.pow(p, x);
  },

  back: function(p, x) {
    if (x == null) x = 1.618;
    return Math.pow(p, 2) * ((x + 1) * p - x);
  },

  elastic: function(p, x) {
    if (x == null) x = 1;
    return Math.pow(2, 10 * --p) * Math.cos(20 * p * Math.PI * x / 3);
  }

};

forIn(equations, function(equation, key) {

  equations[key + 'In'] = equation;

  equations[key + 'Out'] = function(delta) {
    return 1 - equation(1 - delta);
  };

  equations[key + 'InOut'] = function(delta) {
    var result = (delta <= 0.5) ? equation(2 * delta) : 2 - equation(2 * (1 - delta));
    return result / 2;
  };

});

var canvas = document.createElement("canvas")

canvas.width = 600
canvas.height = 600

document.body.appendChild(canvas)

var context = canvas.getContext("2d")
var zoom = 10


var animation = new Transition(100000, equations.sineIn, function(delta) {
	
  zoom += delta *25
  
  context.clearRect (0, 0, 600, 600)
  context.beginPath()
  context.arc(256 - zoom / Math.sqrt(2), 256 - zoom / Math.sqrt(2), zoom, 0, 2 * Math.PI, false)
  context.closePath()
  context.lineWidth = 5
  context.strokeStyle = '#003300'
  context.stroke()
  context.beginPath()
  context.arc(512 - zoom / Math.sqrt(2), 512 - zoom / Math.sqrt(2), zoom, 0, 2 * Math.PI, false)
  context.closePath()
  context.strokeStyle = '#33ff00'
  context.stroke()
  context.beginPath()
  context.arc(512 - zoom / Math.sqrt(2), 256 - zoom / Math.sqrt(2), zoom, 0, 2 * Math.PI, false)
  context.closePath()
  context.strokeStyle = '#ff3333'
  context.stroke()
	context.beginPath()
  context.arc(256 - zoom / Math.sqrt(2), 512 - zoom / Math.sqrt(2), zoom, 0, 2 * Math.PI, false)
  context.closePath()
  context.strokeStyle = '#ff33ff'
  context.stroke()
});

animation.start()

canvas.onclick = function(){
  console.log(animation.paused)
  animation.paused ? animation.resume() : animation.pause()
}

minified.js

require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({CX3tFR:[function(require,module,exports){"use strict";var hasOwn=require("mout/object/hasOwn"),mixIn=require("mout/object/mixIn"),create=require("mout/lang/createObject"),kindOf=require("mout/lang/kindOf");var hasDescriptors=true;try{Object.defineProperty({},"~",{});Object.getOwnPropertyDescriptor({},"~")}catch(e){hasDescriptors=false}var hasEnumBug=!{valueOf:0}.propertyIsEnumerable("valueOf"),buggy=["toString","valueOf"];var verbs=/^constructor|inherits|mixin$/;var implement=function(proto){var prototype=this.prototype;for(var key in proto){if(key.match(verbs))continue;if(hasDescriptors){var descriptor=Object.getOwnPropertyDescriptor(proto,key);if(descriptor){Object.defineProperty(prototype,key,descriptor);continue}}prototype[key]=proto[key]}if(hasEnumBug)for(var i=0;key=buggy[i];i++){var value=proto[key];if(value!==Object.prototype[key])prototype[key]=value}return this};var prime=function(proto){if(kindOf(proto)==="Function")proto={constructor:proto};var superprime=proto.inherits;var constructor=hasOwn(proto,"constructor")?proto.constructor:superprime?function(){return superprime.apply(this,arguments)}:function(){};if(superprime){mixIn(constructor,superprime);var superproto=superprime.prototype;var cproto=constructor.prototype=create(superproto);constructor.parent=superproto;cproto.constructor=constructor}if(!constructor.implement)constructor.implement=implement;var mixins=proto.mixin;if(mixins){if(kindOf(mixins)!=="Array")mixins=[mixins];for(var i=0;i<mixins.length;i++)constructor.implement(create(mixins[i].prototype))}return constructor.implement(proto)};module.exports=prime},{"mout/lang/createObject":3,"mout/lang/kindOf":4,"mout/object/hasOwn":7,"mout/object/mixIn":8}],prime:[function(require,module,exports){module.exports=require("CX3tFR")},{}],3:[function(require,module,exports){var mixIn=require("../object/mixIn");function createObject(parent,props){function F(){}F.prototype=parent;return mixIn(new F,props)}module.exports=createObject},{"../object/mixIn":8}],4:[function(require,module,exports){var _rKind=/^\[object (.*)\]$/,_toString=Object.prototype.toString,UNDEF;function kindOf(val){if(val===null){return"Null"}else if(val===UNDEF){return"Undefined"}else{return _rKind.exec(_toString.call(val))[1]}}module.exports=kindOf},{}],5:[function(require,module,exports){var hasOwn=require("./hasOwn");var _hasDontEnumBug,_dontEnums;function checkDontEnum(){_dontEnums=["toString","toLocaleString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","constructor"];_hasDontEnumBug=true;for(var key in{toString:null}){_hasDontEnumBug=false}}function forIn(obj,fn,thisObj){var key,i=0;if(_hasDontEnumBug==null)checkDontEnum();for(key in obj){if(exec(fn,obj,key,thisObj)===false){break}}if(_hasDontEnumBug){var ctor=obj.constructor,isProto=!!ctor&&obj===ctor.prototype;while(key=_dontEnums[i++]){if((key!=="constructor"||!isProto&&hasOwn(obj,key))&&obj[key]!==Object.prototype[key]){if(exec(fn,obj,key,thisObj)===false){break}}}}}function exec(fn,obj,key,thisObj){return fn.call(thisObj,obj[key],key,obj)}module.exports=forIn},{"./hasOwn":7}],6:[function(require,module,exports){var hasOwn=require("./hasOwn");var forIn=require("./forIn");function forOwn(obj,fn,thisObj){forIn(obj,function(val,key){if(hasOwn(obj,key)){return fn.call(thisObj,obj[key],key,obj)}})}module.exports=forOwn},{"./forIn":5,"./hasOwn":7}],7:[function(require,module,exports){function hasOwn(obj,prop){return Object.prototype.hasOwnProperty.call(obj,prop)}module.exports=hasOwn},{}],8:[function(require,module,exports){var forOwn=require("./forOwn");function mixIn(target,objects){var i=0,n=arguments.length,obj;while(++i<n){obj=arguments[i];if(obj!=null){forOwn(obj,copyProp,target)}}return target}function copyProp(val,key){this[key]=val}module.exports=mixIn},{"./forOwn":6}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){var process=module.exports={};process.nextTick=function(){var canSetImmediate=typeof window!=="undefined"&&window.setImmediate;var canPost=typeof window!=="undefined"&&window.postMessage&&window.addEventListener;if(canSetImmediate){return function(f){return window.setImmediate(f)}}if(canPost){var queue=[];window.addEventListener("message",function(ev){var source=ev.source;if((source===window||source===null)&&ev.data==="process-tick"){ev.stopPropagation();if(queue.length>0){var fn=queue.shift();fn()}}},true);return function nextTick(fn){queue.push(fn);window.postMessage("process-tick","*")}}return function nextTick(fn){setTimeout(fn,0)}}();process.title="browser";process.browser=true;process.env={};process.argv=[];function noop(){}process.on=noop;process.once=noop;process.off=noop;process.emit=noop;process.binding=function(name){throw new Error("process.binding is not supported")};process.cwd=function(){return"/"};process.chdir=function(dir){throw new Error("process.chdir is not supported")}},{}],"1ezYnn":[function(require,module,exports){(function(process,global){"use strict";var kindOf=require("mout/lang/kindOf"),now=require("mout/time/now"),forEach=require("mout/array/forEach"),indexOf=require("mout/array/indexOf");var callbacks={timeout:{},frame:[],immediate:[]};var push=function(collection,callback,context,defer){var iterator=function(){iterate(collection)};if(!collection.length)defer(iterator);var entry={callback:callback,context:context};collection.push(entry);return function(){var io=indexOf(collection,entry);if(io>-1)collection.splice(io,1)}};var iterate=function(collection){var time=now();forEach(collection.splice(0),function(entry){entry.callback.call(entry.context,time)})};var defer=function(callback,argument,context){return kindOf(argument)==="Number"?defer.timeout(callback,argument,context):defer.immediate(callback,argument)};if(global.process&&process.nextTick){defer.immediate=function(callback,context){return push(callbacks.immediate,callback,context,process.nextTick)}}else if(global.setImmediate){defer.immediate=function(callback,context){return push(callbacks.immediate,callback,context,setImmediate)}}else if(global.postMessage&&global.addEventListener){addEventListener("message",function(event){if(event.source===global&&event.data==="@deferred"){event.stopPropagation();iterate(callbacks.immediate)}},true);defer.immediate=function(callback,context){return push(callbacks.immediate,callback,context,function(){postMessage("@deferred","*")})}}else{defer.immediate=function(callback,context){return push(callbacks.immediate,callback,context,function(iterator){setTimeout(iterator,0)})}}var requestAnimationFrame=global.requestAnimationFrame||global.webkitRequestAnimationFrame||global.mozRequestAnimationFrame||global.oRequestAnimationFrame||global.msRequestAnimationFrame||function(callback){setTimeout(callback,1e3/60)};defer.frame=function(callback,context){return push(callbacks.frame,callback,context,requestAnimationFrame)};var clear;defer.timeout=function(callback,ms,context){var ct=callbacks.timeout;if(!clear)clear=defer.immediate(function(){clear=null;callbacks.timeout={}});return push(ct[ms]||(ct[ms]=[]),callback,context,function(iterator){setTimeout(iterator,ms)})};module.exports=defer}).call(this,require("/home/admin/browserify-cdn/node_modules/browserify/node_modules/insert-module-globals/node_modules/process/browser.js"),typeof self!=="undefined"?self:typeof window!=="undefined"?window:{})},{"/home/admin/browserify-cdn/node_modules/browserify/node_modules/insert-module-globals/node_modules/process/browser.js":1,"mout/array/forEach":4,"mout/array/indexOf":5,"mout/lang/kindOf":6,"mout/time/now":7}],"prime/defer":[function(require,module,exports){module.exports=require("1ezYnn")},{}],4:[function(require,module,exports){function forEach(arr,callback,thisObj){if(arr==null){return}var i=-1,len=arr.length;while(++i<len){if(callback.call(thisObj,arr[i],i,arr)===false){break}}}module.exports=forEach},{}],5:[function(require,module,exports){function indexOf(arr,item,fromIndex){fromIndex=fromIndex||0;if(arr==null){return-1}var len=arr.length,i=fromIndex<0?len+fromIndex:fromIndex;while(i<len){if(arr[i]===item){return i}i++}return-1}module.exports=indexOf},{}],6:[function(require,module,exports){var _rKind=/^\[object (.*)\]$/,_toString=Object.prototype.toString,UNDEF;function kindOf(val){if(val===null){return"Null"}else if(val===UNDEF){return"Undefined"}else{return _rKind.exec(_toString.call(val))[1]}}module.exports=kindOf},{}],7:[function(require,module,exports){function now(){return now.get()}now.get=typeof Date.now==="function"?Date.now:function(){return+new Date};module.exports=now},{}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({kx4keW:[function(require,module,exports){var hasOwn=require("./hasOwn");var _hasDontEnumBug,_dontEnums;function checkDontEnum(){_dontEnums=["toString","toLocaleString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","constructor"];_hasDontEnumBug=true;for(var key in{toString:null}){_hasDontEnumBug=false}}function forIn(obj,fn,thisObj){var key,i=0;if(_hasDontEnumBug==null)checkDontEnum();for(key in obj){if(exec(fn,obj,key,thisObj)===false){break}}if(_hasDontEnumBug){var ctor=obj.constructor,isProto=!!ctor&&obj===ctor.prototype;while(key=_dontEnums[i++]){if((key!=="constructor"||!isProto&&hasOwn(obj,key))&&obj[key]!==Object.prototype[key]){if(exec(fn,obj,key,thisObj)===false){break}}}}}function exec(fn,obj,key,thisObj){return fn.call(thisObj,obj[key],key,obj)}module.exports=forIn},{"./hasOwn":3}],"mout/object/forIn":[function(require,module,exports){module.exports=require("kx4keW")},{}],3:[function(require,module,exports){function hasOwn(obj,prop){return Object.prototype.hasOwnProperty.call(obj,prop)}module.exports=hasOwn},{}]},{},[]);var prime=require("prime"),defer=require("prime/defer");var Transition=prime({constructor:function Transition(duration,equation,callback){if(!duration)throw new Error("no duration given");if(!equation)throw new Error("no equation given");if(!callback)throw new Error("no callback given");this.duration=duration;this.equation=equation;this.callback=callback},get paused(){return this.cancel==null&&this.elapsed!=null},get active(){return this.cancel!=null},get idle(){return this.cancel==null&&this.elapsed==null},start:function(){if(this.idle){this.elapsed=0;this.cancel=defer.frame(this.step,this)}return this},step:function(time){this.elapsed+=time-(this.time||time);var factor=this.elapsed/this.duration;if(factor>1)factor=1;if(factor!==1){this.time=time;this.cancel=defer.frame(this.step,this)}else{this.cancel=this.time=this.elapsed=null}var delta=this.equation(factor);this.callback(delta)},stop:function(){if(this.active){this.cancel();this.elapsed=this.cancel=this.time=null}return this},pause:function(){if(this.active){this.cancel();this.cancel=this.time=null}return this},resume:function(){if(this.paused){this.cancel=defer.frame(this.step,this)}return this}});var forIn=require("mout/object/forIn");var slice_=Array.prototype.slice;var equations={quad:function(p){return Math.pow(p,2)},cubic:function(p){return Math.pow(p,3)},quart:function(p){return Math.pow(p,4)},quint:function(p){return Math.pow(p,5)},expo:function(p){return Math.pow(2,8*(p-1))},circ:function(p){return 1-Math.sin(Math.acos(p))},sine:function(p){return 1-Math.cos(p*Math.PI/2)},bounce:function(p){var value;for(var a=0,b=1;1;a+=b,b/=2){if(p>=(7-4*a)/11){value=b*b-Math.pow((11-6*a-11*p)/4,2);break}}return value},pow:function(p,x){if(x==null)x=6;return Math.pow(p,x)},back:function(p,x){if(x==null)x=1.618;return Math.pow(p,2)*((x+1)*p-x)},elastic:function(p,x){if(x==null)x=1;return Math.pow(2,10*--p)*Math.cos(20*p*Math.PI*x/3)}};forIn(equations,function(equation,key){equations[key+"In"]=equation;equations[key+"Out"]=function(delta){return 1-equation(1-delta)};equations[key+"InOut"]=function(delta){var result=delta<=.5?equation(2*delta):2-equation(2*(1-delta));return result/2}});var canvas=document.createElement("canvas");canvas.width=600;canvas.height=600;document.body.appendChild(canvas);var context=canvas.getContext("2d");var zoom=10;var animation=new Transition(1e5,equations.sineIn,function(delta){zoom+=delta*25;context.clearRect(0,0,600,600);context.beginPath();context.arc(256-zoom/Math.sqrt(2),256-zoom/Math.sqrt(2),zoom,0,2*Math.PI,false);context.closePath();context.lineWidth=5;context.strokeStyle="#003300";context.stroke();context.beginPath();context.arc(512-zoom/Math.sqrt(2),512-zoom/Math.sqrt(2),zoom,0,2*Math.PI,false);context.closePath();context.strokeStyle="#33ff00";context.stroke();context.beginPath();context.arc(512-zoom/Math.sqrt(2),256-zoom/Math.sqrt(2),zoom,0,2*Math.PI,false);context.closePath();context.strokeStyle="#ff3333";context.stroke();context.beginPath();context.arc(256-zoom/Math.sqrt(2),512-zoom/Math.sqrt(2),zoom,0,2*Math.PI,false);context.closePath();context.strokeStyle="#ff33ff";context.stroke()});animation.start();canvas.onclick=function(){console.log(animation.paused);animation.paused?animation.resume():animation.pause()};

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "prime": "0.4.2",
    "mout": "0.9.1"
  }
}

page-head.html

<style type='text/css'>html, body { margin: 0; padding: 0; border: 0; }
body, html { height: 100%; width: 100%; }</style>

requirebin.md

made with requirebin