made with requirebin
Last active
August 29, 2015 14:11
-
-
Save davidguttman/37b2ad06772c3012af39 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 | |
var height = canvas.height = window.innerHeight | |
// Pick a loop duration | |
var duration = 2000 | |
// 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 | |
// Get a modified "eased" progress | |
var ep = ease.outBounce(p) | |
// Clear everything from before | |
ctx.clearRect(0,0,width,height) | |
// Pick a new x position based on the "eased" progress | |
var x = ep * width | |
var y = 30 | |
var w = 50 | |
var h = w | |
// Draw a new box | |
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;var height=canvas.height=window.innerHeight;var duration=2e3;function render(){var p=Date.now()%duration/duration;var ep=ease.outBounce(p);ctx.clearRect(0,0,width,height);var x=ep*width;var y=30;var w=50;var h=w;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