made with requirebin
Last active
August 29, 2015 14:11
-
-
Save davidguttman/bd18f1888dfbb2898400 to your computer and use it in GitHub Desktop.
requirebin sketch
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Our RequestAnimationFrame helper | |
var raf = require('raf') | |
var ease = require('ease-component') | |
// Create our canvas and add it to the page | |
var canvas = document.createElement('canvas') | |
document.body.appendChild(canvas) | |
var ctx = canvas.getContext('2d') | |
// Make the canvas fullscreen and keep track of the width/height | |
var width = canvas.width = window.innerWidth - 105 | |
var height = canvas.height = window.innerHeight | |
var easeTypes = ['linear','outQuart','outBounce'] | |
// Pick a loop duration | |
var duration = 2000 | |
var laneHeight = height/easeTypes.length | |
// This will get called up to 60 times/second | |
function render () { | |
// Keep track of our "progress" in the loop, always between 0 and 1 | |
var p = (Date.now() % duration) / duration | |
// Clear everything from before | |
ctx.clearRect(0,0,width,height) | |
easeTypes.forEach(function(type, i) { | |
var h = laneHeight * 0.75 | |
var w = h | |
var x = ease[type](p) * (width - w) | |
var y = i * laneHeight | |
ctx.fillRect(x, y, w, h) | |
}) | |
// Let's do that again! | |
raf(render) | |
} | |
// Kick it off | |
raf(render) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.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.addListener=noop;process.once=noop;process.off=noop;process.removeListener=noop;process.removeAllListeners=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")}},{}],2:[function(require,module,exports){(function(process){(function(){var getNanoSeconds,hrtime,loadTime;if(typeof performance!=="undefined"&&performance!==null&&performance.now){module.exports=function(){return performance.now()}}else if(typeof process!=="undefined"&&process!==null&&process.hrtime){module.exports=function(){return(getNanoSeconds()-loadTime)/1e6};hrtime=process.hrtime;getNanoSeconds=function(){var hr;hr=hrtime();return hr[0]*1e9+hr[1]};loadTime=getNanoSeconds()}else if(Date.now){module.exports=function(){return Date.now()-loadTime};loadTime=Date.now()}else{module.exports=function(){return(new Date).getTime()-loadTime};loadTime=(new Date).getTime()}}).call(this)}).call(this,require("_process"))},{_process:1}],raf:[function(require,module,exports){var now=require("performance-now"),global=typeof window==="undefined"?{}:window,vendors=["moz","webkit"],suffix="AnimationFrame",raf=global["request"+suffix],caf=global["cancel"+suffix]||global["cancelRequest"+suffix],isNative=true;for(var i=0;i<vendors.length&&!raf;i++){raf=global[vendors[i]+"Request"+suffix];caf=global[vendors[i]+"Cancel"+suffix]||global[vendors[i]+"CancelRequest"+suffix]}if(!raf||!caf){isNative=false;var last=0,id=0,queue=[],frameDuration=1e3/60;raf=function(callback){if(queue.length===0){var _now=now(),next=Math.max(0,frameDuration-(_now-last));last=next+_now;setTimeout(function(){var cp=queue.slice(0);queue.length=0;for(var i=0;i<cp.length;i++){if(!cp[i].cancelled){try{cp[i].callback(last)}catch(e){setTimeout(function(){throw e},0)}}}},Math.round(next))}queue.push({handle:++id,callback:callback,cancelled:false});return id};caf=function(handle){for(var i=0;i<queue.length;i++){if(queue[i].handle===handle){queue[i].cancelled=true}}}}module.exports=function(fn){if(!isNative){return raf.call(global,fn)}return raf.call(global,function(){try{fn.apply(this,arguments)}catch(e){setTimeout(function(){throw e},0)}})};module.exports.cancel=function(){caf.apply(global,arguments)}},{"performance-now":2}]},{},[]);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);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.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}({"ease-component":[function(require,module,exports){exports.linear=function(n){return n};exports.inQuad=function(n){return n*n};exports.outQuad=function(n){return n*(2-n)};exports.inOutQuad=function(n){n*=2;if(n<1)return.5*n*n;return-.5*(--n*(n-2)-1)};exports.inCube=function(n){return n*n*n};exports.outCube=function(n){return--n*n*n+1};exports.inOutCube=function(n){n*=2;if(n<1)return.5*n*n*n;return.5*((n-=2)*n*n+2)};exports.inQuart=function(n){return n*n*n*n};exports.outQuart=function(n){return 1- --n*n*n*n};exports.inOutQuart=function(n){n*=2;if(n<1)return.5*n*n*n*n;return-.5*((n-=2)*n*n*n-2)};exports.inQuint=function(n){return n*n*n*n*n};exports.outQuint=function(n){return--n*n*n*n*n+1};exports.inOutQuint=function(n){n*=2;if(n<1)return.5*n*n*n*n*n;return.5*((n-=2)*n*n*n*n+2)};exports.inSine=function(n){return 1-Math.cos(n*Math.PI/2)};exports.outSine=function(n){return Math.sin(n*Math.PI/2)};exports.inOutSine=function(n){return.5*(1-Math.cos(Math.PI*n))};exports.inExpo=function(n){return 0==n?0:Math.pow(1024,n-1)};exports.outExpo=function(n){return 1==n?n:1-Math.pow(2,-10*n)};exports.inOutExpo=function(n){if(0==n)return 0;if(1==n)return 1;if((n*=2)<1)return.5*Math.pow(1024,n-1);return.5*(-Math.pow(2,-10*(n-1))+2)};exports.inCirc=function(n){return 1-Math.sqrt(1-n*n)};exports.outCirc=function(n){return Math.sqrt(1- --n*n)};exports.inOutCirc=function(n){n*=2;if(n<1)return-.5*(Math.sqrt(1-n*n)-1);return.5*(Math.sqrt(1-(n-=2)*n)+1)};exports.inBack=function(n){var s=1.70158;return n*n*((s+1)*n-s)};exports.outBack=function(n){var s=1.70158;return--n*n*((s+1)*n+s)+1};exports.inOutBack=function(n){var s=1.70158*1.525;if((n*=2)<1)return.5*(n*n*((s+1)*n-s));return.5*((n-=2)*n*((s+1)*n+s)+2)};exports.inBounce=function(n){return 1-exports.outBounce(1-n)};exports.outBounce=function(n){if(n<1/2.75){return 7.5625*n*n}else if(n<2/2.75){return 7.5625*(n-=1.5/2.75)*n+.75}else if(n<2.5/2.75){return 7.5625*(n-=2.25/2.75)*n+.9375}else{return 7.5625*(n-=2.625/2.75)*n+.984375}};exports.inOutBounce=function(n){if(n<.5)return exports.inBounce(n*2)*.5;return exports.outBounce(n*2-1)*.5+.5};exports["in-quad"]=exports.inQuad;exports["out-quad"]=exports.outQuad;exports["in-out-quad"]=exports.inOutQuad;exports["in-cube"]=exports.inCube;exports["out-cube"]=exports.outCube;exports["in-out-cube"]=exports.inOutCube;exports["in-quart"]=exports.inQuart;exports["out-quart"]=exports.outQuart;exports["in-out-quart"]=exports.inOutQuart;exports["in-quint"]=exports.inQuint;exports["out-quint"]=exports.outQuint;exports["in-out-quint"]=exports.inOutQuint;exports["in-sine"]=exports.inSine;exports["out-sine"]=exports.outSine;exports["in-out-sine"]=exports.inOutSine;exports["in-expo"]=exports.inExpo;exports["out-expo"]=exports.outExpo;exports["in-out-expo"]=exports.inOutExpo;exports["in-circ"]=exports.inCirc;exports["out-circ"]=exports.outCirc;exports["in-out-circ"]=exports.inOutCirc;exports["in-back"]=exports.inBack;exports["out-back"]=exports.outBack;exports["in-out-back"]=exports.inOutBack;exports["in-bounce"]=exports.inBounce;exports["out-bounce"]=exports.outBounce;exports["in-out-bounce"]=exports.inOutBounce},{}]},{},[]);var raf=require("raf");var ease=require("ease-component");var canvas=document.createElement("canvas");document.body.appendChild(canvas);var ctx=canvas.getContext("2d");var width=canvas.width=window.innerWidth-105;var height=canvas.height=window.innerHeight;var easeTypes=["linear","outQuart","outBounce"];var duration=2e3;var laneHeight=height/easeTypes.length;function render(){var p=Date.now()%duration/duration;ctx.clearRect(0,0,width,height);easeTypes.forEach(function(type,i){var h=laneHeight*.75;var w=h;var x=ease[type](p)*(width-w);var y=i*laneHeight;ctx.fillRect(x,y,w,h)});raf(render)}raf(render); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "requirebin-sketch", | |
"version": "1.0.0", | |
"dependencies": { | |
"raf": "2.0.4", | |
"ease-component": "1.0.0" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style type='text/css'>html, body { margin: 0; padding: 0; border: 0; } | |
body, html { height: 100%; width: 100%; }</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment