Bounce with motion blur

Because Reinder asked

Log in to post a comment.

// You can find the Turtle API reference here: https://turtletoy.net/syntax
Canvas.setpenopacity(0.01);


// movement parameters
const numSteps = 30
const startZ = 4.5
const endZ = -2.4
const startX = 3.6
const endX = -0.3

const startY = 4.
const yInitSpeed = 0

const gravity = -9.8
const ground = -0.76
const bounceSpeedLoss = 0.65 // perun

// sphere render options
const intensity = 10

// instances
var sphere
var camera
var lightPos
function init() {
    camera = new Camera([0, 0, -3], [0, 0, 0])
    lightPos = [-4, 10, -1]
    
    sphere = new Sphere(2, startZ - endZ)
}

// walk
let turtle = new Turtle() // one turtle to rule them all
function walk(i) {
    if (i == 19) return true; // dirty hack to prevent that one overlap
    
    for (let j = 0; j < 10; j++) {
        let t = i/numSteps + 0.5/numSteps + (j - 5) * 0.0004
        let x = lerp(startX, endX, t)
        let y = getBouncingAcceleratedPos(t * 2.7, startY, yInitSpeed, gravity, ground)
        let z = lerp(startZ, endZ, t)

        sphere.setRotationPositionScale(quat.create(), [x, y,  z], 0.05)
        sphere.draw()
    }
    return i < numSteps
}

