sketch.html

<!-- vim: sw=2 ts=2 expandtab smartindent ft=javascript
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>WebGL Demo</title>
    <style> document, body { margin: 0px; padding: 0px; overflow: hidden; } </style>
  </head>

  <body>
    <canvas id="glcanvas"></canvas>
    <script>"use strict";

/*
 * [ ] blueprint color scheme on the plane
 *   [ ] grid
 *   [ ] text/greek (corner)
 *   [ ] border
 *   [ ] radially gradient ?
 *
 * [ ] inflate lines before perspective flip
 *
 * [ ] studs 
 * [ ] top frame 
 * [ ] drywall
 *
 * [ ] repeat for however many frames
 *
 */

/* hmm ... */
const data = ({
  "data": {
    "buildings": [
      {
        "floors": [
          {
            "properties": [
              {
                "name": "elevation",
                "currentValue": 3.3500000000000005
              }
            ],
            "zones": []
          },
          {
            "properties": [],
            "zones": [
              {
                "surfaces": []
              }
            ]
          },
          {
            "properties": [
              {
                "name": "level",
                "currentValue": 0
              },
              {
                "name": "elevation",
                "currentValue": 0.2
              }
            ],
            "zones": [
              {
                "surfaces": [
                  {
                    "shapes": [
                      {
                        "vertices": [
                          {
                            "x": -12.780168388795403,
                            "y": -6.539407355163124
                          },
                          {
                            "x": -10.132827695249453,
                            "y": -6.539407355163124
                          },
                          {
                            "x": -10.132827695249453,
                            "y": -5.43003471321051
                          },
                          {
                            "x": -12.780168388795403,
                            "y": -5.43003471321051
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                "surfaces": [
                  {
                    "shapes": [
                      {
                        "vertices": [
                          {
                            "x": -17.638818637928146,
                            "y": 0.06337344227294801
                          },
                          {
                            "x": -17.638819068916835,
                            "y": -5.43003417725016
                          },
                          {
                            "x": -2.626835978033626,
                            "y": -5.430035355024561
                          },
                          {
                            "x": -2.6268356439850127,
                            "y": -1.172231677434357
                          },
                          {
                            "x": 1.230801299281198,
                            "y": -1.1722319800876448
                          },
                          {
                            "x": 1.230801396221269,
                            "y": 0.06337196184526163
                          },
                          {
                            "x": -0.49775605006144874,
                            "y": 0.06337209746030491
                          },
                          {
                            "x": -0.4977559410772011,
                            "y": 1.452491837767456
                          },
                          {
                            "x": -2.5469155137341217,
                            "y": 1.4524919985355367
                          },
                          {
                            "x": -2.5469156227183607,
                            "y": 0.06337225822838795
                          },
                          {
                            "x": -12.780168606993668,
                            "y": 0.06337306108460682
                          },
                          {
                            "x": -12.780168438037014,
                            "y": 2.216904559013114
                          },
                          {
                            "x": -16.050413778959797,
                            "y": 1.709264433672245
                          },
                          {
                            "x": -16.050413908089187,
                            "y": 0.06337331765367456
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                "surfaces": [
                  {
                    "shapes": [
                      {
                        "vertices": [
                          {
                            "x": -2.6268356439850127,
                            "y": -6.539407517133058
                          },
                          {
                            "x": -0.49775677638767196,
                            "y": -6.539407517133058
                          },
                          {
                            "x": -0.49775677638767196,
                            "y": -5.430035427303043
                          },
                          {
                            "x": -2.6268356439850127,
                            "y": -5.430035427303043
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                "surfaces": [
                  {
                    "shapes": [
                      {
                        "vertices": [
                          {
                            "x": -2.5469156146359,
                            "y": 3.7385063905727502
                          },
                          {
                            "x": -2.5469156384773997,
                            "y": 6.049351552935114
                          },
                          {
                            "x": -5.647919360455556,
                            "y": 6.827981372090198
                          },
                          {
                            "x": -5.64791952361278,
                            "y": 3.2713281222539354
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                "surfaces": [
                  {
                    "shapes": [
                      {
                        "vertices": [
                          {
                            "x": -2.5469153942047624,
                            "y": 0.0633736748658841
                          },
                          {
                            "x": -2.5469156146359,
                            "y": 3.7385063905727502
                          },
                          {
                            "x": -11.058287069972524,
                            "y": 2.4729343755914712
                          },
                          {
                            "x": -11.05828687069302,
                            "y": 0.06337316436151684
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                "surfaces": [
                  {
                    "shapes": [
                      {
                        "vertices": [
                          {
                            "x": -0.49775652651448604,
                            "y": 4.0375429891818975
                          },
                          {
                            "x": -0.4977566446034872,
                            "y": 0.0322281016309284
                          },
                          {
                            "x": 3.379101974322438,
                            "y": 0.03222805831270525
                          },
                          {
                            "x": 3.379102025478727,
                            "y": 4.610571356693302
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                "surfaces": [
                  {
                    "shapes": [
                      {
                        "vertices": [
                          {
                            "x": -2.5469153875852535,
                            "y": 1.4524918251183103
                          },
                          {
                            "x": -0.49775629178839675,
                            "y": 1.4524920111846997
                          },
                          {
                            "x": -0.49775652651448604,
                            "y": 4.0375429891818975
                          },
                          {
                            "x": -2.5469156146359,
                            "y": 3.7385063905727502
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                "surfaces": [
                  {
                    "shapes": [
                      {
                        "vertices": [
                          {
                            "x": -2.6268356439850127,
                            "y": -5.430035427303043
                          },
                          {
                            "x": 1.2308012350549649,
                            "y": -5.430035427303043
                          },
                          {
                            "x": 1.2308012350549649,
                            "y": -1.172231677434357
                          },
                          {
                            "x": -2.6268356439850127,
                            "y": -1.172231677434357
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                "surfaces": [
                  {
                    "shapes": [
                      {
                        "vertices": [
                          {
                            "x": 1.2308015603606057,
                            "y": -5.430035115453304
                          },
                          {
                            "x": 4.8631940768045325,
                            "y": -5.430035115453304
                          },
                          {
                            "x": 4.8631940768045325,
                            "y": 0.06337206860599433
                          },
                          {
                            "x": 1.2308015603606057,
                            "y": 0.06337206860599433
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "properties": [],
            "zones": [
              {
                "surfaces": []
              }
            ]
          }
        ]
      }
    ]
  }
}).data.buildings[0];

const ACTIVE_FLOOR = data.floors.findIndex(x => x.properties.some(p => p.name == "level" && p.currentValue == 0));
const WALL_COUNT = (() => {
  let i = 0;
  wallPass(() => i++);
  return i;
})();

/* helper functions for the windows into the data that we care about */
function wallPass(wallback) {
  for (const zone of data.floors[ACTIVE_FLOOR].zones) {
    for (const surface of zone.surfaces) {
      for (const shape of surface.shapes) {
        if (shape.vertices.length == 0) continue;

        for (let i = 0; i < shape.vertices.length; i++) {
          const from = shape.vertices[(i+0) % shape.vertices.length];
          const   to = shape.vertices[(i+1) % shape.vertices.length];
          wallback(from.x, from.y, to.x, to.y);
        }

      }
    }
  }
}
function shapePass(shape_callback) {
  let shape_i = 0;
  for (const zone of data.floors[ACTIVE_FLOOR].zones) {
    for (const surface of zone.surfaces) {
      for (const shape of surface.shapes) {
        if (shape.vertices.length == 0) continue;

        shape_callback(shape.vertices, shape_i);
        shape_i += shape.vertices.length;
      }
    }
  }
}

/* getting the bounds lets us center the camera on the building, no matter where it is. */
const bounds = {
  x: { min: Infinity, max: -Infinity },
  y: { min: Infinity, max: -Infinity },
};
for (const floor of data.floors) {
  for (const zone of data.floors[ACTIVE_FLOOR].zones) {
    zone.surfaces.sort((a, b) => Date.parse(a.lastModified) - Date.parse(b.lastModified));

    for (const surface of zone.surfaces) {
      for (const shape of surface.shapes) {
        for (const vtx of shape.vertices) {
          bounds.x.min = Math.min(bounds.x.min, vtx.x);
          bounds.x.max = Math.max(bounds.x.max, vtx.x);

          bounds.y.min = Math.min(bounds.y.min, vtx.y);
          bounds.y.max = Math.max(bounds.y.max, vtx.y);
        }
      }
    }
  }
}

const canvas = document.getElementById("glcanvas");
const ctx = canvas.getContext('2d');
(window.onresize = () => {
   canvas.width = window.innerWidth*window.devicePixelRatio,
   canvas.height = window.innerHeight*window.devicePixelRatio
   canvas.style.width = window.innerWidth + 'px';
   canvas.style.height = window.innerHeight + 'px';
 })();

const PHASE0_DURATION = 5; /* draw */
const PHASE1_DURATION = 1; /* camera */
const PHASE2_DURATION = 6; /* height */

let last_timestamp, first_timestamp;
requestAnimationFrame(function render(timestamp) {
  requestAnimationFrame(render);

  timestamp *= 0.001;
  first_timestamp ??= timestamp;
  last_timestamp ??= timestamp;
  const deltaTime = timestamp - last_timestamp;
  last_timestamp = timestamp;

  /* { camera things */
  let cam_pivot_x = (bounds.x.min + bounds.x.max) * 0.5;
  let cam_pivot_y = (bounds.y.min + bounds.y.max) * 0.5;
  let cam_pivot_z = 0                                  ;

  let cam_pitch = Math.PI/2;
  let cam_yaw   = Math.PI/2;

  const building_scale = Math.sqrt((bounds.x.min - bounds.x.max)*(bounds.x.min - bounds.x.max) +
                                   (bounds.y.min - bounds.y.max)*(bounds.y.min - bounds.y.max));
  let cam_zoom = building_scale * 0.9;
  /* } camera things */

  /* wall_up_t increases monotonically, height_t is modulated slightly to make building "breathe" */
  let lines_t, wall_up_t = 0, height_t = 0;
  {
    let time = (timestamp - first_timestamp);
    /* skip to your favorite stage */
    // time += PHASE0_DURATION;
    // time += PHASE1_DURATION;
    // time += PHASE2_DURATION;

    lines_t = Math.min(1, time / PHASE0_DURATION);
    time -= PHASE0_DURATION;

    if (time > 0) {
      let cam_t = easeInOutCubic(Math.min(1, time / PHASE1_DURATION));

      cam_pitch = lerp(cam_pitch,      Math.PI*0.70, cam_t);
      cam_yaw   = lerp(cam_yaw  ,     -Math.PI*0.22, cam_t);
      cam_zoom  = lerp(cam_zoom, building_scale*1.0, cam_t);
    }
    time -= PHASE1_DURATION;

    if (time > 0) {
      wall_up_t = height_t = Math.min(1, (time / PHASE2_DURATION));
      cam_pivot_z = lerp(cam_pivot_z, 1, easeInQuint(height_t));
      cam_zoom = lerp(cam_zoom, building_scale * 1.5, easeInQuint(height_t));

      height_t = 1 + 0.05*Math.sin(time * 4);
    }
    time -= PHASE2_DURATION;

    if (time > 0) {
      let whirl_t = time * 0.1;
      cam_pitch += whirl_t * Math.PI * 2;
    }
  }


  const mvp = mat4_create();
  const scratch = mat4_create();
  {
    const FIELD_OF_VIEW = 50 / 180 * Math.PI;
    const ar = window.innerWidth / window.innerHeight;
    const projection = mat4_perspective(mat4_create(), FIELD_OF_VIEW, ar, 0.01, 100.0);

    const view = mat4_create();
    {
      const eye = [cam_zoom, 0, 0, 1];
      {
        mat4_from_z_rotation(scratch, cam_pitch); mat4_mul(view, view, scratch);
        mat4_from_y_rotation(scratch, cam_yaw  ); mat4_mul(view, view, scratch);
        mat4_transform_vec4(eye, eye, view);
      }

      eye[0] += cam_pivot_x;
      eye[1] += cam_pivot_y;
      eye[2] += cam_pivot_z;
      mat4_target_to(
        view,
        eye,
        [cam_pivot_x, cam_pivot_y, cam_pivot_z],
        [          0,           0,           1]
      );
      mat4_invert(view, view);
    }

    mat4_mul(mvp, projection, view);
  }


  ctx.globalAlpha = 1.0;
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.globalAlpha = 1.0;

  const p = [0, 0, 0, 1];
  const transform_p = (x, y, height) => {
    p[0] = x;
    p[1] = y;
    p[2] = height;
    p[3] = 1;
    mat4_transform_vec4(p, p, mvp);
    const w = p[3];
    p[0] = (0 + (p[0]/w*0.5 + 0.5))*canvas.width;
    p[1] = (1 - (p[1]/w*0.5 + 0.5))*canvas.height;
  }

  const HEIGHT = 4 * height_t;
  function heightForWall(wall_i) {
      const wall_t = wall_i / WALL_COUNT;
      const delta_t = wall_up_t - wall_t;
      if (delta_t < 0) return 0;
      let wall_height_t = delta_t / (1 / WALL_COUNT);
      wall_height_t = Math.min(1, Math.max(0, wall_height_t));
      return HEIGHT * wall_height_t;
  }


  {
    const shadow_p = (x, y) => {
      let dir_x = -1.0;
      let dir_y = -1.0 + 0.1*(Math.cos((timestamp * 0.6) % Math.PI*2));
      let dir_z = -1.2 + 0.4*(Math.cos((timestamp * 0.1) % Math.PI*2));
      const dir_len = Math.sqrt(dir_x*dir_x + dir_y*dir_y + dir_z*dir_z);
      dir_x /= dir_len;
      dir_y /= dir_len;
      dir_z /= dir_len;
      ray_hit_plane(
          p,

          x, y, HEIGHT,
          -dir_x, -dir_y, -dir_z,

          0, 0, 0,
          0, 0, 1
      )
      transform_p(p[0], p[1], p[2]);
    }

    {
      ctx.globalAlpha = 0.12;
      ctx.fillStyle = "orange";

      /* walls */
      let wall_i = 0;
      wallPass((from_x, from_y, to_x, to_y) => {
        wall_i++;

        ctx.beginPath();
        const height = heightForWall(wall_i);
        transform_p(from_x, from_y,      0); ctx.moveTo(p[0], p[1]);
        transform_p(from_x, from_y, height); ctx.lineTo(p[0], p[1]);
        transform_p(  to_x,   to_y, height); ctx.lineTo(p[0], p[1]);
        transform_p(  to_x,   to_y,      0); ctx.lineTo(p[0], p[1]);
        ctx.closePath();
        ctx.fill();
      });

      /* floors */
      shapePass((vertices) => {
        ctx.beginPath();

        for (let i = 0; i < vertices.length; i++) {
          const vtx = vertices[i];
          transform_p(vtx.x, vtx.y, 0);

          if (i == 0) ctx.moveTo(p[0], p[1]);
          else        ctx.lineTo(p[0], p[1]);
        }

        ctx.closePath();
        ctx.fillStyle = "black";
        ctx.fill();
        ctx.fillStyle = "orange";
        ctx.globalAlpha = 0.1;
        ctx.fill();
      });
    }
  }

  /* outlines */
  {
    ctx.globalAlpha = 0.5;
    ctx.lineWidth = 0.15 * 40;
    ctx.strokeStyle = 'orange';

    /* floor and ceiling outlines */
    for (const height_on of [false, true]) {
      let wall_i = 0;
      wallPass((from_x, from_y, _to_x, _to_y) => {
        wall_i++;

        const wall_t = wall_i / WALL_COUNT;
        const delta_t = lines_t - wall_t;
        if (delta_t < 0) return;
        let line_t = delta_t / (1 / WALL_COUNT);
        line_t = Math.min(1, Math.max(0, line_t));

        const to_x = lerp(from_x, _to_x, line_t);
        const to_y = lerp(from_y, _to_y, line_t);

        ctx.beginPath();

        const height = height_on ? heightForWall(wall_i) : 0; 
        transform_p(from_x, from_y, height); ctx.moveTo(p[0], p[1]);
        transform_p(  to_x,   to_y, height); ctx.lineTo(p[0], p[1]);

        ctx.closePath();
        ctx.stroke();
      });
    }

    /* vertical lines between floor and ceiling */
    shapePass((vertices, shape_i) => {
      for (let i = 0; i < vertices.length; i++) {
        const vtx = vertices[i];
        const wall_i = shape_i + i;
        const height = heightForWall(wall_i);

        ctx.beginPath();
        transform_p(vtx.x, vtx.y,      0); ctx.moveTo(p[0], p[1]);
        transform_p(vtx.x, vtx.y, height); ctx.lineTo(p[0], p[1]);
        ctx.closePath();
        ctx.stroke();
      }
    });

    ctx.globalAlpha = 1.0;
  }

})

function mat4_create() {
    let out = new Float32Array(16);
    out[0] = 1;
    out[5] = 1;
    out[10] = 1;
    out[15] = 1;
    return out;
}

function mat4_from_scaling(out, x, y=x, z=x) {
    out[0] = x;
    out[1] = 0;
    out[2] = 0;
    out[3] = 0;
    out[4] = 0;
    out[5] = y;
    out[6] = 0;
    out[7] = 0;
    out[8] = 0;
    out[9] = 0;
    out[10] = z;
    out[11] = 0;
    out[12] = 0;
    out[13] = 0;
    out[14] = 0;
    out[15] = 1;
    return out;
}

function mat4_from_translation(out, v) {
    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] = v[0];
    out[13] = v[1];
    out[14] = v[2];
    out[15] = 1;
    return out;
}

function mat4_transform_vec4(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_mul(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;
}

function mat4_target_to(out, eye, target, up=VEC3_UP) {
    let eyex = eye[0], eyey = eye[1], eyez = eye[2],
         upx =  up[0],  upy =  up[1],  upz =  up[2];
    let z0 = eyex - target[0],
        z1 = eyey - target[1],
        z2 = eyez - target[2];
    let len = z0 * z0 + z1 * z1 + z2 * z2;
    if (len > 0) {
        len = 1 / Math.sqrt(len);
        z0 *= len;
        z1 *= len;
        z2 *= len;
    }
    let x0 = upy * z2 - upz * z1,
        x1 = upz * z0 - upx * z2,
        x2 = upx * z1 - upy * z0;
    len = x0 * x0 + x1 * x1 + x2 * x2;
    if (len > 0) {
        len = 1 / Math.sqrt(len);
        x0 *= len;
        x1 *= len;
        x2 *= len;
    }
    out[0] = x0;
    out[1] = x1;
    out[2] = x2;
    out[3] = 0;
    out[4] = z1 * x2 - z2 * x1;
    out[5] = z2 * x0 - z0 * x2;
    out[6] = z0 * x1 - z1 * x0;
    out[7] = 0;
    out[8] = z0;
    out[9] = z1;
    out[10] = z2;
    out[11] = 0;
    out[12] = eyex;
    out[13] = eyey;
    out[14] = eyez;
    out[15] = 1;
    return out;
}

function mat4_perspective(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;
}

function mat4_from_x_rotation(out, rad) {
    let s = Math.sin(rad);
    let c = Math.cos(rad);
    /* Perform axis-specific matrix multiplication */
    out[0] = 1;
    out[1] = 0;
    out[2] = 0;
    out[3] = 0;
    out[4] = 0;
    out[5] = c;
    out[6] = s;
    out[7] = 0;
    out[8] = 0;
    out[9] = -s;
    out[10] = c;
    out[11] = 0;
    out[12] = 0;
    out[13] = 0;
    out[14] = 0;
    out[15] = 1;
    return out;
}

function mat4_from_y_rotation(out, rad) {
    let s = Math.sin(rad);
    let c = Math.cos(rad);
    /* Perform axis-specific matrix multiplication */
    out[0] = c;
    out[1] = 0;
    out[2] = -s;
    out[3] = 0;
    out[4] = 0;
    out[5] = 1;
    out[6] = 0;
    out[7] = 0;
    out[8] = s;
    out[9] = 0;
    out[10] = c;
    out[11] = 0;
    out[12] = 0;
    out[13] = 0;
    out[14] = 0;
    out[15] = 1;
    return out;
}

function mat4_from_z_rotation(out, rad) {
    let s = Math.sin(rad);
    let c = Math.cos(rad);
    /* Perform axis-specific matrix multiplication */
    out[0] = c;
    out[1] = s;
    out[2] = 0;
    out[3] = 0;
    out[4] = -s;
    out[5] = c;
    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;
}

function mat4_invert(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 easeInOutCubic(x) {
  return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
}

function easeInCirc(x) {
  return 1 - Math.sqrt(1 - Math.pow(x, 2));
}

function easeOutBounce(x) {
  const n1 = 7.5625;
  const d1 = 2.75;

  if (x < 1 / d1) {
    return n1 * x * x;
  } else if (x < 2 / d1) {
    return n1 * (x -= 1.5 / d1) * x + 0.75;
  } else if (x < 2.5 / d1) {
    return n1 * (x -= 2.25 / d1) * x + 0.9375;
  } else {
    return n1 * (x -= 2.625 / d1) * x + 0.984375;
  }
}

function easeInQuint(x) {
  return x * x * x * x * x;
}

function easeInOutBack(x) {
  const c1 = 1.70158;
  const c2 = c1 * 1.525;

  return x < 0.5
    ? (Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2)) / 2
    : (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;
}

function lerp(v0, v1, t) { return (1 - t) * v0 + t * v1; }
function inv_lerp(min, max, p) { return (p - min) / (max - min); }
    </script>
  </body>
</html>