Skip to content

Instantly share code, notes, and snippets.

@nrw
Created May 29, 2014 20:24
Show Gist options
  • Save nrw/2acecd3e4502f0ff8980 to your computer and use it in GitHub Desktop.
Save nrw/2acecd3e4502f0ff8980 to your computer and use it in GitHub Desktop.
requirebin sketch
var raf = require("raf")
var throttle = require("lodash.throttle")
var canvas = document.createElement("canvas")
var ctx = canvas.getContext('2d')
// setup canvas
document.body.style.margin = document.body.style.padding = 0
document.body.appendChild(canvas)
// only redraw every 200 milliseconds
raf().on('data', throttle(resize, 200))
function resize () {
// only resize canvas if necessary
if (canvas.width !== window.innerWidth) canvas.width = window.innerWidth;
if (canvas.height !== window.innerHeight) canvas.height = window.innerHeight;
// red background so we can see it
ctx.fillStyle = '#f00'
// left 10 pixel space so the canvas edge is visible
ctx.fillRect(0, 0, canvas.width-10, canvas.height-10)
}
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){function EventEmitter(){this._events=this._events||{};this._maxListeners=this._maxListeners||undefined}module.exports=EventEmitter;EventEmitter.EventEmitter=EventEmitter;EventEmitter.prototype._events=undefined;EventEmitter.prototype._maxListeners=undefined;EventEmitter.defaultMaxListeners=10;EventEmitter.prototype.setMaxListeners=function(n){if(!isNumber(n)||n<0||isNaN(n))throw TypeError("n must be a positive number");this._maxListeners=n;return this};EventEmitter.prototype.emit=function(type){var er,handler,len,args,i,listeners;if(!this._events)this._events={};if(type==="error"){if(!this._events.error||isObject(this._events.error)&&!this._events.error.length){er=arguments[1];if(er instanceof Error){throw er}else{throw TypeError('Uncaught, unspecified "error" event.')}return false}}handler=this._events[type];if(isUndefined(handler))return false;if(isFunction(handler)){switch(arguments.length){case 1:handler.call(this);break;case 2:handler.call(this,arguments[1]);break;case 3:handler.call(this,arguments[1],arguments[2]);break;default:len=arguments.length;args=new Array(len-1);for(i=1;i<len;i++)args[i-1]=arguments[i];handler.apply(this,args)}}else if(isObject(handler)){len=arguments.length;args=new Array(len-1);for(i=1;i<len;i++)args[i-1]=arguments[i];listeners=handler.slice();len=listeners.length;for(i=0;i<len;i++)listeners[i].apply(this,args)}return true};EventEmitter.prototype.addListener=function(type,listener){var m;if(!isFunction(listener))throw TypeError("listener must be a function");if(!this._events)this._events={};if(this._events.newListener)this.emit("newListener",type,isFunction(listener.listener)?listener.listener:listener);if(!this._events[type])this._events[type]=listener;else if(isObject(this._events[type]))this._events[type].push(listener);else this._events[type]=[this._events[type],listener];if(isObject(this._events[type])&&!this._events[type].warned){var m;if(!isUndefined(this._maxListeners)){m=this._maxListeners}else{m=EventEmitter.defaultMaxListeners}if(m&&m>0&&this._events[type].length>m){this._events[type].warned=true;console.error("(node) warning: possible EventEmitter memory "+"leak detected. %d listeners added. "+"Use emitter.setMaxListeners() to increase limit.",this._events[type].length);console.trace()}}return this};EventEmitter.prototype.on=EventEmitter.prototype.addListener;EventEmitter.prototype.once=function(type,listener){if(!isFunction(listener))throw TypeError("listener must be a function");var fired=false;function g(){this.removeListener(type,g);if(!fired){fired=true;listener.apply(this,arguments)}}g.listener=listener;this.on(type,g);return this};EventEmitter.prototype.removeListener=function(type,listener){var list,position,length,i;if(!isFunction(listener))throw TypeError("listener must be a function");if(!this._events||!this._events[type])return this;list=this._events[type];length=list.length;position=-1;if(list===listener||isFunction(list.listener)&&list.listener===listener){delete this._events[type];if(this._events.removeListener)this.emit("removeListener",type,listener)}else if(isObject(list)){for(i=length;i-->0;){if(list[i]===listener||list[i].listener&&list[i].listener===listener){position=i;break}}if(position<0)return this;if(list.length===1){list.length=0;delete this._events[type]}else{list.splice(position,1)}if(this._events.removeListener)this.emit("removeListener",type,listener)}return this};EventEmitter.prototype.removeAllListeners=function(type){var key,listeners;if(!this._events)return this;if(!this._events.removeListener){if(arguments.length===0)this._events={};else if(this._events[type])delete this._events[type];return this}if(arguments.length===0){for(key in this._events){if(key==="removeListener")continue;this.removeAllListeners(key)}this.removeAllListeners("removeListener");this._events={};return this}listeners=this._events[type];if(isFunction(listeners)){this.removeListener(type,listeners)}else{while(listeners.length)this.removeListener(type,listeners[listeners.length-1])}delete this._events[type];return this};EventEmitter.prototype.listeners=function(type){var ret;if(!this._events||!this._events[type])ret=[];else if(isFunction(this._events[type]))ret=[this._events[type]];else ret=this._events[type].slice();return ret};EventEmitter.listenerCount=function(emitter,type){var ret;if(!emitter._events||!emitter._events[type])ret=0;else if(isFunction(emitter._events[type]))ret=1;else ret=emitter._events[type].length;return ret};function isFunction(arg){return typeof arg==="function"}function isNumber(arg){return typeof arg==="number"}function isObject(arg){return typeof arg==="object"&&arg!==null}function isUndefined(arg){return arg===void 0}},{}],"5kejYY":[function(require,module,exports){(function(global){module.exports=raf;var EE=require("events").EventEmitter,_raf=require("./polyfill.js"),now=global.performance&&global.performance.now?function(){return performance.now()}:Date.now||function(){return+new Date};function raf(el,tick){var now=raf.now(),ee=new EE;if(typeof el==="function"){tick=el;el=undefined}ee.pause=function(){ee.paused=true};ee.resume=function(){ee.paused=false};_raf.call(window,iter,el);if(tick){ee.on("data",function(dt){tick(dt)})}return ee;function iter(timestamp){var _now=raf.now(),dt=_now-now;now=_now;if(!ee.paused){ee.emit("data",dt)}_raf.call(window,iter,el)}}raf.polyfill=_raf;raf.now=now}).call(this,typeof self!=="undefined"?self:typeof window!=="undefined"?window:{})},{"./polyfill.js":4,events:1}],raf:[function(require,module,exports){module.exports=require("5kejYY")},{}],4:[function(require,module,exports){var global=typeof window==="undefined"?this:window;var _raf=global.requestAnimationFrame||global.webkitRequestAnimationFrame||global.mozRequestAnimationFrame||global.msRequestAnimationFrame||global.oRequestAnimationFrame||(global.setImmediate?function(fn,el){setImmediate(fn)}:function(fn,el){setTimeout(fn,0)});module.exports=_raf},{}]},{},[]);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}({wMdcQF:[function(require,module,exports){var debounce=require("lodash.debounce"),isFunction=require("lodash.isfunction"),isObject=require("lodash.isobject");var debounceOptions={leading:false,maxWait:0,trailing:false};function throttle(func,wait,options){var leading=true,trailing=true;if(!isFunction(func)){throw new TypeError}if(options===false){leading=false}else if(isObject(options)){leading="leading"in options?options.leading:leading;trailing="trailing"in options?options.trailing:trailing}debounceOptions.leading=leading;debounceOptions.maxWait=wait;debounceOptions.trailing=trailing;return debounce(func,wait,debounceOptions)}module.exports=throttle},{"lodash.debounce":3,"lodash.isfunction":6,"lodash.isobject":7}],"lodash.throttle":[function(require,module,exports){module.exports=require("wMdcQF")},{}],3:[function(require,module,exports){var isFunction=require("lodash.isfunction"),isObject=require("lodash.isobject"),now=require("lodash.now");var nativeMax=Math.max;function debounce(func,wait,options){var args,maxTimeoutId,result,stamp,thisArg,timeoutId,trailingCall,lastCalled=0,maxWait=false,trailing=true;if(!isFunction(func)){throw new TypeError}wait=nativeMax(0,wait)||0;if(options===true){var leading=true;trailing=false}else if(isObject(options)){leading=options.leading;maxWait="maxWait"in options&&(nativeMax(wait,options.maxWait)||0);trailing="trailing"in options?options.trailing:trailing}var delayed=function(){var remaining=wait-(now()-stamp);if(remaining<=0){if(maxTimeoutId){clearTimeout(maxTimeoutId)}var isCalled=trailingCall;maxTimeoutId=timeoutId=trailingCall=undefined;if(isCalled){lastCalled=now();result=func.apply(thisArg,args);if(!timeoutId&&!maxTimeoutId){args=thisArg=null}}}else{timeoutId=setTimeout(delayed,remaining)}};var maxDelayed=function(){if(timeoutId){clearTimeout(timeoutId)}maxTimeoutId=timeoutId=trailingCall=undefined;if(trailing||maxWait!==wait){lastCalled=now();result=func.apply(thisArg,args);if(!timeoutId&&!maxTimeoutId){args=thisArg=null}}};return function(){args=arguments;stamp=now();thisArg=this;trailingCall=trailing&&(timeoutId||!leading);if(maxWait===false){var leadingCall=leading&&!timeoutId}else{if(!maxTimeoutId&&!leading){lastCalled=stamp}var remaining=maxWait-(stamp-lastCalled),isCalled=remaining<=0;if(isCalled){if(maxTimeoutId){maxTimeoutId=clearTimeout(maxTimeoutId)}lastCalled=stamp;result=func.apply(thisArg,args)}else if(!maxTimeoutId){maxTimeoutId=setTimeout(maxDelayed,remaining)}}if(isCalled&&timeoutId){timeoutId=clearTimeout(timeoutId)}else if(!timeoutId&&wait!==maxWait){timeoutId=setTimeout(delayed,wait)}if(leadingCall){isCalled=true;result=func.apply(thisArg,args)}if(isCalled&&!timeoutId&&!maxTimeoutId){args=thisArg=null}return result}}module.exports=debounce},{"lodash.isfunction":6,"lodash.isobject":7,"lodash.now":4}],4:[function(require,module,exports){var isNative=require("lodash._isnative");var now=isNative(now=Date.now)&&now||function(){return(new Date).getTime()};module.exports=now},{"lodash._isnative":5}],5:[function(require,module,exports){var objectProto=Object.prototype;var toString=objectProto.toString;var reNative=RegExp("^"+String(toString).replace(/[.*+?^${}()|[\]\\]/g,"\\$&").replace(/toString| for [^\]]+/g,".*?")+"$");function isNative(value){return typeof value=="function"&&reNative.test(value)}module.exports=isNative},{}],6:[function(require,module,exports){function isFunction(value){return typeof value=="function"}module.exports=isFunction},{}],7:[function(require,module,exports){var objectTypes=require("lodash._objecttypes");function isObject(value){return!!(value&&objectTypes[typeof value])}module.exports=isObject},{"lodash._objecttypes":8}],8:[function(require,module,exports){var objectTypes={"boolean":false,"function":true,object:true,number:false,string:false,undefined:false};module.exports=objectTypes},{}]},{},[]);var raf=require("raf");var throttle=require("lodash.throttle");var canvas=document.createElement("canvas");var ctx=canvas.getContext("2d");document.body.style.margin=document.body.style.padding=0;document.body.appendChild(canvas);raf().on("data",throttle(resize,200));function resize(){if(canvas.width!==window.innerWidth)canvas.width=window.innerWidth;if(canvas.height!==window.innerHeight)canvas.height=window.innerHeight;ctx.fillStyle="#f00";ctx.fillRect(0,0,canvas.width-10,canvas.height-10)}
{
"name": "requirebin-sketch",
"version": "1.0.0",
"dependencies": {
"raf": "0.1.3",
"lodash.throttle": "2.4.1"
}
}
<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