remove gl-matrix dependency

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sr-puzzlegen",
-  "version": "1.0.3-beta.22",
+  "version": "1.0.3-beta.23",
   "description": "",
   "main": "dist/lib/index.js",
   "types": "dist/lib/index.d.ts",
@@ -32,9 +32,7 @@
     "webpack-cli": "^4.3.1",
     "webpack-dev-server": "^4.0.0-beta.0"
   },
-  "dependencies": {
-    "gl-matrix": "^3.3.0"
-  },
+  "dependencies": {},
   "repository": {
     "type": "git",
     "url": "git://github.com/tdecker91/puzzle-visualizer.git"

src/algorithms/cube.ts

@@ -98,7 +98,9 @@ function getSlices(rawSlices, outerBlockIndicator): number {
       return intValue;
     }
 
-    throw new Error(`Invalid outer block move (${intValue}) must be greater than 1`);
+    throw new Error(
+      `Invalid outer block move (${intValue}) must be greater than 1`
+    );
   }
 }
 

src/demos/cameraValues/cameraValues.ts

@@ -2,7 +2,6 @@ import { MegaminxSimulator } from './../../simulator/megaminx/megaminxSimulator'
 import { PINK, LIGHT_YELLOW, GREY, LIGHT_GREEN, PURPLE, DARK_BLUE } from './../../puzzles/colors';
 import { PyraminxSimulator } from '../../simulator/pyraminx/pyraminxSimulator';
 import { RED, BLUE, WHITE, ORANGE, GREEN } from '../../puzzles/colors';
-import { mat4 } from 'gl-matrix';
 import { HtmlSvgRenderer } from '../../rendering/htmlSvgRenderer';
 import { Square1Net } from '../../puzzles/square1/square1Net';
 import { Square1 } from '../../puzzles/square1/square1';
@@ -19,6 +18,7 @@ import { Group } from '../../geometry/group';
 import { Camera } from '../../rendering/camera';
 import { Scene } from '../../rendering/scene';
 import { YELLOW } from '../../puzzles/colors';
+import { Matrix4 } from '../../math/matrix';
 
 let camera: Camera = new Camera();
 let g: Group = new Group();
