requirebin sketch

index.js

var global = window,
    div = document.createElement('div');

div.innerHTML = atob('CjxzY3JpcHQgaWQ9InNoYWRlci1mcyIgdHlwZT0ieC1zaGFkZXIveC1mcmFnbWVudCI+CnByZWNpc2lvbiBtZWRpdW1wIGZsb2F0OwoKICB2YXJ5aW5nIHZlYzQgdkNvbG9yOwoKICB2b2lkIG1haW4odm9pZCkgewogICAgZ2xfRnJhZ0NvbG9yID0gdkNvbG9yOwogIH0KPC9zY3JpcHQ+Cgo8c2NyaXB0IGlkPSJzaGFkZXItdnMiIHR5cGU9Ingtc2hhZGVyL3gtdmVydGV4Ij4KICAgICAgYXR0cmlidXRlIHZlYzMgYVZlcnRleFBvc2l0aW9uOwogIGF0dHJpYnV0ZSB2ZWM0IGFWZXJ0ZXhDb2xvcjsKCiAgdW5pZm9ybSBtYXQ0IHVNVk1hdHJpeDsKICB1bmlmb3JtIG1hdDQgdVBNYXRyaXg7CgogIHZhcnlpbmcgdmVjNCB2Q29sb3I7CgogIHZvaWQgbWFpbih2b2lkKSB7CiAgICBnbF9Qb3NpdGlvbiA9IHVQTWF0cml4ICogdU1WTWF0cml4ICogdmVjNChhVmVydGV4UG9zaXRpb24sIDEuMCk7CiAgICB2Q29sb3IgPSBhVmVydGV4Q29sb3I7CiAgfQo8L3NjcmlwdD4KICAgIAo=');

document.body.appendChild(div)

var matrix3d = require('matrix3d')


// rotation
  var rTri = 0;
  var rSquare = 0;

function initGL() {
    var canvas = document.createElement('canvas');
    canvas.width = "500";
    canvas.height = "500";
    canvas.style.border = 0;

    document.body.appendChild(canvas);
    try {
        gl = canvas.getContext("experimental-webgl");
        gl.viewportWidth = canvas.width;
        gl.viewportHeight = canvas.height;
    } catch (e) {
    }
    if (!gl) {
        alert("Could not initialise WebGL, sorry :-(");
    }
    return gl;
}


function getShader(gl, id) {
    var shaderScript = document.getElementById(id);
    if (!shaderScript) {
        return null;
    }

    var str = "";
    var k = shaderScript.firstChild;
    while (k) {
        if (k.nodeType == 3) {
            str += k.textContent;
        }
        k = k.nextSibling;
    }

    var shader;
    if (shaderScript.type == "x-shader/x-fragment") {
        shader = gl.createShader(gl.FRAGMENT_SHADER);
    } else if (shaderScript.type == "x-shader/x-vertex") {
        shader = gl.createShader(gl.VERTEX_SHADER);
    } else {
        return null;
    }

    gl.shaderSource(shader, str);
    gl.compileShader(shader);

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert(gl.getShaderInfoLog(shader));
        return null;
    }

    return shader;
}


var shaderProgram;

function initShaders(gl) {
    var fragmentShader = getShader(gl, "shader-fs");
    var vertexShader = getShader(gl, "shader-vs");

    shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);

    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        alert("Could not initialise shaders");
    }

    gl.useProgram(shaderProgram);

    shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
    gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
    gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);

    shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
    shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
}


var mvMatrix = new matrix3d()// mat4.create();
var pMatrix = new matrix3d() //mat4.create();
var mvMatrixStack = [];
function degToRad(degrees) {
        return degrees * Math.PI / 180;
    }

function mvPushMatrix() {
    var copy = mvMatrix.clone() //new matrix3d()//mat4.create();
    //mat4.copy(copy, mvMatrix);
    mvMatrixStack.push(copy);
  }

  function mvPopMatrix() {
    if (mvMatrixStack.length == 0) {
      throw "Invalid popMatrix!";
    }
    mvMatrix = mvMatrixStack.pop();
  }

function setMatrixUniforms(gl) {
    gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix.toArray3d());
    gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix.toArray3d());
}



var triangleVertexPositionBuffer;
  var triangleVertexColorBuffer;
  var squareVertexPositionBuffer;
  var squareVertexColorBuffer;

function initBuffers(gl) {
    triangleVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
    var vertices = [
        0,  1,  0,
        -1, -1,  0,
        1, -1,  0
    ];

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    triangleVertexPositionBuffer.itemSize = 3;
    triangleVertexPositionBuffer.numItems = 3;
triangleVertexColorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
    var colors = [
        1.0, 0.0, 0.0, 1.0,
        0.0, 1.0, 0.0, 1.0,
        0.0, 0.0, 1.0, 1.0
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
    triangleVertexColorBuffer.itemSize = 4;
    triangleVertexColorBuffer.numItems = 3;
    squareVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
    vertices = [
        1.0,  1.0,  0.0,
        -1.0,  1.0,  0.0,
        1.0, -1.0,  0.0,
        -1.0, -1.0,  0.0
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    squareVertexPositionBuffer.itemSize = 3;
    squareVertexPositionBuffer.numItems = 4;
  squareVertexColorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
    colors = []
    for (var i=0; i < 4; i++) {
      colors = colors.concat([0.5, 0.5, 1.0, 1.0]);
    }
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
    squareVertexColorBuffer.itemSize = 4;
    squareVertexColorBuffer.numItems = 4;
}

//from mat4 ---
function perspective(out, fovy, aspect, near, far) {
    var f = 1.0 / Math.tan(fovy / 2),
        nf = 1 / (near - far);
    out.m11 = f / aspect;
    out.m12 = 0;
    out.m13 = 0;
    out.m14 = 0;
    out.m21 = 0;
    out.m22 = f;
    out.m23 = 0;
    out.m24 = 0;
    out.m31 = 0;
    out.m32 = 0;
    out.m33 = (far + near) * nf;
    out.m34 = -1;
    out.m41 = 0;
    out.m42 = 0;
    out.m43 = (2 * far * near) * nf;
    out.m44 = 0;
    return out;
}
translate = function (out,v) {
    var x = v[0], y = v[1], z = v[2]


        out.m41 = out.m11 * x + out.m21 * y + out.m31 * z + out.m41;
        out.m42 = out.m12 * x + out.m22 * y + out.m32 * z + out.m42;
        out.m43 = out.m13 * x + out.m23 * y + out.m33 * z + out.m43;
        out.m44 = out.m14 * x + out.m24 * y + out.m34 * z + out.m44;


    return out;
}

rotate = function (out, rad, axis) {
    var x = axis[0], y = axis[1], z = axis[2],
        len = Math.sqrt(x * x + y * y + z * z),
        s, c, t, a = [
          out.m11, out.m12, out.m13, out.m14,
          out.m21, out.m22, out.m23, out.m24,
          out.m31, out.m32, out.m33, out.m34,
          out.m41, out.m42, out.m43, out.m44
        ],
        a00, a01, a02, a03,
        a10, a11, a12, a13,
        a20, a21, a22, a23,
        b00, b01, b02,
        b10, b11, b12,
        b20, b21, b22;

    if (Math.abs(len) < 0.000001) { return null; }

    len = 1 / len;
    x *= len;
    y *= len;
    z *= len;

    s = Math.sin(rad);
    c = Math.cos(rad);
    t = 1 - c;

    a00 = a[0]; a01 = a[1]; a02 = a[2]; a03 = a[3];
    a10 = a[4]; a11 = a[5]; a12 = a[6]; a13 = a[7];
    a20 = a[8]; a21 = a[9]; a22 = a[10]; a23 = a[11];

    // Construct the elements of the rotation matrix
    b00 = x * x * t + c; b01 = y * x * t + z * s; b02 = z * x * t - y * s;
    b10 = x * y * t - z * s; b11 = y * y * t + c; b12 = z * y * t + x * s;
    b20 = x * z * t + y * s; b21 = y * z * t - x * s; b22 = z * z * t + c;

    // Perform rotation-specific matrix multiplication
    out.m11 = a00 * b00 + a10 * b01 + a20 * b02;
    out.m12 = a01 * b00 + a11 * b01 + a21 * b02;
    out.m13 = a02 * b00 + a12 * b01 + a22 * b02;
    out.m14 = a03 * b00 + a13 * b01 + a23 * b02;
    out.m21 = a00 * b10 + a10 * b11 + a20 * b12;
    out.m22 = a01 * b10 + a11 * b11 + a21 * b12;
    out.m23 = a02 * b10 + a12 * b11 + a22 * b12;
    out.m24 = a03 * b10 + a13 * b11 + a23 * b12;
    out.m31 = a00 * b20 + a10 * b21 + a20 * b22;
    out.m32 = a01 * b20 + a11 * b21 + a21 * b22;
    out.m33 = a02 * b20 + a12 * b21 + a22 * b22;
    out.m34 = a03 * b20 + a13 * b21 + a23 * b22;

    return out;
};
// from mat4 --
function drawScene(gl) {
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
         //console.log(gl.viewportWidth)

    perspective(pMatrix, 45 * 2 * Math.PI / 360, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0);

    mvMatrix = new matrix3d()
    //mat4.identity(mvMatrix);

    translate(mvMatrix, [-1.5, 0.0, -7.0]);

  	mvPushMatrix();
    //mvMatrix.rotate([0 * sina, 1 * sina, 0 * sina, degToRad(Math.cos((rTri)/2))]);
    rotate(mvMatrix, degToRad(rTri), [0, 1, 0])

    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

  gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);


    setMatrixUniforms(gl);
    gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);

mvPopMatrix();

  //Square
    gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, squareVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

	  mvPushMatrix();
    rotate(mvMatrix, degToRad(rSquare), [1, 0, 0]);


    translate(mvMatrix, [3.0, 0.0, 0.0]);
    gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);


    setMatrixUniforms(gl);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);

     mvPopMatrix();
}

