requirebin sketch

index.js

var fill = require('fill-colorcoded-bar');
var Bar = require('colorcoded-bar');
var raf = require('raf');

var data = [];
for (var i = 0; i < 1000; i++) data[i] = Math.random();

(function(){
  var el = document.createElement('canvas');
  document.body.appendChild(el);
  var bar = new Bar;

  var status = fill(bar, {
    strategy: 'topdown',
    length: 1000
  }, function(i, cb){
    setTimeout(function(){
      cb(null, 'rgba(1, 1, 1, ' + data[i] + ')');
    }, Math.random() * 300);
  });

  (function draw(){
    bar.render({ width: 100, height: 600, canvas: el });
    if (status.fetching) raf(draw);
  })();
})();

(function(){
  var canvas = document.createElement('canvas');
  document.body.appendChild(canvas);
  var bar = new Bar;

  var status = fill(bar, {
    strategy: 'refine',
    length: 1000
  }, function(i, cb){
    setTimeout(function(){
      cb(null, 'rgba(1, 1, 1, ' + data[i] + ')');
    }, Math.random() * 300);
  });

  (function draw(){
    bar.render({ width: 100, height: 600, canvas: canvas });
    if (status.fetching) raf(draw);
  })();
})();

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);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){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}throw TypeError('Uncaught, unspecified "error" event.')}}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);if(typeof console.trace==="function"){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}},{}],2:[function(require,module,exports){var process=module.exports={};process.nextTick=function(){var canSetImmediate=typeof window!=="undefined"&&window.setImmediate;var canMutationObserver=typeof window!=="undefined"&&window.MutationObserver;var canPost=typeof window!=="undefined"&&window.postMessage&&window.addEventListener;if(canSetImmediate){return function(f){return window.setImmediate(f)}}var queue=[];if(canMutationObserver){var hiddenDiv=document.createElement("div");var observer=new MutationObserver(function(){var queueList=queue.slice();queue.length=0;queueList.forEach(function(fn){fn()})});observer.observe(hiddenDiv,{attributes:true});return function nextTick(fn){if(!queue.length){hiddenDiv.setAttribute("yes","no")}queue.push(fn)}}if(canPost){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")}},{}],3:[function(require,module,exports){(function(process){module.exports=function(tasks,cb){var results,pending,keys;var isSync=true;if(Array.isArray(tasks)){results=[];pending=tasks.length}else{keys=Object.keys(tasks);results={};pending=keys.length}function done(err){function end(){if(cb)cb(err,results);cb=null}if(isSync)process.nextTick(end);else end()}function each(i,err,result){results[i]=result;if(--pending===0||err){done(err)}}if(!pending){done(null)}else if(keys){keys.forEach(function(key){tasks[key](each.bind(undefined,key))})}else{tasks.forEach(function(task,i){task(each.bind(undefined,i))})}isSync=false}}).call(this,require("_process"))},{_process:2}],"fill-colorcoded-bar":[function(require,module,exports){var parallel=require("run-parallel");var EventEmitter=require("events").EventEmitter;module.exports=function(bar,opts,fetch){if(typeof opts=="function"){fetch=opts;opts={}}var status=new EventEmitter;status.fetching=true;var fetching=true;var length=opts.length;var iterate=iterators[opts.strategy||"topdown"](length);var concurrency=opts.concurrency||10;if(typeof length!="undefined")bar.set(length,"");(function next(){var fns=[];for(var j=0;j<concurrency;j++){fns.push(function(cb){var i=iterate();if(typeof i=="undefined"){fetching=false;return cb()}fetch(i,function(err,value){if(err)return cb(err);bar.set(i,value);cb()})})}parallel(fns,function(err){if(err)return status.emit("error",err);if(fetching){next()}else{console.log("done");status.fetching=false;status.emit("done")}})})();return status};var iterators={};iterators.refine=function(length){if(typeof length=="undefined"){throw new Error("refine strategy requires .length")}var next=[];var emitted=[];var divisor=2;return function(){if(!next.length){var seg=length/divisor;for(var i=0;i<divisor;i++){var val=Math.floor(seg*i);if(emitted.indexOf(val)>-1)continue;next.push(val);emitted.push(val)}if(divisor>=length&&seg<2)return;divisor*=2}var i=next.shift();return i}};iterators.topdown=function(length){var i=0;if(typeof length=="undefined")length=Infinity;return function(){if(i==length)return;return i++}}},{events:1,"run-parallel":3}]},{},[]);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}({"colorcoded-bar":[function(require,module,exports){var pink="rgb(255, 192, 203)";module.exports=Bar;function Bar(){this._data=[]}Bar.prototype.set=function(idx,color){this._data[idx]=color};Bar.prototype.render=function(opts){opts=opts||{};var self=this;var canvas=opts.canvas||document.createElement("canvas");var ctx=canvas.getContext("2d");var horizontal=opts.horizontal;var data=this._data;var ratio=window.devicePixelRatio||1;var height=opts.height||100;var width=opts.width||100;canvas.style.height=height+"px";canvas.style.width=width+"px";height=canvas.height=height*ratio;width=canvas.width=width*ratio;var length=horizontal?width:height;var last;for(var i=0;i<length;i++){var offset=i/length;var color=data[Math.floor(offset*data.length)]||last||pink;last=color;var startX=horizontal?Math.round(offset*width):0;var startY=horizontal?0:Math.round(offset*height);var endX=horizontal?startX:width;var endY=horizontal?height:startY;ctx.beginPath();ctx.moveTo(startX,startY);ctx.lineTo(endX,endY);ctx.strokeStyle=color;ctx.stroke()}ctx.scale(ratio,ratio);return canvas}},{}]},{},[]);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 canMutationObserver=typeof window!=="undefined"&&window.MutationObserver;var canPost=typeof window!=="undefined"&&window.postMessage&&window.addEventListener;if(canSetImmediate){return function(f){return window.setImmediate(f)}}var queue=[];if(canMutationObserver){var hiddenDiv=document.createElement("div");var observer=new MutationObserver(function(){var queueList=queue.slice();queue.length=0;queueList.forEach(function(fn){fn()})});observer.observe(hiddenDiv,{attributes:true});return function nextTick(fn){if(!queue.length){hiddenDiv.setAttribute("yes","no")}queue.push(fn)}}if(canPost){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];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){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){return raf.call(global,fn)};module.exports.cancel=function(){caf.apply(global,arguments)}},{"performance-now":2}]},{},[]);var fill=require("fill-colorcoded-bar");var Bar=require("colorcoded-bar");var raf=require("raf");var data=[];for(var i=0;i<1e3;i++)data[i]=Math.random();(function(){var el=document.createElement("canvas");document.body.appendChild(el);var bar=new Bar;var status=fill(bar,{strategy:"topdown",length:1e3},function(i,cb){setTimeout(function(){cb(null,"rgba(1, 1, 1, "+data[i]+")")},Math.random()*300)});(function draw(){bar.render({width:100,height:600,canvas:el});if(status.fetching)raf(draw)})()})();(function(){var canvas=document.createElement("canvas");document.body.appendChild(canvas);var bar=new Bar;var status=fill(bar,{strategy:"refine",length:1e3},function(i,cb){setTimeout(function(){cb(null,"rgba(1, 1, 1, "+data[i]+")")},Math.random()*300)});(function draw(){bar.render({width:100,height:600,canvas:canvas});if(status.fetching)raf(draw)})()})();

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "fill-colorcoded-bar": "1.0.0",
    "colorcoded-bar": "2.4.1",
    "raf": "3.1.0"
  }
}

page-body.html

<!-- contents of this file will be placed inside the <body> -->

page-head.html

<!-- contents of this file will be placed inside the <head> -->

requirebin.md

made with requirebin