@@ -48,7 +48,7 @@ let strokeWidth: number = .02;
 
 function setInputs() {
   if (camera && camera.matrix) {
-    camera.matrix.forEach((value, index) => {
+    camera.matrix.values.forEach((value, index) => {
       (<any>document.getElementById(`c${index + 1}`)).value = value;
     });
   }
@@ -83,7 +83,7 @@ export function getInputs() {
   let m15 = parseFloat((<any>document.getElementById(`c15`)).value);
   let m16 = parseFloat((<any>document.getElementById(`c16`)).value);
 
-  camera.matrix = mat4.fromValues(m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11, m12, m13, m14, m15, m16)
+  camera.matrix = Matrix4.fromValues(m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11, m12, m13, m14, m15, m16)
 
   width = parseFloat((<any>document.getElementById(`width`)).value);
   height = parseFloat((<any>document.getElementById(`height`)).value);
@@ -193,10 +193,10 @@ export function renderDemo() {
   let downX = 0;
   let downY = 0;
 
-  let identity = mat4.create();
-  let accRot = mat4.create();
-  let xRot = mat4.create();
-  let yRot = mat4.create();
+  let identity = new Matrix4();
+  let accRot = new Matrix4();
+  let xRot = new Matrix4();
+  let yRot = new Matrix4();
 
   renderer.domElement.addEventListener('mousedown', e => {
     down = true;
@@ -221,11 +221,11 @@ export function renderDemo() {
       const [diffX, diffY] = [e.x - downX, e.y - downY];
       [downX, downY] = [e.x, e.y];
 
-      mat4.fromRotation(xRot, diffY/128, [1,0,0]);
-      mat4.fromRotation(yRot, diffX/128, [0,1,0]);
+      xRot = Matrix4.fromXRotation(diffY / 128);
+      yRot = Matrix4.fromYRotation(diffX / 128);
 
-      mat4.multiply(g.matrix, g.matrix, xRot);
-      mat4.multiply(g.matrix, g.matrix, yRot);
+      g.matrix.multiply(xRot);
+      g.matrix.multiply(yRot);
 
       window.requestAnimationFrame(() => renderer.render(scene, camera));
     }
@@ -263,7 +263,7 @@ export function svgStep() {
   ].forEach(puzzle => {
     if (puzzle && puzzle.group) {
 
-      puzzle.group.rotate(Math.PI/32, [1,1, 0]);
+      puzzle.group.rotate(Math.PI / 32, 1, 1, 0);
     } 
   });
 

src/demos/mouseRotation/mouseRotation.ts

@@ -1,9 +1,10 @@
-import { mat4 } from 'gl-matrix';
 import { HtmlSvgRenderer } from './../../rendering/htmlSvgRenderer';
 import { Group } from "../../geometry/group";
 import { RubiksCube } from "../../puzzles/rubiksCube/rubiksCube";
 import { Camera } from "../../rendering/camera";
 import { Scene } from "../../rendering/scene";
+import { createSquare1 } from '../../visualizer/puzzleCreator';
+import { Matrix4 } from '../../math/matrix';
 
 let renderer: HtmlSvgRenderer;
 let camera: Camera;
@@ -60,15 +61,15 @@ function throttle(callback, interval) {
 document.addEventListener("DOMContentLoaded", function (event) {
   renderDemo();
 
-  let originalMat: mat4 = mat4.create();
+  let originalMat: Matrix4 = new Matrix4();
 
   let frameOut: HTMLSpanElement = document.getElementById("frame-out");
   let start = new Date().getTime();
 
   renderer.svgElement.addEventListener('mousedown', e => {
     mouseDown = true;
     start = new Date().getTime();
-    mat4.copy(originalMat, rotationGroup.matrix);
+    Matrix4.copy(originalMat, rotationGroup.matrix);
     x = e.x;
     y = e.y;
   });
@@ -82,18 +83,16 @@ document.addEventListener("DOMContentLoaded", function (event) {
       start = new Date().getTime();
       const [diffX, diffY] = [e.x - x, e.y - y];
 
-      let xRotation = mat4.fromXRotation(mat4.create(), diffY/128);
-      let yRotation = mat4.fromYRotation(mat4.create(), diffX/128);
+      let xRotation = Matrix4.fromXRotation(diffY / 128);
+      let yRotation = Matrix4.fromYRotation(diffX / 128);
 
       // Matrix to accumulate x and y rotations from mouse movements
-      let acc: mat4 = mat4.create();
+      let acc: Matrix4 = new Matrix4();
 
-      mat4.multiply(acc, acc, xRotation);
-      mat4.multiply(acc, acc, yRotation);
+      acc.multiply(xRotation);
+      acc.multiply(yRotation);
 
-      rotationGroup.matrix = mat4.multiply(rotationGroup.matrix, acc, originalMat);
-
-      valuesElement.innerHTML = mat4String(rotationGroup.matrix);
+      Matrix4.multiply(rotationGroup.matrix, acc, originalMat);
       renderer.render(scene, camera);
 
       const time = new Date().getTime() - start;
@@ -111,15 +110,16 @@ function round(n: number): string {
   return n.toFixed(3);
 }
 
-function mat4String(m: mat4) {
-  return `${round(m[0])}\t\t${round(m[1])}\t\t${round(m[2])}\t\t${round(m[3])}\n` +
-  `${round(m[4])}\t\t${round(m[5])}\t\t${round(m[6])}\t\t${round(m[7])}\n` +
-  `${round(m[8])}\t\t${round(m[9])}\t\t${round(m[10])}\t\t${round(m[11])}\n` +
-  `${round(m[12])}\t\t${round(m[13])}\t\t${round(m[14])}\t\t${round(m[15])}\n`;
+function mat4String(m: Matrix4) {
+  return `${round(m.values[0])}\t\t${round(m.values[1])}\t\t${round(m.values[2])}\t\t${round(m.values[3])}\n` +
+    `${round(m.values[4])}\t\t${round(m.values[5])}\t\t${round(m.values[6])}\t\t${round(m.values[7])}\n` +
+    `${round(m.values[8])}\t\t${round(m.values[9])}\t\t${round(m.values[10])}\t\t${round(m.values[11])}\n` +
+    `${round(m.values[12])}\t\t${round(m.values[13])}\t\t${round(m.values[14])}\t\t${round(m.values[15])}\n`;
 }
 
 export function reset() {
-  rotationGroup.matrix = mat4.create();
+
+  rotationGroup.matrix = new Matrix4();
   valuesElement.innerHTML = mat4String(rotationGroup.matrix);
   renderer.render(scene, camera);
 

src/demos/puzzles/puzzles.ts

@@ -1,6 +1,6 @@
 import { SVGVisualizerOptions } from './../../visualizer/svg';
 import { VisualizerType } from './../../visualizer/enum';
-import { PNG, PNGVisualizerOptions } from '../../visualizer/png';
+import { PNG } from '../../visualizer/png';
 
 function renderDefault() {
   const options: SVGVisualizerOptions = {

src/demos/teapot/teapot.ts

@@ -1,11 +1,12 @@
 import { faces, vertices } from './data';
 import { Geometry } from '../../geometry/geometry';
-import { mat4, vec3 } from 'gl-matrix';
 import { Face } from '../../geometry/face';
 import { Camera } from '../../rendering/camera';
 import { Scene } from '../../rendering/scene';
 import { Group } from '../../geometry/group';
 import { HtmlCanvasRenderer } from '../../rendering/htmlCanvasRenderer';
+import { Vector3 } from '../../math/vector';
+import { Matrix4 } from '../../math/matrix';
 
 let camera: Camera = new Camera();
 let g: Group = new Group();
@@ -20,22 +21,22 @@ let width: number = 500;
 let height: number = 500;
 
 const teapot = createTeapot();
-mat4.translate(camera.matrix, camera.matrix, [0, -1.5, -10]);
+camera.matrix.translate(0, -1.5, -10)
 scene = new Scene();
 renderer = new HtmlCanvasRenderer(width, height, .25);
 
 g.addObject(teapot);
 scene.add(g);
 
 export function renderDemo() {
-  teapot.matrix = mat4.rotate(teapot.matrix, teapot.matrix, Math.PI / 16, [1, 1, 0]);
+  teapot.matrix.rotate(Math.PI / 16, 1, 1, 0);
   renderer.render(scene, camera);
 }
 
 function createTeapot(): Geometry {
   const v = vertices.map(vertex => {
     const [_, x, y, z] = vertex.split(" ");
-    return vec3.fromValues(parseFloat(x), parseFloat(y), parseFloat(z));
+    return Vector3.fromValues(parseFloat(x), parseFloat(y), parseFloat(z));
   })
 
   let outline = { value: "#DDD", stroke: "#FFF" };
@@ -65,13 +66,13 @@ document.addEventListener("DOMContentLoaded", function (event) {
   document.getElementById('teapot').appendChild(renderer.domElement);
   renderDemo();
 
-  let originalMat: mat4 = mat4.create();
+  let originalMat: Matrix4 = new Matrix4();
   let start = new Date().getTime();
 
   renderer.domElement.addEventListener('mousedown', e => {
     mouseDown = true;
     start = new Date().getTime();
-    mat4.copy(originalMat, g.matrix);
+    Matrix4.copy(originalMat, g.matrix);
     x = e.x;
     y = e.y;
   });
@@ -85,16 +86,16 @@ document.addEventListener("DOMContentLoaded", function (event) {
       start = new Date().getTime();
       const [diffX, diffY] = [e.x - x, e.y - y];
 
-      let xRotation = mat4.fromXRotation(mat4.create(), diffY / 128);
-      let yRotation = mat4.fromYRotation(mat4.create(), diffX / 128);
+      let xRotation = Matrix4.fromXRotation(diffY / 128);
+      let yRotation = Matrix4.fromYRotation(diffX / 128);
 
       // Matrix to accumulate x and y rotations from mouse movements
-      let acc: mat4 = mat4.create();
+      let acc: Matrix4 = new Matrix4();
 
-      mat4.multiply(acc, acc, xRotation);
-      mat4.multiply(acc, acc, yRotation);
+      acc.multiply(xRotation);
+      acc.multiply(yRotation);
 
-      g.matrix = mat4.multiply(g.matrix, acc, originalMat);
+      Matrix4.multiply(g.matrix, acc, originalMat);
       renderer.render(scene, camera);
     }
   }, 10));

src/geometry/arrow.ts

@@ -1,12 +1,12 @@
-import { vec3 } from "gl-matrix";
 import { calculateCentroid } from "../math/utils";
+import { Vector3 } from "../math/vector";
 import { Object3D } from "./object3d";
 
 export class Arrow extends Object3D {
-  p1: vec3;
-  p2: vec3;
+  p1: Vector3;
+  p2: Vector3;
 
-  constructor(p1: vec3, p2: vec3) {
+  constructor(p1: Vector3, p2: Vector3) {
     super();
 
     this.p1 = p1;

src/geometry/cube.ts

@@ -1,6 +1,6 @@
 import { Geometry } from "./geometry";
-import { vec3 } from "gl-matrix";
 import { IFace, Face } from "./face";
+import { Vector3 } from "../math/vector";
 
 export class Cube extends Geometry {
   /**
@@ -13,15 +13,15 @@ export class Cube extends Geometry {
    *       7 - - - 6
    */
   constructor(width: number) {
-    const vertices: vec3[] = [
-      [-width / 2, width / 2, width / 2],
-      [width / 2, width / 2, width / 2],
-      [width / 2, -width / 2, width / 2],
-      [-width / 2, -width / 2, width / 2],
-      [-width / 2, width / 2, -width / 2],
-      [width / 2, width / 2, -width / 2],
-      [width / 2, -width / 2, -width / 2],
-      [-width / 2, -width / 2, -width / 2],
+    const vertices: Vector3[] = [
+      Vector3.fromValues(-width / 2, width / 2, width / 2),
+      Vector3.fromValues(width / 2, width / 2, width / 2),
+      Vector3.fromValues(width / 2, -width / 2, width / 2),
+      Vector3.fromValues(-width / 2, -width / 2, width / 2),
+      Vector3.fromValues(-width / 2, width / 2, -width / 2),
+      Vector3.fromValues(width / 2, width / 2, -width / 2),
+      Vector3.fromValues(width / 2, -width / 2, -width / 2),
+      Vector3.fromValues(-width / 2, -width / 2, -width / 2),
     ];
     const faces: IFace[] = [
       new Face([0, 1, 2, 3], vertices),
@@ -31,6 +31,7 @@ export class Cube extends Geometry {
       new Face([1, 0, 4, 5], vertices),
       new Face([0, 3, 7, 4], vertices),
     ];
+
     super(vertices, faces);
   }
 }