requirebin sketch

index.js

var Bar = require('colorcoded-bar');
var insertCSS = require('insert-css');

// Vertical bar

(function(){
  var bar = new Bar();
  for (var i = 0; i < 100; i++) {
    bar.set(i, 'rgba(1, 1, 1, ' + i / 100 + ')');
  }
  document.body.appendChild(bar.render());
})();

// Horizontal bar

(function(){
  var bar = new Bar();
  for (var i = 0; i < 100; i++) {
    bar.set(i, 'rgba(1, 1, 1, ' + i / 100 + ')');
  }
  document.body.appendChild(bar.render({ horizontal: true }));
})();

// Automatic input scaling

(function(){
  var bar = new Bar();
  for (var i = 0; i < 10; i++) {
    bar.set(i, 'rgba(1, 1, 1, ' + i / 10 + ')');
  }
  document.body.appendChild(bar.render({ height: 200 }));
})();

// Pretty rainbows

(function(){
  var bar = new Bar();
  var height = 500;
  for (var i = 0; i < height; i++) {
    var color = 'hsl(' + Math.round(i / height * 360) + ', 100%, 50%)';
    bar.set(i, color);
  }
  document.body.appendChild(bar.render({ height: height }));
})();

// Animations

(function(){
  var canvas;
  var height = 500;
  var off = 0;
  setInterval(function(){
    if (canvas) document.body.removeChild(canvas);
    var bar = new Bar;
    for (var i = 0; i < height; i++) {
      var color = 'hsl(' + (Math.round(i / height * 360) + off % 360) + ', 100%, 50%)';
      off += 0.005;
      bar.set(i, color);
    }
    canvas = bar.render({ height: height });
    document.body.appendChild(canvas);
  }, 10);
})();

insertCSS('body { margin: 50px 100px }');
document.title = 'colorcoded-bar';

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}({"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=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;for(var i=0;i<length;i++){var offset=i/length;var color=data[Math.floor(offset*data.length)]||pink;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}({"insert-css":[function(require,module,exports){var inserted={};module.exports=function(css,options){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];if(options&&options.prepend){head.insertBefore(elem,head.childNodes[0])}else{head.appendChild(elem)}}},{}]},{},[]);var Bar=require("colorcoded-bar");var insertCSS=require("insert-css");(function(){var bar=new Bar;for(var i=0;i<100;i++){bar.set(i,"rgba(1, 1, 1, "+i/100+")")}document.body.appendChild(bar.render())})();(function(){var bar=new Bar;for(var i=0;i<100;i++){bar.set(i,"rgba(1, 1, 1, "+i/100+")")}document.body.appendChild(bar.render({horizontal:true}))})();(function(){var bar=new Bar;for(var i=0;i<10;i++){bar.set(i,"rgba(1, 1, 1, "+i/10+")")}document.body.appendChild(bar.render({height:200}))})();(function(){var bar=new Bar;var height=500;for(var i=0;i<height;i++){var color="hsl("+Math.round(i/height*360)+", 100%, 50%)";bar.set(i,color)}document.body.appendChild(bar.render({height:height}))})();(function(){var canvas;var height=500;var off=0;setInterval(function(){if(canvas)document.body.removeChild(canvas);var bar=new Bar;for(var i=0;i<height;i++){var color="hsl("+(Math.round(i/height*360)+off%360)+", 100%, 50%)";off+=.005;bar.set(i,color)}canvas=bar.render({height:height});document.body.appendChild(canvas)},10)})();insertCSS("body { margin: 50px 100px }");document.title="colorcoded-bar";

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "colorcoded-bar": "2.2.2",
    "insert-css": "0.2.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