requirebin sketch

index.js

var Promise = require('promise');
var domify = require('domify');
var insertCSS = require('insert-css');
var stage = domify('<div class="stage"><div class="light"></div><div class="road"><div class="crossing"><div></div><div></div><div></div><div></div><div></div></div></div></div>');

var pedestrians = [];
var whenGreen = new Promise(function(resolve) {
  setTimeout(function () {
    stage.classList.add('green');
    resolve();
  }, 5000);
});

(function () {
	var total = 10, current = 0;
  
  function makePedestrians () {
    current++;
    var ped = domify('<div id="p' + current + '" class="pedestrian"></div>');
    var x = rnd(250, 350);
    var y = rnd(0, 50);
    
    ped.style.top = y + 'px';
    ped.style.left = x + 'px';
    
    pedestrians.push(ped);
    stage.appendChild(ped);
    
    if (current < total) {
    	makePedestrians();
    }
  }
  makePedestrians();
})();

(function () {
  function pedestrianApproach () {
    var ped = pedestrians.shift();
    if (!ped) { return; }
    
    ped.style.top = '95px';
    whenGreen.then(function () {
      ped.style.top = '220px';
    });
    
    setTimeout(function () {
    	pedestrianApproach();
    }, 1000);
  }
  
  setTimeout(function () {
  	pedestrianApproach();
  }, 2000);
})();


function rnd (min, max) {
  return Math.floor(Math.random() * ( max - ( min + 1 ) ) + ( min + 1 ));
}

var css  = '.stage { position: relative; width: 600px; height: 300px; background: #ccc; } ';
css += '.road { position: absolute; top: 100px; left: 0; width: 100%; height: 90px; background: #666; border-top: 3px solid #555; border-bottom: 3px solid #555; } ';
css += '.crossing { opacity: 0.6; position: absolute; top: 0; left: 250px; width: 100px; height: 90px; } ';
css += '.green .crossing { opacity: 1; } ';
css += '.crossing div { width: 100%; height: 10px; margin-bottom: 10px; background: yellow; } ';
css += '.crossing div:last-child { margin-bottom: 0; } ';
css += '.light { position: absolute; top: 200px; left: 245px; width: 10px; height: 5px; background: red; } ';
css += '.green .light { background: lime; } ';
css += '.pedestrian { position: absolute; height: 6px; width: 6px; border-radius: 50%; background: green; transition: top 1s; } ';

