requirebin sketch

index.js

var raf = require('raf') // requestAnimationFrame polyfill
var Isomer = require('isomer') // 3ds
var ease = require('ease-component') // easing
var Color = require('color')


// duration of loop / speed of animation
var duration = 5000

// create a canvas element and add it to the page
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
document.body.appendChild(canvas)

// set canvas width + height to size of window
var width = canvas.width = window.innerWidth
var height = canvas.height = window.innerHeight

// set up isomer
var iso = new Isomer(canvas)
var Point = Isomer.Point
var Shape = Isomer.Shape

var n_rows = 10
var n_cols = n_rows

// This will be called continuously with a p value (between 0 and 1) representing progress through our animation
// e.g. when p == 0.5 we are 50% of the way through
function render (p) {
  ctx.clearRect(0, 0, width, height)
  for (var row = n_rows; row >= 1; row--) {
    for(var col = 1; col <= n_cols; col++) {
      var w = 1
      var l = 1
      var h = 0.2

      var x = (row - n_rows / 2) * w
      var z = (col - n_rows / 2 ) * l
      var y = 1

      var pos = Isomer.Point(x, y, z)

      var rx = x + w/2
      var ry = y + l/2
      var rz = z + h/2

      var cube = Isomer.Shape.Prism(pos, w, l, h).rotateX(Point(rx, ry, rz), Math.PI * p).rotateZ(Point(rx, rz, ry), 2 * Math.PI * p)

      var sat = (p * 0.5 * row * col * 100) % 100
      var color = Color().hsl(20 + col * 3, sat, 40)
      var isomercolor = new Isomer.Color(color.red(), color.green(), color.blue())
      iso.add(cube, isomercolor)
    }
  }
}

// set up our infinite animation loop + call render with progress each frame
var timeStart = Date.now()
function tick () {
  var elapsed = Date.now() - timeStart
  var p = (elapsed % duration) / duration
  render(p)
  raf(tick)
}