// Classes
function Sphere(depth, maxDist) {
    this.vertices = []
    this.indices = []
    this.triangles = []
    
    this.modelMatrix = mat4.create()
    this.invModelMatrix = mat4.create()
    
    this.position = [0, 0, 0]
    
    this.setRotationPositionScale = function(rotation, position, scale) {
        this.position = position
        mat4.fromRotationTranslationScale(this.modelMatrix, rotation, position, [scale, scale, scale])
        mat4.invert(this.invModelMatrix, this.modelMatrix)
    }
    
    this.init = function() {
        this.initializeSphere()
    
        for (let i = 0; i < depth; i++) {
            this.subdivide()
        }    
        for (let vertex of this.vertices) {
            vec3.normalize(vertex, vertex);
        }    
    
        for (let vertex of this.vertices) {
            let theta = Math.acos(vertex[2]) // r = 1
            let phi = Math.atan2(vertex[1],vertex[0])
            
            // let newR = 1 + phi * 0.1
            // vertex[0] = newR * Math.sin(theta) * Math.cos(phi)
            // vertex[1] = newR * Math.sin(theta) * Math.sin(phi)
            // vertex[2] = newR * Math.cos(theta)
        }
        
        for (let i = 0; i < this.indices.length; i+=3) {
            let triangle = new Triangle(
                this.vertices[this.indices[i]], 
                this.vertices[this.indices[i + 1]], 
                this.vertices[this.indices[i + 2]])
            this.triangles.push(triangle)
        }        
    }

    this.initializeSphere = function() {
        let X = 0.525731112119133606;
        let Z = 0.850650808352039932;
        this.vertices = [
            [-X, 0.0, Z], [ X, 0.0, Z ], [ -X, 0.0, -Z ], [ X, 0.0, -Z ],
            [ 0.0, Z, X ], [ 0.0, Z, -X ], [ 0.0, -Z, X ], [ 0.0, -Z, -X ],
            [ Z, X, 0.0 ], [ -Z, X, 0.0 ], [ Z, -X, 0.0 ], [ -Z, -X, 0.0 ]
        ]
        this.indices = [
          1, 4, 0,
          4, 9, 0,
          4, 5, 9,
          8, 5, 4,
          1, 8, 4,
          1, 10, 8,
          10, 3, 8,
          8, 3, 5,
          3, 2, 5,
          3, 7, 2,
          3, 10, 7,
          10, 6, 7,
          6, 11, 7,
          6, 0, 11,
          6, 1, 0,
          10, 1, 6,
          11, 0, 9,
          2, 11, 9,
          5, 2, 9,
          11, 2, 7
        ];
    }
    this.subdivide = function() {
        // cache of midpoint indices
        var midpointIndices = [];
        
        // create lists instead...
        var l = this.indices.length;
        var subdividedIndices = [];
        var subdividedVertices = this.vertices;
        
        // subdivide each triangle
        for (var i = 0; i < l - 2; i += 3) {
            // grab indices of triangle
            var i0 = this.indices[i];
            var i1 = this.indices[i + 1];
            var i2 = this.indices[i + 2];
            
            // calculate new indices
            var m01 = this.getMidpointIndex(midpointIndices, subdividedVertices, i0, i1);
            var m12 = this.getMidpointIndex(midpointIndices, subdividedVertices, i1, i2);
            var m02 = this.getMidpointIndex(midpointIndices, subdividedVertices, i2, i0);
            
            subdividedIndices.push(
                i0, m01, m02,
                i1, m12, m01,
                i2, m02, m12,
                m02, m01, m12);
        }
    
        this.indices = subdividedIndices.slice();
    }
    this.getMidpointIndex = function(midpointIndices, vertices, i0, i1) {
        if (midpointIndices[i0] && midpointIndices[i0][i1]) {
          return midpointIndices[i0][i1];
        }
        
        if (midpointIndices[i1] && midpointIndices[i1][i0]) {
          return midpointIndices[i1][i0];
        }
        
        if (!midpointIndices[i0]) midpointIndices[i0] = [];
        return this.addVertex(midpointIndices, vertices, i0, i1);
    }
    this.addVertex = function(midpointIndices, vertices, i0, i1) {
        //there is no vertex between these vertices yet
        var v0 = this.vertices[i0];
        var v1 = this.vertices[i1];
        var midpoint = [0, 0, 0];
        vec3.add(midpoint, v0, v1)
        vec3.multiply(midpoint, midpoint, [0.5, 0.5, 0.5])
        var midpointIndex = vertices.length;
        midpointIndices[i0][i1] = midpointIndex;
        this.vertices.push(midpoint);
        return midpointIndex;
    }
    
    this.draw = function() {
        let distance = this.position[2] - endZ
        let distScale = 1 - Math.min(Math.pow(distance/maxDist, 0.25), 0.999)
        
        //console.log("distance " + distance + ", distScale " + distScale)
        
        for (let triangle of this.triangles) {
            this.drawSphereTriangle(triangle, distScale * intensity)
        }
    }
    
    this.drawSphereTriangle = function(triangle, darkness) {
        let visible = this.isFrontfacing(camera.position, triangle)
        
        if (visible) {
            let frontFacingAmount = this.frontFacingAmount(camera.position, triangle)
            let fresnel = Math.pow((1 - frontFacingAmount), 1.5)
    
            let specular = this.getSpecular(camera.position, lightPos, triangle)
            let shading = 16 * Math.min((1 - specular), 1) * fresnel * darkness

            drawTriangle(triangle, camera, this.modelMatrix, shading)
        }
    }
    
    this.isFrontfacing = function(camPos, triangle) {
        // all in local space
        let localCamera = vec3.transformMat4([], camera.position, this.invModelMatrix)
        let center = getCenter(triangle) // note: it's a unit sphere so point == normal

        let camToTriangle = vec3.subtract([], center, localCamera)
        return vec3.dot(camToTriangle, center)  < 0
    }
    
    this.frontFacingAmount = function(camPos, triangle) {
        let localCamera = vec3.transformMat4([], camera.position, this.invModelMatrix)
        vec3.normalize(localCamera, localCamera)

        let trianglePos = getCenter(triangle)
        vec3.normalize(trianglePos, trianglePos)
        
        return Math.abs(Math.acos(vec3.dot(trianglePos, localCamera)) / (0.5 * Math.PI))
    }

    this.getSpecular = function(camPos, lightPos, triangle) {
        // all in local space
        let localCamera = vec3.transformMat4([], camPos, this.invModelMatrix)
        let localLight = vec3.transformMat4([], lightPos, this.invModelMatrix)
        
        let trianglePos = getCenter(triangle)
        let normal = trianglePos
        let viewDirection = vec3.normalize([], vec3.subtract([], localCamera, trianglePos))
        let lightDirection = vec3.normalize([], localLight)
        
        if (vec3.dot(normal, lightDirection) < 0.0) {
            return 0        
        }
        else {
            let inverted = vec3.scale([], lightDirection, -1)
            let reflected = this.reflect(inverted, normal)
            
            let reflectedDotted = vec3.dot(reflected, viewDirection)

            return Math.pow(Math.max(0.0, reflectedDotted), 1)
        }
    }
    
    this.getDistance = function(camPos, triangle) {
        let worldTrianglePos = vec3.transformMat4([], getCenter(triangle), this.modelMatrix)
        return vec3.distance(camPos, worldTrianglePos)
    }
    
    this.reflect = function(incident, normal) {
        let dotted = vec3.dot(normal, incident)
        let multiplied = vec3.scale([], normal, dotted * 2)
        return vec3.subtract([], incident, multiplied)
    }
    this.init()
}
function Line(v0, v1) {
    //console.log("new line ", v0, v1)
    this.pluckerCoords = [];
    this.v0 = v0
    this.v1 = v1

    this.pluckerCoords[0] =  v0[0] * v1[1]  -    v1[0] * v0[1];
    this.pluckerCoords[1] =  v0[0] * v1[2]  -    v1[0] * v0[2];
    this.pluckerCoords[2] =  v0[0]         -    v1[0];
    this.pluckerCoords[3] =  v0[1] * v1[2]  -    v1[1] * v0[2];
    this.pluckerCoords[4] =  v0[2]         -    v1[2];
    this.pluckerCoords[5] =  v1[1]         -    v0[1];

    this.toString = function() {
        return "<" + printVertex(this.v0) + " | " + printVertex(this.v1) + ">";
    }
}
function Triangle(v0, v1, v2) {
    this.v0 = v0
    this.v1 = v1
    this.v2 = v2

    this.edge = function(index) {
        switch (index) {
            case 0:
                return new Line(this.v0, this.v1);
            case 1:
                return new Line(this.v1, this.v2);
            case 2:
                return new Line(this.v2, this.v0);
            }
    }

    this.toString = function() {
        return "<" + printVertex(this.v0) + " | " + printVertex(this.v1) + " | " + printVertex(this.v2) + ">";
    }
    
    this.transformedCopy = function(matrix) {
        let newV0 = [0, 0, 0]
        let newV1 = [0, 0, 0]
        let newV2 = [0, 0, 0]
        vec3.transformMat4(newV0, this.v0, matrix)
        vec3.transformMat4(newV1, this.v1, matrix)
        vec3.transformMat4(newV2, this.v2, matrix)
        
        return new Triangle(newV0, newV1, newV2)
    }
}
function Camera(position, lookAt) {
    this.position = position
    this.lookAt = lookAt
    this.fov = 0.5
    this.nearPlane = 1
    this.farPlane = 1000
    this.aspect = 1
    
    this.projectionMatrix = []
    this.cameraMatrix = []
    this.dirty = true
    
    this.getPerspectiveMatrix = function() {
        this.updateMatrices()
        return this.projectionMatrix
    }
    
    this.getCameraMatrix = function() {
        this.updateMatrices()
        return this.cameraMatrix
    }
    
    this.updateMatrices = function() {
        if (this.dirty) {
            this.projectionMatrix = mat4.create()
            mat4.perspective(this.projectionMatrix, this.fov, this.aspect, this.nearPlane, this.farPlane)

            this.cameraMatrix = mat4.create()
            mat4.lookAt(this.cameraMatrix, camera.position, camera.lookAt, [0,1,0])
            
            this.dirty = false
        }
    }
}