insertCSS(css);
document.body.appendChild(stage);

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}({G56gnv:[function(require,module,exports){var inserted={};module.exports=function(css){if(inserted[css])return;inserted[css]=true;var elem=document.createElement("style");elem.setAttribute("type","text/css");if("textContent"in elem){elem.textContent=css}else{elem.styleSheet.cssText=css}var head=document.getElementsByTagName("head")[0];head.appendChild(elem)}},{}],"insert-css":[function(require,module,exports){module.exports=require("G56gnv")},{}]},{},[]);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}({"6cIyZX":[function(require,module,exports){module.exports=parse;var map={legend:[1,"<fieldset>","</fieldset>"],tr:[2,"<table><tbody>","</tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],_default:[0,"",""]};map.td=map.th=[3,"<table><tbody><tr>","</tr></tbody></table>"];map.option=map.optgroup=[1,'<select multiple="multiple">',"</select>"];map.thead=map.tbody=map.colgroup=map.caption=map.tfoot=[1,"<table>","</table>"];map.text=map.circle=map.ellipse=map.line=map.path=map.polygon=map.polyline=map.rect=[1,'<svg xmlns="http://www.w3.org/2000/svg" version="1.1">',"</svg>"];function parse(html){if("string"!=typeof html)throw new TypeError("String expected");var m=/<([\w:]+)/.exec(html);if(!m)return document.createTextNode(html);html=html.replace(/^\s+|\s+$/g,"");var tag=m[1];if(tag=="body"){var el=document.createElement("html");el.innerHTML=html;return el.removeChild(el.lastChild)}var wrap=map[tag]||map._default;var depth=wrap[0];var prefix=wrap[1];var suffix=wrap[2];var el=document.createElement("div");el.innerHTML=prefix+html+suffix;while(depth--)el=el.lastChild;if(el.firstChild==el.lastChild){return el.removeChild(el.firstChild)}var fragment=document.createDocumentFragment();while(el.firstChild){fragment.appendChild(el.removeChild(el.firstChild))}return fragment}},{}],domify:[function(require,module,exports){module.exports=require("6cIyZX")},{}]},{},[]);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")}},{}],2:[function(require,module,exports){"use strict";var asap=require("asap");module.exports=Promise;function Promise(fn){if(typeof this!=="object")throw new TypeError("Promises must be constructed via new");if(typeof fn!=="function")throw new TypeError("not a function");var state=null;var value=null;var deferreds=[];var self=this;this.then=function(onFulfilled,onRejected){return new Promise(function(resolve,reject){handle(new Handler(onFulfilled,onRejected,resolve,reject))})};function handle(deferred){if(state===null){deferreds.push(deferred);return}asap(function(){var cb=state?deferred.onFulfilled:deferred.onRejected;if(cb===null){(state?deferred.resolve:deferred.reject)(value);return}var ret;try{ret=cb(value)}catch(e){deferred.reject(e);return}deferred.resolve(ret)})}function resolve(newValue){try{if(newValue===self)throw new TypeError("A promise cannot be resolved with itself.");if(newValue&&(typeof newValue==="object"||typeof newValue==="function")){var then=newValue.then;if(typeof then==="function"){doResolve(then.bind(newValue),resolve,reject);return}}state=true;value=newValue;finale()}catch(e){reject(e)}}function reject(newValue){state=false;value=newValue;finale()}function finale(){for(var i=0,len=deferreds.length;i<len;i++)handle(deferreds[i]);deferreds=null}doResolve(fn,resolve,reject)}function Handler(onFulfilled,onRejected,resolve,reject){this.onFulfilled=typeof onFulfilled==="function"?onFulfilled:null;this.onRejected=typeof onRejected==="function"?onRejected:null;this.resolve=resolve;this.reject=reject}function doResolve(fn,onFulfilled,onRejected){var done=false;try{fn(function(value){if(done)return;done=true;onFulfilled(value)},function(reason){if(done)return;done=true;onRejected(reason)})}catch(ex){if(done)return;done=true;onRejected(ex)}}},{asap:5}],zjU2VA:[function(require,module,exports){"use strict";var Promise=require("./core.js");var asap=require("asap");module.exports=Promise;function ValuePromise(value){this.then=function(onFulfilled){if(typeof onFulfilled!=="function")return this;return new Promise(function(resolve,reject){asap(function(){try{resolve(onFulfilled(value))}catch(ex){reject(ex)}})})}}ValuePromise.prototype=Object.create(Promise.prototype);var TRUE=new ValuePromise(true);var FALSE=new ValuePromise(false);var NULL=new ValuePromise(null);var UNDEFINED=new ValuePromise(undefined);var ZERO=new ValuePromise(0);var EMPTYSTRING=new ValuePromise("");Promise.resolve=function(value){if(value instanceof Promise)return value;if(value===null)return NULL;if(value===undefined)return UNDEFINED;if(value===true)return TRUE;if(value===false)return FALSE;if(value===0)return ZERO;if(value==="")return EMPTYSTRING;if(typeof value==="object"||typeof value==="function"){try{var then=value.then;if(typeof then==="function"){return new Promise(then.bind(value))}}catch(ex){return new Promise(function(resolve,reject){reject(ex)})}}return new ValuePromise(value)};Promise.from=Promise.cast=function(value){var err=new Error("Promise.from and Promise.cast are deprecated, use Promise.resolve instead");err.name="Warning";console.warn(err.stack);return Promise.resolve(value)};Promise.denodeify=function(fn,argumentCount){argumentCount=argumentCount||Infinity;return function(){var self=this;var args=Array.prototype.slice.call(arguments);return new Promise(function(resolve,reject){while(args.length&&args.length>argumentCount){args.pop()}args.push(function(err,res){if(err)reject(err);else resolve(res)});fn.apply(self,args)})}};Promise.nodeify=function(fn){return function(){var args=Array.prototype.slice.call(arguments);var callback=typeof args[args.length-1]==="function"?args.pop():null;try{return fn.apply(this,arguments).nodeify(callback)}catch(ex){if(callback===null||typeof callback=="undefined"){return new Promise(function(resolve,reject){reject(ex)})}else{asap(function(){callback(ex)})}}}};Promise.all=function(){var calledWithArray=arguments.length===1&&Array.isArray(arguments[0]);var args=Array.prototype.slice.call(calledWithArray?arguments[0]:arguments);if(!calledWithArray){var err=new Error("Promise.all should be called with a single array, calling it with multiple arguments is deprecated");err.name="Warning";console.warn(err.stack)}return new Promise(function(resolve,reject){if(args.length===0)return resolve([]);var remaining=args.length;function res(i,val){try{if(val&&(typeof val==="object"||typeof val==="function")){var then=val.then;if(typeof then==="function"){then.call(val,function(val){res(i,val)},reject);return}}args[i]=val;if(--remaining===0){resolve(args)}}catch(ex){reject(ex)}}for(var i=0;i<args.length;i++){res(i,args[i])}})};Promise.reject=function(value){return new Promise(function(resolve,reject){reject(value)})};Promise.race=function(values){return new Promise(function(resolve,reject){values.forEach(function(value){Promise.resolve(value).then(resolve,reject)})})};Promise.prototype.done=function(onFulfilled,onRejected){var self=arguments.length?this.then.apply(this,arguments):this;self.then(null,function(err){asap(function(){throw err})})};Promise.prototype.nodeify=function(callback){if(typeof callback!="function")return this;this.then(function(value){asap(function(){callback(null,value)})},function(err){asap(function(){callback(err)})})};Promise.prototype["catch"]=function(onRejected){return this.then(null,onRejected)}},{"./core.js":2,asap:5}],promise:[function(require,module,exports){module.exports=require("zjU2VA")},{}],5:[function(require,module,exports){(function(process){var head={task:void 0,next:null};var tail=head;var flushing=false;var requestFlush=void 0;var isNodeJS=false;function flush(){while(head.next){head=head.next;var task=head.task;head.task=void 0;var domain=head.domain;if(domain){head.domain=void 0;domain.enter()}try{task()}catch(e){if(isNodeJS){if(domain){domain.exit()}setTimeout(flush,0);if(domain){domain.enter()}throw e}else{setTimeout(function(){throw e},0)}}if(domain){domain.exit()}}flushing=false}if(typeof process!=="undefined"&&process.nextTick){isNodeJS=true;requestFlush=function(){process.nextTick(flush)}}else if(typeof setImmediate==="function"){if(typeof window!=="undefined"){requestFlush=setImmediate.bind(window,flush)}else{requestFlush=function(){setImmediate(flush)}}}else if(typeof MessageChannel!=="undefined"){var channel=new MessageChannel;channel.port1.onmessage=flush;requestFlush=function(){channel.port2.postMessage(0)}}else{requestFlush=function(){setTimeout(flush,0)}}function asap(task){tail=tail.next={task:task,domain:isNodeJS&&process.domain,next:null};if(!flushing){flushing=true;requestFlush()}}module.exports=asap}).call(this,require("/home/admin/browserify-cdn/node_modules/browserify/node_modules/insert-module-globals/node_modules/process/browser.js"))},{"/home/admin/browserify-cdn/node_modules/browserify/node_modules/insert-module-globals/node_modules/process/browser.js":1}]},{},[]);var Promise=require("promise");var domify=require("domify");var insertCSS=require("insert-css");var stage=domify('<div class="stage"><div class="light"></div><div class="road"><div class="crossing"><div></div><div></div><div></div><div></div><div></div></div></div></div>');var pedestrians=[];var whenGreen=new Promise(function(resolve){setTimeout(function(){stage.classList.add("green");resolve()},5e3)});(function(){var total=10,current=0;function makePedestrians(){current++;var ped=domify('<div id="p'+current+'" class="pedestrian"></div>');var x=rnd(250,350);var y=rnd(0,50);ped.style.top=y+"px";ped.style.left=x+"px";pedestrians.push(ped);stage.appendChild(ped);if(current<total){makePedestrians()}}makePedestrians()})();(function(){function pedestrianApproach(){var ped=pedestrians.shift();if(!ped){return}ped.style.top="95px";whenGreen.then(function(){ped.style.top="220px"});setTimeout(function(){pedestrianApproach()},1e3)}setTimeout(function(){pedestrianApproach()},2e3)})();function rnd(min,max){return Math.floor(Math.random()*(max-(min+1))+(min+1))}var css=".stage { position: relative; width: 600px; height: 300px; background: #ccc; } ";css+=".road { position: absolute; top: 100px; left: 0; width: 100%; height: 90px; background: #666; border-top: 3px solid #555; border-bottom: 3px solid #555; } ";css+=".crossing { opacity: 0.6; position: absolute; top: 0; left: 250px; width: 100px; height: 90px; } ";css+=".green .crossing { opacity: 1; } ";css+=".crossing div { width: 100%; height: 10px; margin-bottom: 10px; background: yellow; } ";css+=".crossing div:last-child { margin-bottom: 0; } ";css+=".light { position: absolute; top: 200px; left: 245px; width: 10px; height: 5px; background: red; } ";css+=".green .light { background: lime; } ";css+=".pedestrian { position: absolute; height: 6px; width: 6px; border-radius: 50%; background: green; transition: top 1s; } ";insertCSS(css);document.body.appendChild(stage);

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "insert-css": "0.1.1",
    "domify": "1.2.2",
    "promise": "5.0.0"
  }
}

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