tick()

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){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.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],isNative=true;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){isNative=false;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){if(!isNative){return raf.call(global,fn)}return raf.call(global,function(){try{fn.apply(this,arguments)}catch(e){setTimeout(function(){throw e},0)}})};module.exports.cancel=function(){caf.apply(global,arguments)}},{"performance-now":2}]},{},[]);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){module.exports={rgb2hsl:rgb2hsl,rgb2hsv:rgb2hsv,rgb2hwb:rgb2hwb,rgb2cmyk:rgb2cmyk,rgb2keyword:rgb2keyword,rgb2xyz:rgb2xyz,rgb2lab:rgb2lab,rgb2lch:rgb2lch,hsl2rgb:hsl2rgb,hsl2hsv:hsl2hsv,hsl2hwb:hsl2hwb,hsl2cmyk:hsl2cmyk,hsl2keyword:hsl2keyword,hsv2rgb:hsv2rgb,hsv2hsl:hsv2hsl,hsv2hwb:hsv2hwb,hsv2cmyk:hsv2cmyk,hsv2keyword:hsv2keyword,hwb2rgb:hwb2rgb,hwb2hsl:hwb2hsl,hwb2hsv:hwb2hsv,hwb2cmyk:hwb2cmyk,hwb2keyword:hwb2keyword,cmyk2rgb:cmyk2rgb,cmyk2hsl:cmyk2hsl,cmyk2hsv:cmyk2hsv,cmyk2hwb:cmyk2hwb,cmyk2keyword:cmyk2keyword,keyword2rgb:keyword2rgb,keyword2hsl:keyword2hsl,keyword2hsv:keyword2hsv,keyword2hwb:keyword2hwb,keyword2cmyk:keyword2cmyk,keyword2lab:keyword2lab,keyword2xyz:keyword2xyz,xyz2rgb:xyz2rgb,xyz2lab:xyz2lab,xyz2lch:xyz2lch,lab2xyz:lab2xyz,lab2rgb:lab2rgb,lab2lch:lab2lch,lch2lab:lch2lab,lch2xyz:lch2xyz,lch2rgb:lch2rgb};function rgb2hsl(rgb){var r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,min=Math.min(r,g,b),max=Math.max(r,g,b),delta=max-min,h,s,l;if(max==min)h=0;else if(r==max)h=(g-b)/delta;else if(g==max)h=2+(b-r)/delta;else if(b==max)h=4+(r-g)/delta;h=Math.min(h*60,360);if(h<0)h+=360;l=(min+max)/2;if(max==min)s=0;else if(l<=.5)s=delta/(max+min);else s=delta/(2-max-min);return[h,s*100,l*100]}function rgb2hsv(rgb){var r=rgb[0],g=rgb[1],b=rgb[2],min=Math.min(r,g,b),max=Math.max(r,g,b),delta=max-min,h,s,v;if(max==0)s=0;else s=delta/max*1e3/10;if(max==min)h=0;else if(r==max)h=(g-b)/delta;else if(g==max)h=2+(b-r)/delta;else if(b==max)h=4+(r-g)/delta;h=Math.min(h*60,360);if(h<0)h+=360;v=max/255*1e3/10;return[h,s,v]}function rgb2hwb(rgb){var r=rgb[0],g=rgb[1],b=rgb[2],h=rgb2hsl(rgb)[0],w=1/255*Math.min(r,Math.min(g,b)),b=1-1/255*Math.max(r,Math.max(g,b));return[h,w*100,b*100]}function rgb2cmyk(rgb){var r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,c,m,y,k;k=Math.min(1-r,1-g,1-b);c=(1-r-k)/(1-k)||0;m=(1-g-k)/(1-k)||0;y=(1-b-k)/(1-k)||0;return[c*100,m*100,y*100,k*100]}function rgb2keyword(rgb){return reverseKeywords[JSON.stringify(rgb)]}function rgb2xyz(rgb){var r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255;r=r>.04045?Math.pow((r+.055)/1.055,2.4):r/12.92;g=g>.04045?Math.pow((g+.055)/1.055,2.4):g/12.92;b=b>.04045?Math.pow((b+.055)/1.055,2.4):b/12.92;var x=r*.4124+g*.3576+b*.1805;var y=r*.2126+g*.7152+b*.0722;var z=r*.0193+g*.1192+b*.9505;return[x*100,y*100,z*100]}function rgb2lab(rgb){var xyz=rgb2xyz(rgb),x=xyz[0],y=xyz[1],z=xyz[2],l,a,b;x/=95.047;y/=100;z/=108.883;x=x>.008856?Math.pow(x,1/3):7.787*x+16/116;y=y>.008856?Math.pow(y,1/3):7.787*y+16/116;z=z>.008856?Math.pow(z,1/3):7.787*z+16/116;l=116*y-16;a=500*(x-y);b=200*(y-z);return[l,a,b]}function rgb2lch(args){return lab2lch(rgb2lab(args))}function hsl2rgb(hsl){var h=hsl[0]/360,s=hsl[1]/100,l=hsl[2]/100,t1,t2,t3,rgb,val;if(s==0){val=l*255;return[val,val,val]}if(l<.5)t2=l*(1+s);else t2=l+s-l*s;t1=2*l-t2;rgb=[0,0,0];for(var i=0;i<3;i++){t3=h+1/3*-(i-1);t3<0&&t3++;t3>1&&t3--;if(6*t3<1)val=t1+(t2-t1)*6*t3;else if(2*t3<1)val=t2;else if(3*t3<2)val=t1+(t2-t1)*(2/3-t3)*6;else val=t1;rgb[i]=val*255}return rgb}function hsl2hsv(hsl){var h=hsl[0],s=hsl[1]/100,l=hsl[2]/100,sv,v;l*=2;s*=l<=1?l:2-l;v=(l+s)/2;sv=2*s/(l+s);return[h,sv*100,v*100]}function hsl2hwb(args){return rgb2hwb(hsl2rgb(args))}function hsl2cmyk(args){return rgb2cmyk(hsl2rgb(args))}function hsl2keyword(args){return rgb2keyword(hsl2rgb(args))}function hsv2rgb(hsv){var h=hsv[0]/60,s=hsv[1]/100,v=hsv[2]/100,hi=Math.floor(h)%6;var f=h-Math.floor(h),p=255*v*(1-s),q=255*v*(1-s*f),t=255*v*(1-s*(1-f)),v=255*v;switch(hi){case 0:return[v,t,p];case 1:return[q,v,p];case 2:return[p,v,t];case 3:return[p,q,v];case 4:return[t,p,v];case 5:return[v,p,q]}}function hsv2hsl(hsv){var h=hsv[0],s=hsv[1]/100,v=hsv[2]/100,sl,l;l=(2-s)*v;sl=s*v;sl/=l<=1?l:2-l;sl=sl||0;l/=2;return[h,sl*100,l*100]}function hsv2hwb(args){return rgb2hwb(hsv2rgb(args))}function hsv2cmyk(args){return rgb2cmyk(hsv2rgb(args))}function hsv2keyword(args){return rgb2keyword(hsv2rgb(args))}function hwb2rgb(hwb){var h=hwb[0]/360,wh=hwb[1]/100,bl=hwb[2]/100,ratio=wh+bl,i,v,f,n;if(ratio>1){wh/=ratio;bl/=ratio}i=Math.floor(6*h);v=1-bl;f=6*h-i;if((i&1)!=0){f=1-f}n=wh+f*(v-wh);switch(i){default:case 6:case 0:r=v;g=n;b=wh;break;case 1:r=n;g=v;b=wh;break;case 2:r=wh;g=v;b=n;break;case 3:r=wh;g=n;b=v;break;case 4:r=n;g=wh;b=v;break;case 5:r=v;g=wh;b=n;break}return[r*255,g*255,b*255]}function hwb2hsl(args){return rgb2hsl(hwb2rgb(args))}function hwb2hsv(args){return rgb2hsv(hwb2rgb(args))}function hwb2cmyk(args){return rgb2cmyk(hwb2rgb(args))}function hwb2keyword(args){return rgb2keyword(hwb2rgb(args))}function cmyk2rgb(cmyk){var c=cmyk[0]/100,m=cmyk[1]/100,y=cmyk[2]/100,k=cmyk[3]/100,r,g,b;r=1-Math.min(1,c*(1-k)+k);g=1-Math.min(1,m*(1-k)+k);b=1-Math.min(1,y*(1-k)+k);return[r*255,g*255,b*255]}function cmyk2hsl(args){return rgb2hsl(cmyk2rgb(args))}function cmyk2hsv(args){return rgb2hsv(cmyk2rgb(args))}function cmyk2hwb(args){return rgb2hwb(cmyk2rgb(args))}function cmyk2keyword(args){return rgb2keyword(cmyk2rgb(args))}function xyz2rgb(xyz){var x=xyz[0]/100,y=xyz[1]/100,z=xyz[2]/100,r,g,b;r=x*3.2406+y*-1.5372+z*-.4986;g=x*-.9689+y*1.8758+z*.0415;b=x*.0557+y*-.204+z*1.057;r=r>.0031308?1.055*Math.pow(r,1/2.4)-.055:r=r*12.92;g=g>.0031308?1.055*Math.pow(g,1/2.4)-.055:g=g*12.92;b=b>.0031308?1.055*Math.pow(b,1/2.4)-.055:b=b*12.92;r=Math.min(Math.max(0,r),1);g=Math.min(Math.max(0,g),1);b=Math.min(Math.max(0,b),1);return[r*255,g*255,b*255]}function xyz2lab(xyz){var x=xyz[0],y=xyz[1],z=xyz[2],l,a,b;x/=95.047;y/=100;z/=108.883;x=x>.008856?Math.pow(x,1/3):7.787*x+16/116;y=y>.008856?Math.pow(y,1/3):7.787*y+16/116;z=z>.008856?Math.pow(z,1/3):7.787*z+16/116;l=116*y-16;a=500*(x-y);b=200*(y-z);return[l,a,b]}function xyz2lch(args){return lab2lch(xyz2lab(args))}function lab2xyz(lab){var l=lab[0],a=lab[1],b=lab[2],x,y,z,y2;if(l<=8){y=l*100/903.3;y2=7.787*(y/100)+16/116}else{y=100*Math.pow((l+16)/116,3);y2=Math.pow(y/100,1/3)}x=x/95.047<=.008856?x=95.047*(a/500+y2-16/116)/7.787:95.047*Math.pow(a/500+y2,3);z=z/108.883<=.008859?z=108.883*(y2-b/200-16/116)/7.787:108.883*Math.pow(y2-b/200,3);return[x,y,z]}function lab2lch(lab){var l=lab[0],a=lab[1],b=lab[2],hr,h,c;hr=Math.atan2(b,a);h=hr*360/2/Math.PI;if(h<0){h+=360}c=Math.sqrt(a*a+b*b);return[l,c,h]}function lab2rgb(args){return xyz2rgb(lab2xyz(args))}function lch2lab(lch){var l=lch[0],c=lch[1],h=lch[2],a,b,hr;hr=h/360*2*Math.PI;a=c*Math.cos(hr);b=c*Math.sin(hr);return[l,a,b]}function lch2xyz(args){return lab2xyz(lch2lab(args))}function lch2rgb(args){return lab2rgb(lch2lab(args))}function keyword2rgb(keyword){return cssKeywords[keyword]}function keyword2hsl(args){return rgb2hsl(keyword2rgb(args))}function keyword2hsv(args){return rgb2hsv(keyword2rgb(args))}function keyword2hwb(args){return rgb2hwb(keyword2rgb(args))}function keyword2cmyk(args){return rgb2cmyk(keyword2rgb(args))}function keyword2lab(args){return rgb2lab(keyword2rgb(args))}function keyword2xyz(args){return rgb2xyz(keyword2rgb(args))}var cssKeywords={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]};var reverseKeywords={};for(var key in cssKeywords){reverseKeywords[JSON.stringify(cssKeywords[key])]=key}},{}],2:[function(require,module,exports){var conversions=require("./conversions");var convert=function(){return new Converter};for(var func in conversions){convert[func+"Raw"]=function(func){return function(arg){if(typeof arg=="number")arg=Array.prototype.slice.call(arguments);return conversions[func](arg)}}(func);var pair=/(\w+)2(\w+)/.exec(func),from=pair[1],to=pair[2];convert[from]=convert[from]||{};convert[from][to]=convert[func]=function(func){return function(arg){if(typeof arg=="number")arg=Array.prototype.slice.call(arguments);var val=conversions[func](arg);if(typeof val=="string"||val===undefined)return val;for(var i=0;i<val.length;i++)val[i]=Math.round(val[i]);return val}}(func)}var Converter=function(){this.convs={}};Converter.prototype.routeSpace=function(space,args){var values=args[0];if(values===undefined){return this.getValues(space)}if(typeof values=="number"){values=Array.prototype.slice.call(args)}return this.setValues(space,values)};Converter.prototype.setValues=function(space,values){this.space=space;this.convs={};this.convs[space]=values;return this};Converter.prototype.getValues=function(space){var vals=this.convs[space];if(!vals){var fspace=this.space,from=this.convs[fspace];vals=convert[fspace][space](from);this.convs[space]=vals}return vals};["rgb","hsl","hsv","cmyk","keyword"].forEach(function(space){Converter.prototype[space]=function(vals){return this.routeSpace(space,arguments)}});module.exports=convert},{"./conversions":1}],3:[function(require,module,exports){var convert=require("color-convert");module.exports={getRgba:getRgba,getHsla:getHsla,getRgb:getRgb,getHsl:getHsl,getHwb:getHwb,getAlpha:getAlpha,hexString:hexString,rgbString:rgbString,rgbaString:rgbaString,percentString:percentString,percentaString:percentaString,hslString:hslString,hslaString:hslaString,hwbString:hwbString,keyword:keyword};function getRgba(string){if(!string){return}var abbr=/^#([a-fA-F0-9]{3})$/,hex=/^#([a-fA-F0-9]{6})$/,rgba=/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d\.]+)\s*)?\)$/,per=/^rgba?\(\s*([\d\.]+)\%\s*,\s*([\d\.]+)\%\s*,\s*([\d\.]+)\%\s*(?:,\s*([\d\.]+)\s*)?\)$/,keyword=/(\D+)/;var rgb=[0,0,0],a=1,match=string.match(abbr);if(match){match=match[1];for(var i=0;i<rgb.length;i++){rgb[i]=parseInt(match[i]+match[i],16)}}else if(match=string.match(hex)){match=match[1];for(var i=0;i<rgb.length;i++){rgb[i]=parseInt(match.slice(i*2,i*2+2),16)}}else if(match=string.match(rgba)){for(var i=0;i<rgb.length;i++){rgb[i]=parseInt(match[i+1])}a=parseFloat(match[4])}else if(match=string.match(per)){for(var i=0;i<rgb.length;i++){rgb[i]=Math.round(parseFloat(match[i+1])*2.55)}a=parseFloat(match[4])}else if(match=string.match(keyword)){if(match[1]=="transparent"){return[0,0,0,0]}rgb=convert.keyword2rgb(match[1]);if(!rgb){return}}for(var i=0;i<rgb.length;i++){rgb[i]=scale(rgb[i],0,255)}if(!a&&a!=0){a=1}else{a=scale(a,0,1)}rgb.push(a);return rgb}function getHsla(string){if(!string){return}var hsl=/^hsla?\(\s*(\d+)\s*,\s*([\d\.]+)%\s*,\s*([\d\.]+)%\s*(?:,\s*([\d\.]+)\s*)?\)/;var match=string.match(hsl);if(match){var h=scale(parseInt(match[1]),0,360),s=scale(parseFloat(match[2]),0,100),l=scale(parseFloat(match[3]),0,100),a=scale(parseFloat(match[4])||1,0,1);return[h,s,l,a]}}function getHwb(string){if(!string){return}var hwb=/^hwb\(\s*(\d+)\s*,\s*([\d\.]+)%\s*,\s*([\d\.]+)%\s*(?:,\s*([\d\.]+)\s*)?\)/;var match=string.match(hwb);if(match){var h=scale(parseInt(match[1]),0,360),w=scale(parseFloat(match[2]),0,100),b=scale(parseFloat(match[3]),0,100),a=scale(parseFloat(match[4])||1,0,1);return[h,w,b,a]}}function getRgb(string){var rgba=getRgba(string);return rgba&&rgba.slice(0,3)}function getHsl(string){var hsla=getHsla(string);return hsla&&hsla.slice(0,3)}function getAlpha(string){var vals=getRgba(string);if(vals){return vals[3]}else if(vals=getHsla(string)){return vals[3]}else if(vals=getHwb(string)){return vals[3]}}function hexString(rgb){return"#"+hexDouble(rgb[0])+hexDouble(rgb[1])+hexDouble(rgb[2])}function rgbString(rgba,alpha){if(alpha<1||rgba[3]&&rgba[3]<1){return rgbaString(rgba,alpha)}return"rgb("+rgba[0]+", "+rgba[1]+", "+rgba[2]+")"}function rgbaString(rgba,alpha){if(alpha===undefined){alpha=rgba[3]!==undefined?rgba[3]:1}return"rgba("+rgba[0]+", "+rgba[1]+", "+rgba[2]+", "+alpha+")"}function percentString(rgba,alpha){if(alpha<1||rgba[3]&&rgba[3]<1){return percentaString(rgba,alpha)}var r=Math.round(rgba[0]/255*100),g=Math.round(rgba[1]/255*100),b=Math.round(rgba[2]/255*100);return"rgb("+r+"%, "+g+"%, "+b+"%)"}function percentaString(rgba,alpha){var r=Math.round(rgba[0]/255*100),g=Math.round(rgba[1]/255*100),b=Math.round(rgba[2]/255*100);return"rgba("+r+"%, "+g+"%, "+b+"%, "+(alpha||rgba[3]||1)+")"}function hslString(hsla,alpha){if(alpha<1||hsla[3]&&hsla[3]<1){return hslaString(hsla,alpha)}return"hsl("+hsla[0]+", "+hsla[1]+"%, "+hsla[2]+"%)"}function hslaString(hsla,alpha){if(alpha===undefined){alpha=hsla[3]!==undefined?hsla[3]:1}return"hsla("+hsla[0]+", "+hsla[1]+"%, "+hsla[2]+"%, "+alpha+")"}function hwbString(hwb,alpha){if(alpha===undefined){alpha=hwb[3]!==undefined?hwb[3]:1}return"hwb("+hwb[0]+", "+hwb[1]+"%, "+hwb[2]+"%"+(alpha!==undefined&&alpha!==1?", "+alpha:"")+")"}function keyword(rgb){return convert.rgb2keyword(rgb.slice(0,3))}function scale(num,min,max){return Math.min(Math.max(min,num),max)}function hexDouble(num){var str=num.toString(16).toUpperCase();return str.length<2?"0"+str:str}},{"color-convert":2}],color:[function(require,module,exports){var convert=require("color-convert"),string=require("color-string");var Color=function(cssString){if(cssString instanceof Color)return cssString;if(!(this instanceof Color))return new Color(cssString);this.values={rgb:[0,0,0],hsl:[0,0,0],hsv:[0,0,0],hwb:[0,0,0],cmyk:[0,0,0,0],alpha:1};if(typeof cssString=="string"){var vals=string.getRgba(cssString);if(vals){this.setValues("rgb",vals)}else if(vals=string.getHsla(cssString)){this.setValues("hsl",vals)}else if(vals=string.getHwb(cssString)){this.setValues("hwb",vals)}else{throw new Error('Unable to parse color from string "'+cssString+'"')}}else if(typeof cssString=="object"){var vals=cssString;if(vals["r"]!==undefined||vals["red"]!==undefined){this.setValues("rgb",vals)}else if(vals["l"]!==undefined||vals["lightness"]!==undefined){this.setValues("hsl",vals)}else if(vals["v"]!==undefined||vals["value"]!==undefined){this.setValues("hsv",vals)}else if(vals["w"]!==undefined||vals["whiteness"]!==undefined){this.setValues("hwb",vals)}else if(vals["c"]!==undefined||vals["cyan"]!==undefined){this.setValues("cmyk",vals)}else{throw new Error("Unable to parse color from object "+JSON.stringify(cssString))}}};Color.prototype={rgb:function(vals){return this.setSpace("rgb",arguments)},hsl:function(vals){return this.setSpace("hsl",arguments)},hsv:function(vals){return this.setSpace("hsv",arguments)},hwb:function(vals){return this.setSpace("hwb",arguments)},cmyk:function(vals){return this.setSpace("cmyk",arguments)},rgbArray:function(){return this.values.rgb},hslArray:function(){return this.values.hsl},hsvArray:function(){return this.values.hsv},hwbArray:function(){if(this.values.alpha!==1){return this.values.hwb.concat([this.values.alpha])}return this.values.hwb},cmykArray:function(){return this.values.cmyk},rgbaArray:function(){var rgb=this.values.rgb;return rgb.concat([this.values.alpha])},hslaArray:function(){var hsl=this.values.hsl;return hsl.concat([this.values.alpha])},alpha:function(val){if(val===undefined){return this.values.alpha}this.setValues("alpha",val);return this},red:function(val){return this.setChannel("rgb",0,val)},green:function(val){return this.setChannel("rgb",1,val)},blue:function(val){return this.setChannel("rgb",2,val)},hue:function(val){return this.setChannel("hsl",0,val)},saturation:function(val){return this.setChannel("hsl",1,val)},lightness:function(val){return this.setChannel("hsl",2,val)},saturationv:function(val){return this.setChannel("hsv",1,val)},whiteness:function(val){return this.setChannel("hwb",1,val)},blackness:function(val){return this.setChannel("hwb",2,val)},value:function(val){return this.setChannel("hsv",2,val)},cyan:function(val){return this.setChannel("cmyk",0,val)},magenta:function(val){return this.setChannel("cmyk",1,val)},yellow:function(val){return this.setChannel("cmyk",2,val)},black:function(val){return this.setChannel("cmyk",3,val)},hexString:function(){return string.hexString(this.values.rgb)},rgbString:function(){return string.rgbString(this.values.rgb,this.values.alpha)},rgbaString:function(){return string.rgbaString(this.values.rgb,this.values.alpha)},percentString:function(){return string.percentString(this.values.rgb,this.values.alpha)},hslString:function(){return string.hslString(this.values.hsl,this.values.alpha)},hslaString:function(){return string.hslaString(this.values.hsl,this.values.alpha)},hwbString:function(){return string.hwbString(this.values.hwb,this.values.alpha)},keyword:function(){return string.keyword(this.values.rgb,this.values.alpha)},rgbNumber:function(){return this.values.rgb[0]<<16|this.values.rgb[1]<<8|this.values.rgb[2]},luminosity:function(){var rgb=this.values.rgb;var lum=[];for(var i=0;i<rgb.length;i++){var chan=rgb[i]/255;lum[i]=chan<=.03928?chan/12.92:Math.pow((chan+.055)/1.055,2.4)}return.2126*lum[0]+.7152*lum[1]+.0722*lum[2]},contrast:function(color2){var lum1=this.luminosity();var lum2=color2.luminosity();if(lum1>lum2){return(lum1+.05)/(lum2+.05)}return(lum2+.05)/(lum1+.05)},level:function(color2){var contrastRatio=this.contrast(color2);return contrastRatio>=7.1?"AAA":contrastRatio>=4.5?"AA":""},dark:function(){var rgb=this.values.rgb,yiq=(rgb[0]*299+rgb[1]*587+rgb[2]*114)/1e3;return yiq<128},light:function(){return!this.dark()},negate:function(){var rgb=[];for(var i=0;i<3;i++){rgb[i]=255-this.values.rgb[i]}this.setValues("rgb",rgb);return this},lighten:function(ratio){this.values.hsl[2]+=this.values.hsl[2]*ratio;this.setValues("hsl",this.values.hsl);return this},darken:function(ratio){this.values.hsl[2]-=this.values.hsl[2]*ratio;this.setValues("hsl",this.values.hsl);return this},saturate:function(ratio){this.values.hsl[1]+=this.values.hsl[1]*ratio;this.setValues("hsl",this.values.hsl);return this},desaturate:function(ratio){this.values.hsl[1]-=this.values.hsl[1]*ratio;this.setValues("hsl",this.values.hsl);return this},whiten:function(ratio){this.values.hwb[1]+=this.values.hwb[1]*ratio;this.setValues("hwb",this.values.hwb);return this},blacken:function(ratio){this.values.hwb[2]+=this.values.hwb[2]*ratio;this.setValues("hwb",this.values.hwb);return this},greyscale:function(){var rgb=this.values.rgb;var val=rgb[0]*.3+rgb[1]*.59+rgb[2]*.11;this.setValues("rgb",[val,val,val]);return this},clearer:function(ratio){this.setValues("alpha",this.values.alpha-this.values.alpha*ratio);return this},opaquer:function(ratio){this.setValues("alpha",this.values.alpha+this.values.alpha*ratio);return this},rotate:function(degrees){var hue=this.values.hsl[0];hue=(hue+degrees)%360;hue=hue<0?360+hue:hue;this.values.hsl[0]=hue;this.setValues("hsl",this.values.hsl);return this},mix:function(color2,weight){weight=1-(weight==null?.5:weight);var t1=weight*2-1,d=this.alpha()-color2.alpha();var weight1=((t1*d==-1?t1:(t1+d)/(1+t1*d))+1)/2;var weight2=1-weight1;var rgb=this.rgbArray();var rgb2=color2.rgbArray();for(var i=0;i<rgb.length;i++){rgb[i]=rgb[i]*weight1+rgb2[i]*weight2}this.setValues("rgb",rgb);var alpha=this.alpha()*weight+color2.alpha()*(1-weight);this.setValues("alpha",alpha);return this},toJSON:function(){return this.rgb()},clone:function(){return new Color(this.rgb())}};Color.prototype.getValues=function(space){var vals={};for(var i=0;i<space.length;i++){vals[space[i]]=this.values[space][i]}if(this.values.alpha!=1){vals["a"]=this.values.alpha}return vals};Color.prototype.setValues=function(space,vals){var spaces={rgb:["red","green","blue"],hsl:["hue","saturation","lightness"],hsv:["hue","saturation","value"],hwb:["hue","whiteness","blackness"],cmyk:["cyan","magenta","yellow","black"]};var maxes={rgb:[255,255,255],hsl:[360,100,100],hsv:[360,100,100],hwb:[360,100,100],cmyk:[100,100,100,100]};var alpha=1;if(space=="alpha"){alpha=vals}else if(vals.length){this.values[space]=vals.slice(0,space.length);alpha=vals[space.length]}else if(vals[space[0]]!==undefined){for(var i=0;i<space.length;i++){this.values[space][i]=vals[space[i]]}alpha=vals.a}else if(vals[spaces[space][0]]!==undefined){var chans=spaces[space];for(var i=0;i<space.length;i++){this.values[space][i]=vals[chans[i]]}alpha=vals.alpha}this.values.alpha=Math.max(0,Math.min(1,alpha!==undefined?alpha:this.values.alpha));if(space=="alpha"){return}for(var i=0;i<space.length;i++){var capped=Math.max(0,Math.min(maxes[space][i],this.values[space][i]));this.values[space][i]=Math.round(capped)}for(var sname in spaces){if(sname!=space){this.values[sname]=convert[space][sname](this.values[space])}for(var i=0;i<sname.length;i++){var capped=Math.max(0,Math.min(maxes[sname][i],this.values[sname][i]));this.values[sname][i]=Math.round(capped)}}return true};Color.prototype.setSpace=function(space,args){var vals=args[0];if(vals===undefined){return this.getValues(space)}if(typeof vals=="number"){vals=Array.prototype.slice.call(args)}this.setValues(space,vals);return this};Color.prototype.setChannel=function(space,index,val){if(val===undefined){return this.values[space][index]}this.values[space][index]=val;this.setValues(space,this.values[space]);return this};module.exports=Color},{"color-convert":2,"color-string":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}({"ease-component":[function(require,module,exports){exports.linear=function(n){return n};exports.inQuad=function(n){return n*n};exports.outQuad=function(n){return n*(2-n)};exports.inOutQuad=function(n){n*=2;if(n<1)return.5*n*n;return-.5*(--n*(n-2)-1)};exports.inCube=function(n){return n*n*n};exports.outCube=function(n){return--n*n*n+1};exports.inOutCube=function(n){n*=2;if(n<1)return.5*n*n*n;return.5*((n-=2)*n*n+2)};exports.inQuart=function(n){return n*n*n*n};exports.outQuart=function(n){return 1- --n*n*n*n};exports.inOutQuart=function(n){n*=2;if(n<1)return.5*n*n*n*n;return-.5*((n-=2)*n*n*n-2)};exports.inQuint=function(n){return n*n*n*n*n};exports.outQuint=function(n){return--n*n*n*n*n+1};exports.inOutQuint=function(n){n*=2;if(n<1)return.5*n*n*n*n*n;return.5*((n-=2)*n*n*n*n+2)};exports.inSine=function(n){return 1-Math.cos(n*Math.PI/2)};exports.outSine=function(n){return Math.sin(n*Math.PI/2)};exports.inOutSine=function(n){return.5*(1-Math.cos(Math.PI*n))};exports.inExpo=function(n){return 0==n?0:Math.pow(1024,n-1)};exports.outExpo=function(n){return 1==n?n:1-Math.pow(2,-10*n)};exports.inOutExpo=function(n){if(0==n)return 0;if(1==n)return 1;if((n*=2)<1)return.5*Math.pow(1024,n-1);return.5*(-Math.pow(2,-10*(n-1))+2)};exports.inCirc=function(n){return 1-Math.sqrt(1-n*n)};exports.outCirc=function(n){return Math.sqrt(1- --n*n)};exports.inOutCirc=function(n){n*=2;if(n<1)return-.5*(Math.sqrt(1-n*n)-1);return.5*(Math.sqrt(1-(n-=2)*n)+1)};exports.inBack=function(n){var s=1.70158;return n*n*((s+1)*n-s)};exports.outBack=function(n){var s=1.70158;return--n*n*((s+1)*n+s)+1};exports.inOutBack=function(n){var s=1.70158*1.525;if((n*=2)<1)return.5*(n*n*((s+1)*n-s));return.5*((n-=2)*n*((s+1)*n+s)+2)};exports.inBounce=function(n){return 1-exports.outBounce(1-n)};exports.outBounce=function(n){if(n<1/2.75){return 7.5625*n*n}else if(n<2/2.75){return 7.5625*(n-=1.5/2.75)*n+.75}else if(n<2.5/2.75){return 7.5625*(n-=2.25/2.75)*n+.9375}else{return 7.5625*(n-=2.625/2.75)*n+.984375}};exports.inOutBounce=function(n){if(n<.5)return exports.inBounce(n*2)*.5;return exports.outBounce(n*2-1)*.5+.5};exports["in-quad"]=exports.inQuad;exports["out-quad"]=exports.outQuad;exports["in-out-quad"]=exports.inOutQuad;exports["in-cube"]=exports.inCube;exports["out-cube"]=exports.outCube;exports["in-out-cube"]=exports.inOutCube;exports["in-quart"]=exports.inQuart;exports["out-quart"]=exports.outQuart;exports["in-out-quart"]=exports.inOutQuart;exports["in-quint"]=exports.inQuint;exports["out-quint"]=exports.outQuint;exports["in-out-quint"]=exports.inOutQuint;exports["in-sine"]=exports.inSine;exports["out-sine"]=exports.outSine;exports["in-out-sine"]=exports.inOutSine;exports["in-expo"]=exports.inExpo;exports["out-expo"]=exports.outExpo;exports["in-out-expo"]=exports.inOutExpo;exports["in-circ"]=exports.inCirc;exports["out-circ"]=exports.outCirc;exports["in-out-circ"]=exports.inOutCirc;exports["in-back"]=exports.inBack;exports["out-back"]=exports.outBack;exports["in-out-back"]=exports.inOutBack;exports["in-bounce"]=exports.inBounce;exports["out-bounce"]=exports.outBounce;exports["in-out-bounce"]=exports.inOutBounce},{}]},{},[]);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 Canvas(elem){this.elem=elem;
this.ctx=this.elem.getContext("2d");this.width=elem.width;this.height=elem.height}Canvas.prototype.clear=function(){this.ctx.clearRect(0,0,this.width,this.height)};Canvas.prototype.path=function(points,color){this.ctx.beginPath();this.ctx.moveTo(points[0].x,points[0].y);for(var i=1;i<points.length;i++){this.ctx.lineTo(points[i].x,points[i].y)}this.ctx.closePath();this.ctx.save();this.ctx.globalAlpha=color.a;this.ctx.fillStyle=this.ctx.strokeStyle=color.toHex();this.ctx.stroke();this.ctx.fill();this.ctx.restore()};module.exports=Canvas},{}],2:[function(require,module,exports){function Color(r,g,b,a){this.r=parseInt(r||0);this.g=parseInt(g||0);this.b=parseInt(b||0);this.a=parseFloat(Math.round(a*100)/100||1);this.loadHSL()}Color.prototype.toHex=function(){var hex=(this.r*256*256+this.g*256+this.b).toString(16);if(hex.length<6){hex=new Array(6-hex.length+1).join("0")+hex}return"#"+hex};Color.prototype.lighten=function(percentage,lightColor){lightColor=lightColor||new Color(255,255,255);var newColor=new Color(lightColor.r/255*this.r,lightColor.g/255*this.g,lightColor.b/255*this.b,this.a);newColor.l=Math.min(newColor.l+percentage,1);newColor.loadRGB();return newColor};Color.prototype.loadHSL=function(){var r=this.r/255;var g=this.g/255;var b=this.b/255;var max=Math.max(r,g,b);var min=Math.min(r,g,b);var h,s,l=(max+min)/2;if(max===min){h=s=0}else{var d=max-min;s=l>.5?d/(2-max-min):d/(max+min);switch(max){case r:h=(g-b)/d+(g<b?6:0);break;case g:h=(b-r)/d+2;break;case b:h=(r-g)/d+4;break}h/=6}this.h=h;this.s=s;this.l=l};Color.prototype.loadRGB=function(){var r,g,b;var h=this.h;var s=this.s;var l=this.l;if(s===0){r=g=b=l}else{var q=l<.5?l*(1+s):l+s-l*s;var p=2*l-q;r=this._hue2rgb(p,q,h+1/3);g=this._hue2rgb(p,q,h);b=this._hue2rgb(p,q,h-1/3)}this.r=parseInt(r*255);this.g=parseInt(g*255);this.b=parseInt(b*255)};Color.prototype._hue2rgb=function(p,q,t){if(t<0)t+=1;if(t>1)t-=1;if(t<1/6)return p+(q-p)*6*t;if(t<1/2)return q;if(t<2/3)return p+(q-p)*(2/3-t)*6;return p};module.exports=Color},{}],3:[function(require,module,exports){var Canvas=require("./canvas");var Color=require("./color");var Path=require("./path");var Point=require("./point");var Shape=require("./shape");var Vector=require("./vector");function Isomer(canvasId,options){options=options||{};this.canvas=new Canvas(canvasId);this.angle=Math.PI/6;this.scale=options.scale||70;this._calculateTransformation();this.originX=options.originX||this.canvas.width/2;this.originY=options.originY||this.canvas.height*.9;this.lightPosition=options.lightPosition||new Vector(2,-1,3);this.lightAngle=this.lightPosition.normalize();this.colorDifference=.2;this.lightColor=options.lightColor||new Color(255,255,255)}Isomer.prototype.setLightPosition=function(x,y,z){this.lightPosition=new Vector(x,y,z);this.lightAngle=this.lightPosition.normalize()};Isomer.prototype._translatePoint=function(point){var xMap=new Point(point.x*this.transformation[0][0],point.x*this.transformation[0][1]);var yMap=new Point(point.y*this.transformation[1][0],point.y*this.transformation[1][1]);var x=this.originX+xMap.x+yMap.x;var y=this.originY-xMap.y-yMap.y-point.z*this.scale;return new Point(x,y)};Isomer.prototype.add=function(item,baseColor){if(Object.prototype.toString.call(item)=="[object Array]"){for(var i=0;i<item.length;i++){this.add(item[i],baseColor)}}else if(item instanceof Path){this._addPath(item,baseColor)}else if(item instanceof Shape){var paths=item.orderedPaths();for(var i in paths){this._addPath(paths[i],baseColor)}}};Isomer.prototype._addPath=function(path,baseColor){baseColor=baseColor||new Color(120,120,120);var v1=Vector.fromTwoPoints(path.points[1],path.points[0]);var v2=Vector.fromTwoPoints(path.points[2],path.points[1]);var normal=Vector.crossProduct(v1,v2).normalize();var brightness=Vector.dotProduct(normal,this.lightAngle);color=baseColor.lighten(brightness*this.colorDifference,this.lightColor);this.canvas.path(path.points.map(this._translatePoint.bind(this)),color)};Isomer.prototype._calculateTransformation=function(){this.transformation=[[this.scale*Math.cos(this.angle),this.scale*Math.sin(this.angle)],[this.scale*Math.cos(Math.PI-this.angle),this.scale*Math.sin(Math.PI-this.angle)]]};Isomer.Canvas=Canvas;Isomer.Color=Color;Isomer.Path=Path;Isomer.Point=Point;Isomer.Shape=Shape;Isomer.Vector=Vector;module.exports=Isomer},{"./canvas":1,"./color":2,"./path":4,"./point":5,"./shape":6,"./vector":7}],4:[function(require,module,exports){var Point=require("./point");function Path(points){if(Object.prototype.toString.call(points)==="[object Array]"){this.points=points}else{this.points=Array.prototype.slice.call(arguments)}}Path.prototype.push=function(point){this.points.push(point)};Path.prototype.reverse=function(){var points=Array.prototype.slice.call(this.points);return new Path(points.reverse())};Path.prototype.translate=function(){var args=arguments;return new Path(this.points.map(function(point){return point.translate.apply(point,args)}))};Path.prototype.rotateZ=function(){var args=arguments;return new Path(this.points.map(function(point){return point.rotateZ.apply(point,args)}))};Path.prototype.scale=function(){var args=arguments;return new Path(this.points.map(function(point){return point.scale.apply(point,args)}))};Path.prototype.depth=function(){var i,total=0;for(i=0;i<this.points.length;i++){total+=this.points[i].depth()}return total/(this.points.length||1)};Path.Rectangle=function(origin,width,height){if(width===undefined)width=1;if(height===undefined)height=1;var path=new Path([origin,new Point(origin.x+width,origin.y,origin.z),new Point(origin.x+width,origin.y+height,origin.z),new Point(origin.x,origin.y+height,origin.z)]);return path};Path.Circle=function(origin,radius,vertices){vertices=vertices||20;var i,path=new Path;for(i=0;i<vertices;i++){path.push(new Point(radius*Math.cos(i*2*Math.PI/vertices),radius*Math.sin(i*2*Math.PI/vertices),0))}return path.translate(origin.x,origin.y,origin.z)};Path.Star=function(origin,outerRadius,innerRadius,points){var i,r,path=new Path;for(i=0;i<points*2;i++){r=i%2===0?outerRadius:innerRadius;path.push(new Point(r*Math.cos(i*Math.PI/points),r*Math.sin(i*Math.PI/points),0))}return path.translate(origin.x,origin.y,origin.z)};module.exports=Path},{"./point":5}],5:[function(require,module,exports){function Point(x,y,z){if(this instanceof Point){this.x=typeof x==="number"?x:0;this.y=typeof y==="number"?y:0;this.z=typeof z==="number"?z:0}else{return new Point(x,y,z)}}Point.ORIGIN=new Point(0,0,0);Point.prototype.translate=function(dx,dy,dz){return new Point(this.x+dx,this.y+dy,this.z+dz)};Point.prototype.scale=function(origin,dx,dy,dz){var p=this.translate(-origin.x,-origin.y,-origin.z);if(dy===undefined&&dz===undefined){dy=dz=dx}else{dz=typeof dz==="number"?dz:1}p.x*=dx;p.y*=dy;p.z*=dz;return p.translate(origin.x,origin.y,origin.z)};Point.prototype.rotateZ=function(origin,angle){var p=this.translate(-origin.x,-origin.y,-origin.z);var x=p.x*Math.cos(angle)-p.y*Math.sin(angle);var y=p.x*Math.sin(angle)+p.y*Math.cos(angle);p.x=x;p.y=y;return p.translate(origin.x,origin.y,origin.z)};Point.prototype.depth=function(){return this.x+this.y-2*this.z};Point.distance=function(p1,p2){var dx=p2.x-p1.x;var dy=p2.y-p1.y;var dz=p2.z-p1.z;return Math.sqrt(dx*dx+dy*dy+dz*dz)};module.exports=Point},{}],6:[function(require,module,exports){var Path=require("./path");var Point=require("./point");function Shape(paths){if(Object.prototype.toString.call(paths)==="[object Array]"){this.paths=paths}else{this.paths=Array.prototype.slice.call(arguments)}}Shape.prototype.push=function(path){this.paths.push(path)};Shape.prototype.translate=function(){var args=arguments;return new Shape(this.paths.map(function(path){return path.translate.apply(path,args)}))};Shape.prototype.rotateZ=function(){var args=arguments;return new Shape(this.paths.map(function(path){return path.rotateZ.apply(path,args)}))};Shape.prototype.scale=function(){var args=arguments;return new Shape(this.paths.map(function(path){return path.scale.apply(path,args)}))};Shape.prototype.orderedPaths=function(){var paths=this.paths.slice();return paths.sort(function(pathA,pathB){return pathB.depth()-pathA.depth()})};Shape.extrude=function(path,height){height=typeof height==="number"?height:1;var i,topPath=path.translate(0,0,height);var shape=new Shape;shape.push(path.reverse());shape.push(topPath);for(i=0;i<path.points.length;i++){shape.push(new Path([topPath.points[i],path.points[i],path.points[(i+1)%path.points.length],topPath.points[(i+1)%topPath.points.length]]))}return shape};Shape.Prism=function(origin,dx,dy,dz){dx=typeof dx==="number"?dx:1;dy=typeof dy==="number"?dy:1;dz=typeof dz==="number"?dz:1;var prism=new Shape;var face1=new Path([origin,new Point(origin.x+dx,origin.y,origin.z),new Point(origin.x+dx,origin.y,origin.z+dz),new Point(origin.x,origin.y,origin.z+dz)]);prism.push(face1);prism.push(face1.reverse().translate(0,dy,0));var face2=new Path([origin,new Point(origin.x,origin.y,origin.z+dz),new Point(origin.x,origin.y+dy,origin.z+dz),new Point(origin.x,origin.y+dy,origin.z)]);prism.push(face2);prism.push(face2.reverse().translate(dx,0,0));var face3=new Path([origin,new Point(origin.x+dx,origin.y,origin.z),new Point(origin.x+dx,origin.y+dy,origin.z),new Point(origin.x,origin.y+dy,origin.z)]);prism.push(face3.reverse());prism.push(face3.translate(0,0,dz));return prism};Shape.Pyramid=function(origin,dx,dy,dz){dx=typeof dx==="number"?dx:1;dy=typeof dy==="number"?dy:1;dz=typeof dz==="number"?dz:1;var pyramid=new Shape;var face1=new Path([origin,new Point(origin.x+dx,origin.y,origin.z),new Point(origin.x+dx/2,origin.y+dy/2,origin.z+dz)]);pyramid.push(face1);pyramid.push(face1.rotateZ(origin.translate(dx/2,dy/2),Math.PI));var face2=new Path([origin,new Point(origin.x+dx/2,origin.y+dy/2,origin.z+dz),new Point(origin.x,origin.y+dy,origin.z)]);pyramid.push(face2);pyramid.push(face2.rotateZ(origin.translate(dx/2,dy/2),Math.PI));return pyramid};Shape.Cylinder=function(origin,radius,vertices,height){radius=typeof radius==="number"?radius:1;var circle=Path.Circle(origin,radius,vertices);var cylinder=Shape.extrude(circle,height);return cylinder};module.exports=Shape},{"./path":4,"./point":5}],7:[function(require,module,exports){function Vector(i,j,k){this.i=typeof i==="number"?i:0;this.j=typeof j==="number"?j:0;this.k=typeof k==="number"?k:0}Vector.fromTwoPoints=function(p1,p2){return new Vector(p2.x-p1.x,p2.y-p1.y,p2.z-p1.z)};Vector.crossProduct=function(v1,v2){var i=v1.j*v2.k-v2.j*v1.k;var j=-1*(v1.i*v2.k-v2.i*v1.k);var k=v1.i*v2.j-v2.i*v1.j;return new Vector(i,j,k)};Vector.dotProduct=function(v1,v2){return v1.i*v2.i+v1.j*v2.j+v1.k*v2.k};Vector.prototype.magnitude=function(){return Math.sqrt(this.i*this.i+this.j*this.j+this.k*this.k)};Vector.prototype.normalize=function(){var magnitude=this.magnitude();return new Vector(this.i/magnitude,this.j/magnitude,this.k/magnitude)};module.exports=Vector},{}],isomer:[function(require,module,exports){module.exports=require("./js/isomer")},{"./js/isomer":3}]},{},[]);var raf=require("raf");var Isomer=require("isomer");var ease=require("ease-component");var Color=require("color");var duration=5e3;var canvas=document.createElement("canvas");var ctx=canvas.getContext("2d");document.body.appendChild(canvas);var width=canvas.width=window.innerWidth;var height=canvas.height=window.innerHeight;var iso=new Isomer(canvas);var Point=Isomer.Point;var Shape=Isomer.Shape;var n_rows=10;var n_cols=n_rows;function render(p){ctx.clearRect(0,0,width,height);for(var row=n_rows;row>=1;row--){for(var col=1;col<=n_cols;col++){var w=1;var l=1;var h=.2;var x=(row-n_rows/2)*w;var z=(col-n_rows/2)*l;var y=1;var pos=Isomer.Point(x,y,z);var rx=x+w/2;var ry=y+l/2;var rz=z+h/2;var cube=Isomer.Shape.Prism(pos,w,l,h).rotateX(Point(rx,ry,rz),Math.PI*p).rotateZ(Point(rx,rz,ry),2*Math.PI*p);var sat=p*.5*row*col*100%100;var color=Color().hsl(20+col*3,sat,40);var isomercolor=new Isomer.Color(color.red(),color.green(),color.blue());iso.add(cube,isomercolor)}}}var timeStart=Date.now();function tick(){var elapsed=Date.now()-timeStart;var p=elapsed%duration/duration;render(p);raf(tick)}tick();

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "raf": "2.0.4",
    "color": "0.7.3",
    "ease-component": "1.0.0",
    "isomer": "0.2.4"
  }
}

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