// Utility functions
function drawTriangle(triangle, camera, modelMatrix, levels = 1) {
    let center = getCenter(triangle)

    let levelsRound = Math.round(levels)
    for (let i = 1; i < levelsRound + 1; i++) {
        let levelScale = i/(levelsRound + 1)

        turtle.penup()
        turtle.goto(renderVertex(lerp3(center, triangle.v2, levelScale), camera, modelMatrix))
        turtle.pendown()
        
        turtle.goto(renderVertex(lerp3(center, triangle.v0, levelScale), camera, modelMatrix))
        turtle.goto(renderVertex(lerp3(center, triangle.v1, levelScale), camera, modelMatrix))
        turtle.goto(renderVertex(lerp3(center, triangle.v2, levelScale), camera, modelMatrix))
    }
}

function renderVertex(vertex, camera, modelMatrix = []) {
    if (typeof finalMatrix == "undefined") finalMatrix = mat4.create()
    if (modelMatrix.length > 0) {
        mat4.multiply(finalMatrix, camera.getCameraMatrix(), modelMatrix)
        mat4.multiply(finalMatrix, camera.getPerspectiveMatrix(), finalMatrix)
    }
    else {
        mat4.multiply(finalMatrix, camera.getPerspectiveMatrix(), cameraMatrix)
    }
    
    vertex = vertex.concat(1)
    vec4.transformMat4(vertex, vertex, finalMatrix)
    
    x = vertex[0] / vertex[3]
    y = vertex[1] / vertex[3]
    z = vertex[2] / vertex[3]
    
    // to canvas coords
    x = -x * 50
    y = -y * 50    
    
    return [x, y, z]
}

