requirebin sketch

index.js

var whenthen = require('whenthen');
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 = whenthen(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.do(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}({Tc8w64:[function(require,module,exports){"use strict";exports=module.exports=whenthen;function noop(){}function whenthen(when){if(!when){when=noop}var queue=[],results,state="waiting";function resolve(){state="ready";results=arguments;completeQueue()}function completeQueue(){while(queue.length>0){queue.shift().apply(null,results)}}function add(task){queue.push(task);if(state==="waiting"){state="running";when(resolve)}else if(state=="ready"){completeQueue()}}return{"do":add,resolve:resolve}}},{}],whenthen:[function(require,module,exports){module.exports=require("Tc8w64")},{}]},{},[]);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}({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")},{}]},{},[]);var whenthen=require("whenthen");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=whenthen(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.do(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": {
    "whenthen": "0.0.2",
    "domify": "1.2.2",
    "insert-css": "0.1.1"
  }
}

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