function webGLStart() {

    var gl = initGL();
    initShaders(gl);
    initBuffers(gl);

    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.enable(gl.DEPTH_TEST);
	var equations = require('transition/equations')

  var Transition = require('transition')
  var lastTime = 0;
  var animation = new Transition(3000, equations.bounceOut, function(delta) {
    		var current = +new Date()

        drawScene(gl);
        rTri = delta * 360;
        rSquare = delta * 360
    		rTri = rTri % 360;
				rSquare = rSquare % 360;
    		lastTime = current

  })
  animation.start()
  document.getElementsByTagName('canvas')[0].onclick=function(){
    if (animation.paused){
      console.log('resuming')
    	animation.resume()
    } else {
      console.log('stopping')
      console.log(rTri, rSquare)
      animation.pause()
    }
  }
  //animation.stop()
}

//global.onload=webGLStart
webGLStart()

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}({o4pPIT:[function(require,module,exports){"use strict";module.exports=require("./lib/Matrix3d")},{"./lib/Matrix3d":3}],matrix3d:[function(require,module,exports){module.exports=require("o4pPIT")},{}],3:[function(require,module,exports){"use strict";var prime=require("prime");var Vector3=require("./Vector3");var Vector4=require("./Vector4");var stringify=function(array,places){if(places==null||places>20)places=20;var strings=[];for(var i=0;i<array.length;i++)strings[i]=array[i].toFixed(10).replace(/\.?0+$/,"");return strings};var TypeMask={Identity:0,Translate:1,Scale:2,Affine:4,Perspective:8,All:15,Unknown:128};var Matrix3d=prime({constructor:function Matrix3d(){var values=arguments;if(values.length===1)values=values[0];if(!values.length)values=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];var i=0,j,k=0;if(values.length===6){var a=values[0];var b=values[1];var c=values[2];var d=values[3];var e=values[4];var f=values[5];values=[a,b,0,0,c,d,0,0,0,0,1,0,e,f,0,1]}if(values.length!==16)throw new Error("invalid matrix");for(i=0;i<4;i++){var col=this[i]=[];for(j=0;j<4;j++){col[j]=values[k++]}}},get a(){return this.m11},get b(){return this.m12},get c(){return this.m21},get d(){return this.m22},get e(){return this.m41},get f(){return this.m42},set a(value){this.m11=value},set b(value){this.m12=value},set c(value){this.m21=value},set d(value){this.m22=value},set e(value){this.m41=value},set f(value){this.m42=value},get m11(){return this[0][0]},get m12(){return this[0][1]},get m13(){return this[0][2]},get m14(){return this[0][3]},get m21(){return this[1][0]},get m22(){return this[1][1]},get m23(){return this[1][2]},get m24(){return this[1][3]},get m31(){return this[2][0]},get m32(){return this[2][1]},get m33(){return this[2][2]},get m34(){return this[2][3]},get m41(){return this[3][0]},get m42(){return this[3][1]},get m43(){return this[3][2]},get m44(){return this[3][3]},set m11(value){this[0][0]=value},set m12(value){this[0][1]=value},set m13(value){this[0][2]=value},set m14(value){this[0][3]=value},set m21(value){this[1][0]=value},set m22(value){this[1][1]=value},set m23(value){this[1][2]=value},set m24(value){this[1][3]=value},set m31(value){this[2][0]=value},set m32(value){this[2][1]=value},set m33(value){this[2][2]=value},set m34(value){this[2][3]=value},set m41(value){this[3][0]=value},set m42(value){this[3][1]=value},set m43(value){this[3][2]=value},set m44(value){this[3][3]=value},get transX(){return this[3][0]},get transY(){return this[3][1]},get transZ(){return this[3][2]},get scaleX(){return this[0][0]},get scaleY(){return this[1][1]},get scaleZ(){return this[2][2]},get perspX(){return this[0][3]},get perspY(){return this[1][3]},get perspZ(){return this[2][3]},set transX(value){this[3][0]=value},set transY(value){this[3][1]=value},set transZ(value){this[3][2]=value},set scaleX(value){this[0][0]=value},set scaleY(value){this[1][1]=value},set scaleZ(value){this[2][2]=value},set perspX(value){this[0][3]=value},set perspY(value){this[1][3]=value},set perspZ(value){this[2][3]=value},get type(){var m=this;var mask=0;if(0!==m.perspX||0!==m.perspY||0!==m.perspZ||1!==m[3][3]){return TypeMask.Translate|TypeMask.Scale|TypeMask.Affine|TypeMask.Perspective}if(0!==m.transX||0!==m.transY||0!==m.transZ){mask|=TypeMask.Translate}if(1!==m.scaleX||1!==m.scaleY||1!==m.scaleZ){mask|=TypeMask.Scale}if(0!==m[1][0]||0!==m[0][1]||0!==m[0][2]||0!==m[2][0]||0!==m[1][2]||0!==m[2][1]){mask|=TypeMask.Affine}return mask},is2d:function(){var m=this;return m.m31===0&&m.m32===0&&m.m13===0&&m.m14===0&&m.m23===0&&m.m24===0&&m.m33===1&&m.m34===0&&m.m43===0&&m.m44===1},equals:function(m2){var m1=this;return;m1.m11===m2.m11&&m1.m12===m2.m12&&m1.m13===m2.m13&&m1.m14===m2.m14&&m1.m21===m2.m21&&m1.m22===m2.m22&&m1.m23===m2.m23&&m1.m24===m2.m24&&m1.m31===m2.m31&&m1.m32===m2.m32&&m1.m33===m2.m33&&m1.m34===m2.m34&&m1.m41===m2.m41&&m1.m42===m2.m42&&m1.m43===m2.m43&&m1.m44===m2.m44},clone:function(){var m=this;return new Matrix3d(m.m11,m.m12,m.m13,m.m14,m.m21,m.m22,m.m23,m.m24,m.m31,m.m32,m.m33,m.m34,m.m41,m.m42,m.m43,m.m44)},isIdentity:function(){return this.type===TypeMask.Identity},isTranslate:function(){return!(this.type&~TypeMask.Translate)},isScaleTranslate:function(){return!(this.type&~(TypeMask.Scale|TypeMask.Translate))},concat:function(m2){if(this.isIdentity())return m2.clone();if(m2.isIdentity())return this.clone();var m=new Matrix3d;for(var j=0;j<4;j++){for(var i=0;i<4;i++){var value=0;for(var k=0;k<4;k++){value+=this[k][i]*m2[j][k]}m[j][i]=value}}return m},translate:function(v3){var translationMatrix=new Matrix3d;translationMatrix.m41=v3[0];translationMatrix.m42=v3[1];translationMatrix.m43=v3[2];return this.concat(translationMatrix)},scale:function(v3){var m=new Matrix3d;m.m11=v3[0];m.m22=v3[1];m.m33=v3[2];return this.concat(m)},rotate:function(v4q){var rotationMatrix=new Matrix3d;var x=v4q[0];var y=v4q[1];var z=v4q[2];var w=v4q[3];rotationMatrix.m11=1-2*(y*y+z*z);rotationMatrix.m21=2*(x*y-z*w);rotationMatrix.m31=2*(x*z+y*w);rotationMatrix.m12=2*(x*y+z*w);rotationMatrix.m22=1-2*(x*x+z*z);rotationMatrix.m32=2*(y*z-x*w);rotationMatrix.m13=2*(x*z-y*w);rotationMatrix.m23=2*(y*z+x*w);rotationMatrix.m33=1-2*(x*x+y*y);return this.concat(rotationMatrix)},skew:function(v3){var skewMatrix=new Matrix3d;skewMatrix[1][0]=v3[0];skewMatrix[2][0]=v3[1];skewMatrix[2][1]=v3[2];return this.concat(skewMatrix)},perspective:function(v4){var perspectiveMatrix=new Matrix3d;perspectiveMatrix.m14=v4[0];perspectiveMatrix.m24=v4[1];perspectiveMatrix.m34=v4[2];perspectiveMatrix.m44=v4[3];return this.concat(perspectiveMatrix)},map:function(v4){var result=new Vector4;for(var i=0;i<4;i++){var value=0;for(var j=0;j<4;j++){value+=this[j][i]*v4[j]}result[i]=value}return result},determinant:function(){if(this.isIdentity())return 1;if(this.isScaleTranslate())return this[0][0]*this[1][1]*this[2][2]*this[3][3];var a00=this[0][0];var a01=this[0][1];var a02=this[0][2];var a03=this[0][3];var a10=this[1][0];var a11=this[1][1];var a12=this[1][2];var a13=this[1][3];var a20=this[2][0];var a21=this[2][1];var a22=this[2][2];var a23=this[2][3];var a30=this[3][0];var a31=this[3][1];var a32=this[3][2];var a33=this[3][3];var b00=a00*a11-a01*a10;var b01=a00*a12-a02*a10;var b02=a00*a13-a03*a10;var b03=a01*a12-a02*a11;var b04=a01*a13-a03*a11;var b05=a02*a13-a03*a12;var b06=a20*a31-a21*a30;var b07=a20*a32-a22*a30;var b08=a20*a33-a23*a30;var b09=a21*a32-a22*a31;var b10=a21*a33-a23*a31;var b11=a22*a33-a23*a32;return b00*b11-b01*b10+b02*b09+b03*b08-b04*b07+b05*b06},normalize:function(){var m44=this.m44;if(m44===0)return false;var normalizedMatrix=new Matrix3d;var scale=1/m44;for(var i=0;i<4;i++)for(var j=0;j<4;j++)normalizedMatrix[j][i]=this[j][i]*scale;return normalizedMatrix},decompose:function(){var matrix=this.normalize();if(!matrix)return false;var perspectiveMatrix=matrix.clone();var i,j;for(i=0;i<3;i++)perspectiveMatrix[i][3]=0;perspectiveMatrix[3][3]=1;if(Math.abs(perspectiveMatrix.determinant())<1e-8)return false;var perspective;if(matrix[0][3]!==0||matrix[1][3]!==0||matrix[2][3]!==0){var rightHandSide=new Vector4(matrix[0][3],matrix[1][3],matrix[2][3],matrix[3][3]);var inversePerspectiveMatrix=perspectiveMatrix.invert();if(!inversePerspectiveMatrix)return false;var transposedInversePerspectiveMatrix=inversePerspectiveMatrix.transpose();perspective=transposedInversePerspectiveMatrix.map(rightHandSide)}else{perspective=new Vector4(0,0,0,1)}var translate=new Vector3;for(i=0;i<3;i++)translate[i]=matrix[3][i];var row=[];for(i=0;i<3;i++){var v3=row[i]=new Vector3;for(j=0;j<3;++j)v3[j]=matrix[i][j]}var scale=new Vector3;scale[0]=row[0].length();row[0]=row[0].normalize();var skew=new Vector3;skew[0]=row[0].dot(row[1]);row[1]=row[1].combine(row[0],1,-skew[0]);scale[1]=row[1].length();row[1]=row[1].normalize();skew[0]/=scale[1];skew[1]=row[0].dot(row[2]);row[2]=row[2].combine(row[0],1,-skew[1]);skew[2]=row[1].dot(row[2]);row[2]=row[2].combine(row[1],1,-skew[2]);scale[2]=row[2].length();row[2]=row[2].normalize();skew[1]/=scale[2];skew[2]/=scale[2];var pdum3=row[1].cross(row[2]);if(row[0].dot(pdum3)<0){for(i=0;i<3;i++){scale[i]*=-1;for(j=0;j<3;++j)row[i][j]*=-1}}var quaternion=new Vector4(.5*Math.sqrt(Math.max(1+row[0][0]-row[1][1]-row[2][2],0)),.5*Math.sqrt(Math.max(1-row[0][0]+row[1][1]-row[2][2],0)),.5*Math.sqrt(Math.max(1-row[0][0]-row[1][1]+row[2][2],0)),.5*Math.sqrt(Math.max(1+row[0][0]+row[1][1]+row[2][2],0)));if(row[2][1]>row[1][2])quaternion[0]=-quaternion[0];if(row[0][2]>row[2][0])quaternion[1]=-quaternion[1];if(row[1][0]>row[0][1])quaternion[2]=-quaternion[2];return new DecomposedMatrix(perspective,translate,quaternion,skew,scale)},invert:function(){var a00=this[0][0];var a01=this[0][1];var a02=this[0][2];var a03=this[0][3];var a10=this[1][0];var a11=this[1][1];var a12=this[1][2];var a13=this[1][3];var a20=this[2][0];var a21=this[2][1];var a22=this[2][2];var a23=this[2][3];var a30=this[3][0];var a31=this[3][1];var a32=this[3][2];var a33=this[3][3];var b00=a00*a11-a01*a10;var b01=a00*a12-a02*a10;var b02=a00*a13-a03*a10;var b03=a01*a12-a02*a11;var b04=a01*a13-a03*a11;var b05=a02*a13-a03*a12;var b06=a20*a31-a21*a30;var b07=a20*a32-a22*a30;var b08=a20*a33-a23*a30;var b09=a21*a32-a22*a31;var b10=a21*a33-a23*a31;var b11=a22*a33-a23*a32;var det=b00*b11-b01*b10+b02*b09+b03*b08-b04*b07+b05*b06;if(det===0||!isFinite(det))return false;var invdet=1/det;b00*=invdet;b01*=invdet;b02*=invdet;b03*=invdet;b04*=invdet;b05*=invdet;b06*=invdet;b07*=invdet;b08*=invdet;b09*=invdet;b10*=invdet;b11*=invdet;return new Matrix3d(a11*b11-a12*b10+a13*b09,a02*b10-a01*b11-a03*b09,a31*b05-a32*b04+a33*b03,a22*b04-a21*b05-a23*b03,a12*b08-a10*b11-a13*b07,a00*b11-a02*b08+a03*b07,a32*b02-a30*b05-a33*b01,a20*b05-a22*b02+a23*b01,a10*b10-a11*b08+a13*b06,a01*b08-a00*b10-a03*b06,a30*b04-a31*b02+a33*b00,a21*b02-a20*b04-a23*b00,a11*b07-a10*b09-a12*b06,a00*b09-a01*b07+a02*b06,a31*b01-a30*b03-a32*b00,a20*b03-a21*b01+a22*b00)},transpose:function(){var m=this;return new Matrix3d(m.m11,m.m21,m.m31,m.m41,m.m12,m.m22,m.m32,m.m42,m.m13,m.m23,m.m33,m.m43,m.m14,m.m24,m.m34,m.m44)},interpolation:function(matrix){return new MatrixInterpolation(this,matrix)},toArray:function(){return this.is2d()?this.toArray2d():this.toArray3d()},toArray3d:function(){var m=this;return[m.m11,m.m12,m.m13,m.m14,m.m21,m.m22,m.m23,m.m24,m.m31,m.m32,m.m33,m.m34,m.m41,m.m42,m.m43,m.m44]},toArray2d:function(){var m=this;return[m.a,m.b,m.c,m.d,m.e,m.f]},toString:function(places){return this.is2d()?this.toString2d(places):this.toString3d(places)},toString3d:function(places){return"matrix3d("+stringify(this.toArray3d()).join(", ")+")"},toString2d:function(places){return"matrix("+stringify(this.toArray2d()).join(", ")+")"}});var DecomposedMatrix=prime({constructor:function DecomposedMatrix(perspective,translate,quaternion,skew,scale){this.perspective=perspective;this.translate=translate;this.quaternion=quaternion;this.skew=skew;this.scale=scale},interpolate:function(to,delta){var from=this;var perspective=from.perspective.lerp(to.perspective,delta);var translate=from.translate.lerp(to.translate,delta);var quaternion=from.quaternion.slerp(to.quaternion,delta);var skew=from.skew.lerp(to.skew,delta);var scale=from.scale.lerp(to.scale,delta);return new DecomposedMatrix(perspective,translate,quaternion,skew,scale)},compose:function(){return(new Matrix3d).perspective(this.perspective).translate(this.translate).rotate(this.quaternion).skew(this.skew).scale(this.scale)}});var MatrixInterpolation=prime({constructor:function MatrixInterpolation(from,to){this.matrix1=from;this.matrix2=to;this.from=from.decompose();this.to=to.decompose()},step:function(delta){if(delta===0)return this.matrix1;if(delta===1)return this.matrix2;return this.from.interpolate(this.to,delta).compose()}});Matrix3d.Decomposed=DecomposedMatrix;Matrix3d.Interpolation=MatrixInterpolation;module.exports=Matrix3d},{"./Vector3":4,"./Vector4":5,prime:6}],4:[function(require,module,exports){"use strict";var prime=require("prime");var Vector3=prime({constructor:function Vector3(x,y,z){this[0]=x||0;this[1]=y||0;this[2]=z||0},clone:function(){return new Vector3(this[0],this[1],this[2])},get x(){return this[0]},get y(){return this[1]},get z(){return this[2]},equals:function(v3){return this[0]===v3[0]&&this[1]===v3[1]&&this[2]===v3[2]},length:function(){return Math.sqrt(this[0]*this[0]+this[1]*this[1]+this[2]*this[2])},normalize:function(){var length=this.length();if(length===0)return new Vector3;return new Vector3(this[0]/length,this[1]/length,this[2]/length)},dot:function(v3){return this[0]*v3[0]+this[1]*v3[1]+this[2]*v3[2]},cross:function(v3){var x=this[0],y=this[1],z=this[2];return new Vector3(y*v3[2]-z*v3[1],z*v3[0]-x*v3[2],x*v3[1]-y*v3[0])},lerp:function(v3,delta){var scale1=delta;var scale2=1-delta;return v3.combine(this,scale1,scale2)},combine:function(v3,scale1,scale2){var result=new Vector3;for(var i=0;i<3;i++)result[i]=this[i]*scale1+v3[i]*scale2;return result}});module.exports=Vector3},{prime:6}],5:[function(require,module,exports){"use strict";var prime=require("prime");var degToRad=function(degrees){return degrees*Math.PI/180};var radToDeg=function(radians){return radians*180/Math.PI};var Vector4=prime({constructor:function Vector4(x,y,z,w){this[0]=x||0;this[1]=y||0;this[2]=z||0;this[3]=w||0},clone:function(){return new Vector4(this[0],this[1],this[2],this[3])},get x(){return this[0]},get y(){return this[1]},get z(){return this[2]},get w(){return this[3]},equals:function(v3){return this[0]===v3[0]&&this[1]===v3[1]&&this[2]===v3[2]&&this[3]===v3[3]},length:function(){return Math.sqrt(this[0]*this[0]+this[1]*this[1]+this[2]*this[2]+this[3]*this[3])},dot:function(v4){return this[0]*v4[0]+this[1]*v4[1]+this[2]*v4[2]+this[3]*v4[3]},normalize:function(){var length=this.length();if(length===0)return new Vector4(0,0,0,1);var inv=1/length;return new Vector4(this[0]*inv,this[1]*inv,this[2]*inv,this[3]*inv)},quaternionToAngle:function(deg){var v4=this;if(v4[3]>1)v4=v4.normalize();var w=2*Math.acos(v4[3]);var s=Math.sqrt(1-v4[3]*v4[3]);if(s<1e-4){return new Vector4(v4[0],v4[1],v4[2],w)}else{return new Vector4(v4[0]/s,v4[1]/s,v4[2]/s,deg?radToDeg(w):w)}},angleToQuaternion:function(deg){var angle=deg?degToRad(this[3]):this[3];var half=angle/2,s=Math.sin(half);return new Vector4(this[0]*s,this[1]*s,this[2]*s,Math.cos(half))},combine:function(v4,scale1,scale2){var result=new Vector4;for(var i=0;i<4;i++)result[i]=this[i]*scale1+v4[i]*scale2;return result},lerp:function(v4,delta){var scale1=delta;var scale2=1-delta;return v4.combine(this,scale1,scale2)},slerp:function(v4q,delta){var interpolated=new Vector4;var product=this.dot(v4q);product=Math.min(Math.max(product,-1),1);var scale1=1;if(product<0){product=-product;scale1=-1}var epsilon=1e-5;if(Math.abs(product-1)<epsilon){for(var i=0;i<4;++i)interpolated[i]=this[i];return interpolated}var denom=Math.sqrt(1-product*product);var theta=Math.acos(product);var w=Math.sin(delta*theta)*(1/denom);scale1*=Math.cos(delta*theta)-product*w;var scale2=w;return this.combine(v4q,scale1,scale2)}});module.exports=Vector4},{prime:6}],6:[function(require,module,exports){"use strict";var hasOwn=require("mout/object/hasOwn"),mixIn=require("mout/object/mixIn"),create=require("mout/lang/createObject"),kindOf=require("mout/lang/kindOf");var hasDescriptors=true;try{Object.defineProperty({},"~",{});Object.getOwnPropertyDescriptor({},"~")}catch(e){hasDescriptors=false}var hasEnumBug=!{valueOf:0}.propertyIsEnumerable("valueOf"),buggy=["toString","valueOf"];var verbs=/^constructor|inherits|mixin$/;var implement=function(proto){var prototype=this.prototype;for(var key in proto){if(key.match(verbs))continue;if(hasDescriptors){var descriptor=Object.getOwnPropertyDescriptor(proto,key);if(descriptor){Object.defineProperty(prototype,key,descriptor);continue}}prototype[key]=proto[key]}if(hasEnumBug)for(var i=0;key=buggy[i];i++){var value=proto[key];if(value!==Object.prototype[key])prototype[key]=value}return this};var prime=function(proto){if(kindOf(proto)==="Function")proto={constructor:proto};var superprime=proto.inherits;var constructor=hasOwn(proto,"constructor")?proto.constructor:superprime?function(){return superprime.apply(this,arguments)}:function(){};if(superprime){mixIn(constructor,superprime);var superproto=superprime.prototype;var cproto=constructor.prototype=create(superproto);constructor.parent=superproto;cproto.constructor=constructor}if(!constructor.implement)constructor.implement=implement;var mixins=proto.mixin;if(mixins){if(kindOf(mixins)!=="Array")mixins=[mixins];for(var i=0;i<mixins.length;i++)constructor.implement(create(mixins[i].prototype))}return constructor.implement(proto)};module.exports=prime},{"mout/lang/createObject":7,"mout/lang/kindOf":8,"mout/object/hasOwn":11,"mout/object/mixIn":12}],7:[function(require,module,exports){var mixIn=require("../object/mixIn");function createObject(parent,props){function F(){}F.prototype=parent;return mixIn(new F,props)}module.exports=createObject},{"../object/mixIn":12}],8:[function(require,module,exports){var _rKind=/^\[object (.*)\]$/,_toString=Object.prototype.toString,UNDEF;function kindOf(val){if(val===null){return"Null"}else if(val===UNDEF){return"Undefined"}else{return _rKind.exec(_toString.call(val))[1]}}module.exports=kindOf},{}],9:[function(require,module,exports){var hasOwn=require("./hasOwn");var _hasDontEnumBug,_dontEnums;function checkDontEnum(){_dontEnums=["toString","toLocaleString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","constructor"];_hasDontEnumBug=true;for(var key in{toString:null}){_hasDontEnumBug=false}}function forIn(obj,fn,thisObj){var key,i=0;if(_hasDontEnumBug==null)checkDontEnum();for(key in obj){if(exec(fn,obj,key,thisObj)===false){break}}if(_hasDontEnumBug){var ctor=obj.constructor,isProto=!!ctor&&obj===ctor.prototype;while(key=_dontEnums[i++]){if((key!=="constructor"||!isProto&&hasOwn(obj,key))&&obj[key]!==Object.prototype[key]){if(exec(fn,obj,key,thisObj)===false){break}}}}}function exec(fn,obj,key,thisObj){return fn.call(thisObj,obj[key],key,obj)}module.exports=forIn},{"./hasOwn":11}],10:[function(require,module,exports){var hasOwn=require("./hasOwn");var forIn=require("./forIn");function forOwn(obj,fn,thisObj){forIn(obj,function(val,key){if(hasOwn(obj,key)){return fn.call(thisObj,obj[key],key,obj)}})}module.exports=forOwn},{"./forIn":9,"./hasOwn":11}],11:[function(require,module,exports){function hasOwn(obj,prop){return Object.prototype.hasOwnProperty.call(obj,prop)}module.exports=hasOwn},{}],12:[function(require,module,exports){var forOwn=require("./forOwn");function mixIn(target,objects){var i=0,n=arguments.length,obj;while(++i<n){obj=arguments[i];if(obj!=null){forOwn(obj,copyProp,target)}}return target}function copyProp(val,key){this[key]=val}module.exports=mixIn},{"./forOwn":10}]},{},[]);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}({"7OiDLe":[function(require,module,exports){"use strict";var forIn=require("mout/object/forIn");var slice_=Array.prototype.slice;var equations={quad:function(p){return Math.pow(p,2)},cubic:function(p){return Math.pow(p,3)},quart:function(p){return Math.pow(p,4)},quint:function(p){return Math.pow(p,5)},expo:function(p){return Math.pow(2,8*(p-1))},circ:function(p){return 1-Math.sin(Math.acos(p))},sine:function(p){return 1-Math.cos(p*Math.PI/2)},bounce:function(p){var value;for(var a=0,b=1;1;a+=b,b/=2){if(p>=(7-4*a)/11){value=b*b-Math.pow((11-6*a-11*p)/4,2);break}}return value},pow:function(p,x){if(x==null)x=6;return Math.pow(p,x)},back:function(p,x){if(x==null)x=1.618;return Math.pow(p,2)*((x+1)*p-x)},elastic:function(p,x){if(x==null)x=1;return Math.pow(2,10*--p)*Math.cos(20*p*Math.PI*x/3)}};forIn(equations,function(equation,key){exports[key]=exports[key+"In"]=equation;exports[key+"Out"]=function(delta){return 1-equation(1-delta)};exports[key+"InOut"]=function(delta){var result=delta<=.5?equation(2*delta):2-equation(2*(1-delta));return result/2}})},{"mout/object/forIn":3}],"transition/equations":[function(require,module,exports){module.exports=require("7OiDLe")},{}],3:[function(require,module,exports){var hasOwn=require("./hasOwn");var _hasDontEnumBug,_dontEnums;function checkDontEnum(){_dontEnums=["toString","toLocaleString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","constructor"];_hasDontEnumBug=true;for(var key in{toString:null}){_hasDontEnumBug=false}}function forIn(obj,fn,thisObj){var key,i=0;if(_hasDontEnumBug==null)checkDontEnum();for(key in obj){if(exec(fn,obj,key,thisObj)===false){break}}if(_hasDontEnumBug){var ctor=obj.constructor,isProto=!!ctor&&obj===ctor.prototype;while(key=_dontEnums[i++]){if((key!=="constructor"||!isProto&&hasOwn(obj,key))&&obj[key]!==Object.prototype[key]){if(exec(fn,obj,key,thisObj)===false){break}}}}}function exec(fn,obj,key,thisObj){return fn.call(thisObj,obj[key],key,obj)}module.exports=forIn},{"./hasOwn":4}],4:[function(require,module,exports){function hasOwn(obj,prop){return Object.prototype.hasOwnProperty.call(obj,prop)}module.exports=hasOwn},{}]},{},[]);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")}},{}],tOdDhf:[function(require,module,exports){"use strict";module.exports=require("./lib/transition")},{"./lib/transition":4}],transition:[function(require,module,exports){module.exports=require("tOdDhf")},{}],4:[function(require,module,exports){"use strict";var prime=require("prime"),defer=require("prime/defer");var Transition=prime({constructor:function Transition(duration,equation,callback){if(!duration)throw new Error("no duration given");if(!equation)throw new Error("no equation given");if(!callback)throw new Error("no callback given");this.duration=duration;this.equation=equation;this.callback=callback},get paused(){return this.cancel==null&&this.elapsed!=null},get active(){return this.cancel!=null},get idle(){return this.cancel==null&&this.elapsed==null},start:function(){if(this.idle){this.elapsed=0;this.cancel=defer.frame(this.step,this)}return this},step:function(time){this.elapsed+=time-(this.time||time);var factor=this.elapsed/this.duration;if(factor>1)factor=1;if(factor!==1){this.time=time;this.cancel=defer.frame(this.step,this)}else{this.cancel=this.time=this.elapsed=null}var delta=this.equation(factor);this.callback(delta)},stop:function(){if(this.active){this.cancel();this.elapsed=this.cancel=this.time=null}return this},pause:function(){if(this.active){this.cancel();this.cancel=this.time=null}return this},resume:function(){if(this.paused){this.cancel=defer.frame(this.step,this)}return this}});module.exports=Transition},{prime:15,"prime/defer":14}],5:[function(require,module,exports){function forEach(arr,callback,thisObj){if(arr==null){return}var i=-1,len=arr.length;while(++i<len){if(callback.call(thisObj,arr[i],i,arr)===false){break}}}module.exports=forEach},{}],6:[function(require,module,exports){function indexOf(arr,item,fromIndex){fromIndex=fromIndex||0;if(arr==null){return-1}var len=arr.length,i=fromIndex<0?len+fromIndex:fromIndex;while(i<len){if(arr[i]===item){return i}i++}return-1}module.exports=indexOf},{}],7:[function(require,module,exports){var mixIn=require("../object/mixIn");function createObject(parent,props){function F(){}F.prototype=parent;return mixIn(new F,props)}module.exports=createObject},{"../object/mixIn":12}],8:[function(require,module,exports){var _rKind=/^\[object (.*)\]$/,_toString=Object.prototype.toString,UNDEF;function kindOf(val){if(val===null){return"Null"}else if(val===UNDEF){return"Undefined"}else{return _rKind.exec(_toString.call(val))[1]}}module.exports=kindOf},{}],9:[function(require,module,exports){var hasOwn=require("./hasOwn");var _hasDontEnumBug,_dontEnums;function checkDontEnum(){_dontEnums=["toString","toLocaleString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","constructor"];_hasDontEnumBug=true;for(var key in{toString:null}){_hasDontEnumBug=false}}function forIn(obj,fn,thisObj){var key,i=0;if(_hasDontEnumBug==null)checkDontEnum();for(key in obj){if(exec(fn,obj,key,thisObj)===false){break}}if(_hasDontEnumBug){var ctor=obj.constructor,isProto=!!ctor&&obj===ctor.prototype;while(key=_dontEnums[i++]){if((key!=="constructor"||!isProto&&hasOwn(obj,key))&&obj[key]!==Object.prototype[key]){if(exec(fn,obj,key,thisObj)===false){break}}}}}function exec(fn,obj,key,thisObj){return fn.call(thisObj,obj[key],key,obj)}module.exports=forIn},{"./hasOwn":11}],10:[function(require,module,exports){var hasOwn=require("./hasOwn");var forIn=require("./forIn");function forOwn(obj,fn,thisObj){forIn(obj,function(val,key){if(hasOwn(obj,key)){return fn.call(thisObj,obj[key],key,obj)}})}module.exports=forOwn},{"./forIn":9,"./hasOwn":11}],11:[function(require,module,exports){function hasOwn(obj,prop){return Object.prototype.hasOwnProperty.call(obj,prop)}module.exports=hasOwn},{}],12:[function(require,module,exports){var forOwn=require("./forOwn");function mixIn(target,objects){var i=0,n=arguments.length,obj;while(++i<n){obj=arguments[i];if(obj!=null){forOwn(obj,copyProp,target)}}return target}function copyProp(val,key){this[key]=val}module.exports=mixIn},{"./forOwn":10}],13:[function(require,module,exports){function now(){return now.get()}now.get=typeof Date.now==="function"?Date.now:function(){return+new Date};module.exports=now},{}],14:[function(require,module,exports){(function(process,global){"use strict";var kindOf=require("mout/lang/kindOf"),now=require("mout/time/now"),forEach=require("mout/array/forEach"),indexOf=require("mout/array/indexOf");var callbacks={timeout:{},frame:[],immediate:[]};var push=function(collection,callback,context,defer){var iterator=function(){iterate(collection)};if(!collection.length)defer(iterator);var entry={callback:callback,context:context};collection.push(entry);return function(){var io=indexOf(collection,entry);if(io>-1)collection.splice(io,1)}};var iterate=function(collection){var time=now();forEach(collection.splice(0),function(entry){entry.callback.call(entry.context,time)})};var defer=function(callback,argument,context){return kindOf(argument)==="Number"?defer.timeout(callback,argument,context):defer.immediate(callback,argument)};if(global.process&&process.nextTick){defer.immediate=function(callback,context){return push(callbacks.immediate,callback,context,process.nextTick)}}else if(global.setImmediate){defer.immediate=function(callback,context){return push(callbacks.immediate,callback,context,setImmediate)}}else if(global.postMessage&&global.addEventListener){addEventListener("message",function(event){if(event.source===global&&event.data==="@deferred"){event.stopPropagation();iterate(callbacks.immediate)}},true);defer.immediate=function(callback,context){return push(callbacks.immediate,callback,context,function(){postMessage("@deferred","*")})}}else{defer.immediate=function(callback,context){return push(callbacks.immediate,callback,context,function(iterator){setTimeout(iterator,0)})}}var requestAnimationFrame=global.requestAnimationFrame||global.webkitRequestAnimationFrame||global.mozRequestAnimationFrame||global.oRequestAnimationFrame||global.msRequestAnimationFrame||function(callback){setTimeout(callback,1e3/60)};defer.frame=function(callback,context){return push(callbacks.frame,callback,context,requestAnimationFrame)};var clear;defer.timeout=function(callback,ms,context){var ct=callbacks.timeout;if(!clear)clear=defer.immediate(function(){clear=null;callbacks.timeout={}});return push(ct[ms]||(ct[ms]=[]),callback,context,function(iterator){setTimeout(iterator,ms)})};module.exports=defer}).call(this,require("/home/admin/browserify-cdn/node_modules/browserify/node_modules/insert-module-globals/node_modules/process/browser.js"),typeof self!=="undefined"?self:typeof window!=="undefined"?window:{})},{"/home/admin/browserify-cdn/node_modules/browserify/node_modules/insert-module-globals/node_modules/process/browser.js":1,"mout/array/forEach":5,"mout/array/indexOf":6,"mout/lang/kindOf":8,"mout/time/now":13}],15:[function(require,module,exports){"use strict";var hasOwn=require("mout/object/hasOwn"),mixIn=require("mout/object/mixIn"),create=require("mout/lang/createObject"),kindOf=require("mout/lang/kindOf");var hasDescriptors=true;try{Object.defineProperty({},"~",{});Object.getOwnPropertyDescriptor({},"~")}catch(e){hasDescriptors=false}var hasEnumBug=!{valueOf:0}.propertyIsEnumerable("valueOf"),buggy=["toString","valueOf"];var verbs=/^constructor|inherits|mixin$/;var implement=function(proto){var prototype=this.prototype;for(var key in proto){if(key.match(verbs))continue;if(hasDescriptors){var descriptor=Object.getOwnPropertyDescriptor(proto,key);if(descriptor){Object.defineProperty(prototype,key,descriptor);continue}}prototype[key]=proto[key]}if(hasEnumBug)for(var i=0;key=buggy[i];i++){var value=proto[key];if(value!==Object.prototype[key])prototype[key]=value}return this};var prime=function(proto){if(kindOf(proto)==="Function")proto={constructor:proto};var superprime=proto.inherits;var constructor=hasOwn(proto,"constructor")?proto.constructor:superprime?function(){return superprime.apply(this,arguments)}:function(){};if(superprime){mixIn(constructor,superprime);var superproto=superprime.prototype;var cproto=constructor.prototype=create(superproto);constructor.parent=superproto;cproto.constructor=constructor}if(!constructor.implement)constructor.implement=implement;var mixins=proto.mixin;if(mixins){if(kindOf(mixins)!=="Array")mixins=[mixins];for(var i=0;i<mixins.length;i++)constructor.implement(create(mixins[i].prototype))}return constructor.implement(proto)};module.exports=prime},{"mout/lang/createObject":7,"mout/lang/kindOf":8,"mout/object/hasOwn":11,"mout/object/mixIn":12}]},{},[]);var global=window,div=document.createElement("div");div.innerHTML=atob("CjxzY3JpcHQgaWQ9InNoYWRlci1mcyIgdHlwZT0ieC1zaGFkZXIveC1mcmFnbWVudCI+CnByZWNpc2lvbiBtZWRpdW1wIGZsb2F0OwoKICB2YXJ5aW5nIHZlYzQgdkNvbG9yOwoKICB2b2lkIG1haW4odm9pZCkgewogICAgZ2xfRnJhZ0NvbG9yID0gdkNvbG9yOwogIH0KPC9zY3JpcHQ+Cgo8c2NyaXB0IGlkPSJzaGFkZXItdnMiIHR5cGU9Ingtc2hhZGVyL3gtdmVydGV4Ij4KICAgICAgYXR0cmlidXRlIHZlYzMgYVZlcnRleFBvc2l0aW9uOwogIGF0dHJpYnV0ZSB2ZWM0IGFWZXJ0ZXhDb2xvcjsKCiAgdW5pZm9ybSBtYXQ0IHVNVk1hdHJpeDsKICB1bmlmb3JtIG1hdDQgdVBNYXRyaXg7CgogIHZhcnlpbmcgdmVjNCB2Q29sb3I7CgogIHZvaWQgbWFpbih2b2lkKSB7CiAgICBnbF9Qb3NpdGlvbiA9IHVQTWF0cml4ICogdU1WTWF0cml4ICogdmVjNChhVmVydGV4UG9zaXRpb24sIDEuMCk7CiAgICB2Q29sb3IgPSBhVmVydGV4Q29sb3I7CiAgfQo8L3NjcmlwdD4KICAgIAo=");
document.body.appendChild(div);var matrix3d=require("matrix3d");var rTri=0;var rSquare=0;function initGL(){var canvas=document.createElement("canvas");canvas.width="500";canvas.height="500";canvas.style.border=0;document.body.appendChild(canvas);try{gl=canvas.getContext("experimental-webgl");gl.viewportWidth=canvas.width;gl.viewportHeight=canvas.height}catch(e){}if(!gl){alert("Could not initialise WebGL, sorry :-(")}return gl}function getShader(gl,id){var shaderScript=document.getElementById(id);if(!shaderScript){return null}var str="";var k=shaderScript.firstChild;while(k){if(k.nodeType==3){str+=k.textContent}k=k.nextSibling}var shader;if(shaderScript.type=="x-shader/x-fragment"){shader=gl.createShader(gl.FRAGMENT_SHADER)}else if(shaderScript.type=="x-shader/x-vertex"){shader=gl.createShader(gl.VERTEX_SHADER)}else{return null}gl.shaderSource(shader,str);gl.compileShader(shader);if(!gl.getShaderParameter(shader,gl.COMPILE_STATUS)){alert(gl.getShaderInfoLog(shader));return null}return shader}var shaderProgram;function initShaders(gl){var fragmentShader=getShader(gl,"shader-fs");var vertexShader=getShader(gl,"shader-vs");shaderProgram=gl.createProgram();gl.attachShader(shaderProgram,vertexShader);gl.attachShader(shaderProgram,fragmentShader);gl.linkProgram(shaderProgram);if(!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS)){alert("Could not initialise shaders")}gl.useProgram(shaderProgram);shaderProgram.vertexPositionAttribute=gl.getAttribLocation(shaderProgram,"aVertexPosition");gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);shaderProgram.vertexColorAttribute=gl.getAttribLocation(shaderProgram,"aVertexColor");gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);shaderProgram.pMatrixUniform=gl.getUniformLocation(shaderProgram,"uPMatrix");shaderProgram.mvMatrixUniform=gl.getUniformLocation(shaderProgram,"uMVMatrix")}var mvMatrix=new matrix3d;var pMatrix=new matrix3d;var mvMatrixStack=[];function degToRad(degrees){return degrees*Math.PI/180}function mvPushMatrix(){var copy=mvMatrix.clone();mvMatrixStack.push(copy)}function mvPopMatrix(){if(mvMatrixStack.length==0){throw"Invalid popMatrix!"}mvMatrix=mvMatrixStack.pop()}function setMatrixUniforms(gl){gl.uniformMatrix4fv(shaderProgram.pMatrixUniform,false,pMatrix.toArray3d());gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform,false,mvMatrix.toArray3d())}var triangleVertexPositionBuffer;var triangleVertexColorBuffer;var squareVertexPositionBuffer;var squareVertexColorBuffer;function initBuffers(gl){triangleVertexPositionBuffer=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexPositionBuffer);var vertices=[0,1,0,-1,-1,0,1,-1,0];gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(vertices),gl.STATIC_DRAW);triangleVertexPositionBuffer.itemSize=3;triangleVertexPositionBuffer.numItems=3;triangleVertexColorBuffer=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexColorBuffer);var colors=[1,0,0,1,0,1,0,1,0,0,1,1];gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(colors),gl.STATIC_DRAW);triangleVertexColorBuffer.itemSize=4;triangleVertexColorBuffer.numItems=3;squareVertexPositionBuffer=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,squareVertexPositionBuffer);vertices=[1,1,0,-1,1,0,1,-1,0,-1,-1,0];gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(vertices),gl.STATIC_DRAW);squareVertexPositionBuffer.itemSize=3;squareVertexPositionBuffer.numItems=4;squareVertexColorBuffer=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,squareVertexColorBuffer);colors=[];for(var i=0;i<4;i++){colors=colors.concat([.5,.5,1,1])}gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(colors),gl.STATIC_DRAW);squareVertexColorBuffer.itemSize=4;squareVertexColorBuffer.numItems=4}function perspective(out,fovy,aspect,near,far){var f=1/Math.tan(fovy/2),nf=1/(near-far);out.m11=f/aspect;out.m12=0;out.m13=0;out.m14=0;out.m21=0;out.m22=f;out.m23=0;out.m24=0;out.m31=0;out.m32=0;out.m33=(far+near)*nf;out.m34=-1;out.m41=0;out.m42=0;out.m43=2*far*near*nf;out.m44=0;return out}translate=function(out,v){var x=v[0],y=v[1],z=v[2];out.m41=out.m11*x+out.m21*y+out.m31*z+out.m41;out.m42=out.m12*x+out.m22*y+out.m32*z+out.m42;out.m43=out.m13*x+out.m23*y+out.m33*z+out.m43;out.m44=out.m14*x+out.m24*y+out.m34*z+out.m44;return out};rotate=function(out,rad,axis){var x=axis[0],y=axis[1],z=axis[2],len=Math.sqrt(x*x+y*y+z*z),s,c,t,a=[out.m11,out.m12,out.m13,out.m14,out.m21,out.m22,out.m23,out.m24,out.m31,out.m32,out.m33,out.m34,out.m41,out.m42,out.m43,out.m44],a00,a01,a02,a03,a10,a11,a12,a13,a20,a21,a22,a23,b00,b01,b02,b10,b11,b12,b20,b21,b22;if(Math.abs(len)<1e-6){return null}len=1/len;x*=len;y*=len;z*=len;s=Math.sin(rad);c=Math.cos(rad);t=1-c;a00=a[0];a01=a[1];a02=a[2];a03=a[3];a10=a[4];a11=a[5];a12=a[6];a13=a[7];a20=a[8];a21=a[9];a22=a[10];a23=a[11];b00=x*x*t+c;b01=y*x*t+z*s;b02=z*x*t-y*s;b10=x*y*t-z*s;b11=y*y*t+c;b12=z*y*t+x*s;b20=x*z*t+y*s;b21=y*z*t-x*s;b22=z*z*t+c;out.m11=a00*b00+a10*b01+a20*b02;out.m12=a01*b00+a11*b01+a21*b02;out.m13=a02*b00+a12*b01+a22*b02;out.m14=a03*b00+a13*b01+a23*b02;out.m21=a00*b10+a10*b11+a20*b12;out.m22=a01*b10+a11*b11+a21*b12;out.m23=a02*b10+a12*b11+a22*b12;out.m24=a03*b10+a13*b11+a23*b12;out.m31=a00*b20+a10*b21+a20*b22;out.m32=a01*b20+a11*b21+a21*b22;out.m33=a02*b20+a12*b21+a22*b22;out.m34=a03*b20+a13*b21+a23*b22;return out};function drawScene(gl){gl.viewport(0,0,gl.viewportWidth,gl.viewportHeight);gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);perspective(pMatrix,45*2*Math.PI/360,gl.viewportWidth/gl.viewportHeight,.1,100);mvMatrix=new matrix3d;translate(mvMatrix,[-1.5,0,-7]);mvPushMatrix();rotate(mvMatrix,degToRad(rTri),[0,1,0]);gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexPositionBuffer);gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,triangleVertexPositionBuffer.itemSize,gl.FLOAT,false,0,0);gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexColorBuffer);gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,triangleVertexColorBuffer.itemSize,gl.FLOAT,false,0,0);setMatrixUniforms(gl);gl.drawArrays(gl.TRIANGLES,0,triangleVertexPositionBuffer.numItems);mvPopMatrix();gl.bindBuffer(gl.ARRAY_BUFFER,squareVertexColorBuffer);gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,squareVertexColorBuffer.itemSize,gl.FLOAT,false,0,0);mvPushMatrix();rotate(mvMatrix,degToRad(rSquare),[1,0,0]);translate(mvMatrix,[3,0,0]);gl.bindBuffer(gl.ARRAY_BUFFER,squareVertexPositionBuffer);gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,squareVertexPositionBuffer.itemSize,gl.FLOAT,false,0,0);setMatrixUniforms(gl);gl.drawArrays(gl.TRIANGLE_STRIP,0,squareVertexPositionBuffer.numItems);mvPopMatrix()}function webGLStart(){var gl=initGL();initShaders(gl);initBuffers(gl);gl.clearColor(0,0,0,1);gl.enable(gl.DEPTH_TEST);var equations=require("transition/equations");var Transition=require("transition");var lastTime=0;var animation=new Transition(3e3,equations.bounceOut,function(delta){var current=+new Date;drawScene(gl);rTri=delta*360;rSquare=delta*360;rTri=rTri%360;rSquare=rSquare%360;lastTime=current});animation.start();document.getElementsByTagName("canvas")[0].onclick=function(){if(animation.paused){console.log("resuming");animation.resume()}else{console.log("stopping");console.log(rTri,rSquare);animation.pause()}}}webGLStart();

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "matrix3d": "0.1.0",
    "transition": "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