function lerp3(from, to, amount) {
    let x = lerp(from[0], to[0], amount)
    let y = lerp(from[1], to[1], amount)
    let z = lerp(from[2], to[2], amount)
    return [x, y, z]
}

function lerp(a, b, amount) {
    return a * (1 - amount) + b * amount
}

function getCenter(triangle) {
    return [
        (triangle.v0[0] + triangle.v1[0] + triangle.v2[0]) / 3,
        (triangle.v0[1] + triangle.v1[1] + triangle.v2[1]) / 3,
        (triangle.v0[2] + triangle.v1[2] + triangle.v2[2]) / 3,
        ]
}

// Movement untility functions
const MAX_BOUNCES = 100

function getBouncingAcceleratedPos(t, start, startSpeed, acceleration, ground) {
    let y = getAcceleratedPos(t, start, startSpeed, acceleration)
    if (y > ground) return y
    
    let bounces = 0
    let tOffset = 0
    let posOffset = start
    let speedOffset = startSpeed
    while (y < ground && bounces++ < MAX_BOUNCES) {
        let tBounce = getTimeForAcceleratedPos(ground, posOffset, speedOffset, acceleration)
        let afterBounceSpeed = getAcceleratedSpeed(tBounce, speedOffset, acceleration) * bounceSpeedLoss * -1

        posOffset = ground
        speedOffset = afterBounceSpeed
        tOffset += tBounce

        y = getAcceleratedPos(t - tOffset, posOffset, speedOffset, gravity)
    }
    return y
}

function getAcceleratedPos(t, start, startSpeed, acceleration) {
    return start + startSpeed * t + 0.5 * acceleration * Math.pow(t, 2)
}

function getAcceleratedSpeed(t, startSpeed, acceleration) {
    return acceleration * t + startSpeed
}

function getTimeForAcceleratedPos(pos, start, startSpeed, acceleration) {
    if (acceleration == 0) return 0
    
    let result1 = (Math.sqrt(Math.pow(startSpeed, 2) - 2 * acceleration * (start - pos)) - startSpeed) / acceleration
    let result2 = (-Math.sqrt(Math.pow(startSpeed, 2) - 2 * acceleration * (start - pos)) - startSpeed) / acceleration
    
    // assuming we only want the positive result
    return Math.max(result1, result2)
}

// gl-matrix
EPSILON = 0.00001;
halfToRad = 0.5 * Math.PI / 180.0;
function vec3() {
    this.add = function(out, a, b) {
      out[0] = a[0] + b[0];
      out[1] = a[1] + b[1];
      out[2] = a[2] + b[2];
      return out;
    }
    this.subtract = function(out, a, b) {
      out[0] = a[0] - b[0];
      out[1] = a[1] - b[1];
      out[2] = a[2] - b[2];
      return out;
    }    
    this.multiply = function(out, a, b) {
      out[0] = a[0] * b[0];
      out[1] = a[1] * b[1];
      out[2] = a[2] * b[2];
      return out;
    }
    this.normalize = function(out, a) {
      let x = a[0];
      let y = a[1];
      let z = a[2];
      let len = x*x + y*y + z*z;
      if (len > 0) {
        //TODO: evaluate use of glm_invsqrt here?
        len = 1 / Math.sqrt(len);
      }
      out[0] = a[0] * len;
      out[1] = a[1] * len;
      out[2] = a[2] * len;
      return out;
    }    
    this.scale = function(out, a, b) {
      out[0] = a[0] * b;
      out[1] = a[1] * b;
      out[2] = a[2] * b;
      return out;
    }
    this.distance = function(a, b) {
        let x = b[0] - a[0];
        let y = b[1] - a[1];
        let z = b[2] - a[2];
        return Math.sqrt(x*x + y*y + z*z);
    }
    this.dot = function (a, b) {
        return a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
    }
    this.transformMat4 = function(out, a, m) {
      let x = a[0], y = a[1], z = a[2];
      let w = m[3] * x + m[7] * y + m[11] * z + m[15];
      w = w || 1.0;
      out[0] = (m[0] * x + m[4] * y + m[8] * z + m[12]) / w;
      out[1] = (m[1] * x + m[5] * y + m[9] * z + m[13]) / w;
      out[2] = (m[2] * x + m[6] * y + m[10] * z + m[14]) / w;
      return out;
    }
}
function vec4() {
    this.transformMat4 = function(out, a, m) {
      let x = a[0], y = a[1], z = a[2], w = a[3];
      out[0] = m[0] * x + m[4] * y + m[8] * z + m[12] * w;
      out[1] = m[1] * x + m[5] * y + m[9] * z + m[13] * w;
      out[2] = m[2] * x + m[6] * y + m[10] * z + m[14] * w;
      out[3] = m[3] * x + m[7] * y + m[11] * z + m[15] * w;
      return out;
    }
}
function mat4() {
    this.create = function() {
        return new Float32Array(16)
    }
    
    this.identity = function(out) {
      out[0] = 1;
      out[1] = 0;
      out[2] = 0;
      out[3] = 0;
      out[4] = 0;
      out[5] = 1;
      out[6] = 0;
      out[7] = 0;
      out[8] = 0;
      out[9] = 0;
      out[10] = 1;
      out[11] = 0;
      out[12] = 0;
      out[13] = 0;
      out[14] = 0;
      out[15] = 1;
      return out;
    }    
    
    this.lookAt = function(out, eye, center, up) {
      let x0, x1, x2, y0, y1, y2, z0, z1, z2, len;
      let eyex = eye[0];
      let eyey = eye[1];
      let eyez = eye[2];
      let upx = up[0];
      let upy = up[1];
      let upz = up[2];
      let centerx = center[0];
      let centery = center[1];
      let centerz = center[2];
      if (Math.abs(eyex - centerx) < EPSILON &&
          Math.abs(eyey - centery) < EPSILON &&
          Math.abs(eyez - centerz) < EPSILON) {
        return identity(out);
      }
      z0 = eyex - centerx;
      z1 = eyey - centery;
      z2 = eyez - centerz;
      len = 1 / Math.sqrt(z0 * z0 + z1 * z1 + z2 * z2);
      z0 *= len;
      z1 *= len;
      z2 *= len;
      x0 = upy * z2 - upz * z1;
      x1 = upz * z0 - upx * z2;
      x2 = upx * z1 - upy * z0;
      len = Math.sqrt(x0 * x0 + x1 * x1 + x2 * x2);
      if (!len) {
        x0 = 0;
        x1 = 0;
        x2 = 0;
      } else {
        len = 1 / len;
        x0 *= len;
        x1 *= len;
        x2 *= len;
      }
      y0 = z1 * x2 - z2 * x1;
      y1 = z2 * x0 - z0 * x2;
      y2 = z0 * x1 - z1 * x0;
      len = Math.sqrt(y0 * y0 + y1 * y1 + y2 * y2);
      if (!len) {
        y0 = 0;
        y1 = 0;
        y2 = 0;
      } else {
        len = 1 / len;
        y0 *= len;
        y1 *= len;
        y2 *= len;
      }
      out[0] = x0;
      out[1] = y0;
      out[2] = z0;
      out[3] = 0;
      out[4] = x1;
      out[5] = y1;
      out[6] = z1;
      out[7] = 0;
      out[8] = x2;
      out[9] = y2;
      out[10] = z2;
      out[11] = 0;
      out[12] = -(x0 * eyex + x1 * eyey + x2 * eyez);
      out[13] = -(y0 * eyex + y1 * eyey + y2 * eyez);
      out[14] = -(z0 * eyex + z1 * eyey + z2 * eyez);
      out[15] = 1;
      return out;
    }

    this.multiply = function(out, a, b) {
      let a00 = a[0], a01 = a[1], a02 = a[2], a03 = a[3];
      let a10 = a[4], a11 = a[5], a12 = a[6], a13 = a[7];
      let a20 = a[8], a21 = a[9], a22 = a[10], a23 = a[11];
      let a30 = a[12], a31 = a[13], a32 = a[14], a33 = a[15];
      // Cache only the current line of the second matrix
      let b0  = b[0], b1 = b[1], b2 = b[2], b3 = b[3];
      out[0] = b0*a00 + b1*a10 + b2*a20 + b3*a30;
      out[1] = b0*a01 + b1*a11 + b2*a21 + b3*a31;
      out[2] = b0*a02 + b1*a12 + b2*a22 + b3*a32;
      out[3] = b0*a03 + b1*a13 + b2*a23 + b3*a33;
      b0 = b[4]; b1 = b[5]; b2 = b[6]; b3 = b[7];
      out[4] = b0*a00 + b1*a10 + b2*a20 + b3*a30;
      out[5] = b0*a01 + b1*a11 + b2*a21 + b3*a31;
      out[6] = b0*a02 + b1*a12 + b2*a22 + b3*a32;
      out[7] = b0*a03 + b1*a13 + b2*a23 + b3*a33;
      b0 = b[8]; b1 = b[9]; b2 = b[10]; b3 = b[11];
      out[8] = b0*a00 + b1*a10 + b2*a20 + b3*a30;
      out[9] = b0*a01 + b1*a11 + b2*a21 + b3*a31;
      out[10] = b0*a02 + b1*a12 + b2*a22 + b3*a32;
      out[11] = b0*a03 + b1*a13 + b2*a23 + b3*a33;
      b0 = b[12]; b1 = b[13]; b2 = b[14]; b3 = b[15];
      out[12] = b0*a00 + b1*a10 + b2*a20 + b3*a30;
      out[13] = b0*a01 + b1*a11 + b2*a21 + b3*a31;
      out[14] = b0*a02 + b1*a12 + b2*a22 + b3*a32;
      out[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33;
      return out;
    }
    
    this.perspective = function(out, fovy, aspect, near, far) {
      let f = 1.0 / Math.tan(fovy / 2), nf;
      out[0] = f / aspect;
      out[1] = 0;
      out[2] = 0;
      out[3] = 0;
      out[4] = 0;
      out[5] = f;
      out[6] = 0;
      out[7] = 0;
      out[8] = 0;
      out[9] = 0;
      out[11] = -1;
      out[12] = 0;
      out[13] = 0;
      out[15] = 0;
      if (far != null && far !== Infinity) {
        nf = 1 / (near - far);
        out[10] = (far + near) * nf;
        out[14] = (2 * far * near) * nf;
      } else {
        out[10] = -1;
        out[14] = -2 * near;
      }
      return out;
    }
        
    this.fromRotationTranslationScale = function(out, q, v, s) {
      // Quaternion math
      let x = q[0], y = q[1], z = q[2], w = q[3];
      let x2 = x + x;
      let y2 = y + y;
      let z2 = z + z;
      let xx = x * x2;
      let xy = x * y2;
      let xz = x * z2;
      let yy = y * y2;
      let yz = y * z2;
      let zz = z * z2;
      let wx = w * x2;
      let wy = w * y2;
      let wz = w * z2;
      let sx = s[0];
      let sy = s[1];
      let sz = s[2];
      out[0] = (1 - (yy + zz)) * sx;
      out[1] = (xy + wz) * sx;
      out[2] = (xz - wy) * sx;
      out[3] = 0;
      out[4] = (xy - wz) * sy;
      out[5] = (1 - (xx + zz)) * sy;
      out[6] = (yz + wx) * sy;
      out[7] = 0;
      out[8] = (xz + wy) * sz;
      out[9] = (yz - wx) * sz;
      out[10] = (1 - (xx + yy)) * sz;
      out[11] = 0;
      out[12] = v[0];
      out[13] = v[1];
      out[14] = v[2];
      out[15] = 1;
      return out;
    }
    
    this.invert = function(out, a) {
      let a00 = a[0], a01 = a[1], a02 = a[2], a03 = a[3];
      let a10 = a[4], a11 = a[5], a12 = a[6], a13 = a[7];
      let a20 = a[8], a21 = a[9], a22 = a[10], a23 = a[11];
      let a30 = a[12], a31 = a[13], a32 = a[14], a33 = a[15];
      let b00 = a00 * a11 - a01 * a10;
      let b01 = a00 * a12 - a02 * a10;
      let b02 = a00 * a13 - a03 * a10;
      let b03 = a01 * a12 - a02 * a11;
      let b04 = a01 * a13 - a03 * a11;
      let b05 = a02 * a13 - a03 * a12;
      let b06 = a20 * a31 - a21 * a30;
      let b07 = a20 * a32 - a22 * a30;
      let b08 = a20 * a33 - a23 * a30;
      let b09 = a21 * a32 - a22 * a31;
      let b10 = a21 * a33 - a23 * a31;
      let b11 = a22 * a33 - a23 * a32;
      // Calculate the determinant
      let det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06;
      if (!det) {
        return null;
      }
      det = 1.0 / det;
      out[0] = (a11 * b11 - a12 * b10 + a13 * b09) * det;
      out[1] = (a02 * b10 - a01 * b11 - a03 * b09) * det;
      out[2] = (a31 * b05 - a32 * b04 + a33 * b03) * det;
      out[3] = (a22 * b04 - a21 * b05 - a23 * b03) * det;
      out[4] = (a12 * b08 - a10 * b11 - a13 * b07) * det;
      out[5] = (a00 * b11 - a02 * b08 + a03 * b07) * det;
      out[6] = (a32 * b02 - a30 * b05 - a33 * b01) * det;
      out[7] = (a20 * b05 - a22 * b02 + a23 * b01) * det;
      out[8] = (a10 * b10 - a11 * b08 + a13 * b06) * det;
      out[9] = (a01 * b08 - a00 * b10 - a03 * b06) * det;
      out[10] = (a30 * b04 - a31 * b02 + a33 * b00) * det;
      out[11] = (a21 * b02 - a20 * b04 - a23 * b00) * det;
      out[12] = (a11 * b07 - a10 * b09 - a12 * b06) * det;
      out[13] = (a00 * b09 - a01 * b07 + a02 * b06) * det;
      out[14] = (a31 * b01 - a30 * b03 - a32 * b00) * det;
      out[15] = (a20 * b03 - a21 * b01 + a22 * b00) * det;
      return out;
    }    
}
function quat() {
    this.create = function() {
      let out = [];
        out[0] = 0;
        out[1] = 0;
        out[2] = 0;
        out[3] = 1;
        return out;
    }
    this.fromEuler = function(out, x, y, z) {
        x *= halfToRad;
        y *= halfToRad;
        z *= halfToRad;
        let sx = Math.sin(x);
        let cx = Math.cos(x);
        let sy = Math.sin(y);
        let cy = Math.cos(y);
        let sz = Math.sin(z);
        let cz = Math.cos(z);
        out[0] = sx * cy * cz - cx * sy * sz;
        out[1] = cx * sy * cz + sx * cy * sz;
        out[2] = cx * cy * sz - sx * sy * cz;
        out[3] = cx * cy * cz + sx * sy * sz;
        return out;
    }
}
vec3 = new vec3() // mimic static functions behavior
vec4 = new vec4()
quat = new quat()
mat4 = new mat4()
// end gl-matrix

init()