store/load

3 files changed, 57 insertions, 18 deletions

diff --git a/package-lock.json b/package-lock.json
index ee6ae48..ea18023 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2950,6 +2950,11 @@
       "integrity": "sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==",
       "dev": true
     },
+    "file-saver": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz",
+      "integrity": "sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw=="
+    },
     "fill-range": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
@@ -4624,21 +4629,6 @@
         "ws": "0.4.25"
       }
     },
-    "leapjs-plugins": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/leapjs-plugins/-/leapjs-plugins-0.1.12.tgz",
-      "integrity": "sha1-EteObjgMGHd4ESxvJtoDgWqTnyk=",
-      "requires": {
-        "three": "^0.69.0"
-      },
-      "dependencies": {
-        "three": {
-          "version": "0.69.0",
-          "resolved": "https://registry.npmjs.org/three/-/three-0.69.0.tgz",
-          "integrity": "sha1-21VlOMtNejpmZcdS7Dnt/KMHIo8="
-        }
-      }
-    },
     "loader-runner": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
diff --git a/package.json b/package.json
index c325ca8..3024a14 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     ]
   },
   "dependencies": {
+    "file-saver": "^2.0.2",
     "leapjs": "^0.6.4",
     "three": "^0.110.0"
   },
diff --git a/src/index.js b/src/index.js
index dc17205..d86d8ea 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,7 @@
 import Leap from 'leapjs';
 import * as T from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import { saveAs } from 'file-saver';
 
 const clamp = (val, min=0, max=1) => Math.min(max, Math.max(min, val));
 const lerp = (a, b, t) => a.plus(b.minus(a).times(t));
@@ -15,6 +16,9 @@ const canvas = $('main');
 const scene = new T.Scene();
 scene.background = new T.Color().setHSL(0.7, .95, .93);
 
+const grid = new T.GridHelper(250, 10);
+scene.add(grid);
+
 const hemiLight = new T.HemisphereLight(0xffffff, 0xffffff, 0.6);
 hemiLight.color.setHSL(0.6, 1, 0.6);
 hemiLight.groundColor.setHSL(0.095, 1, 0.75);
@@ -28,7 +32,7 @@ dirLight.position.multiplyScalar(30);
 scene.add(dirLight);
 
 const camera = new T.PerspectiveCamera(75, 1, 0.1, 1000);
-camera.position.set(80, 100, 200);
+camera.position.set(-30, 400, 80);
 const controls = new OrbitControls(camera, canvas);
 // const context = canvas.getContext('webgl2', { alpha: false });
 const renderer = new T.WebGLRenderer({ canvas }); // , context });
@@ -77,7 +81,6 @@ class Finger extends T.Group {
         dip: finger.dipPosition,
         pip: finger.pipPosition,
       });
-      console.log(this.dataPoints.length);
     }
 
     this.tip.position.set(...finger.tipPosition);
@@ -86,6 +89,28 @@ class Finger extends T.Group {
     this.lineGeometry.vertices[2].set(...finger.pipPosition);
     this.lineGeometry.verticesNeedUpdate = true;
   }
+
+  clear() {
+    this.dataPoints = [];
+    for (let i = 0; i < Finger.MAX_TRACK; i++) {
+      this.trackers.setMatrixAt(i, new T.Matrix4());
+    }
+
+    this.trackers.instanceMatrix.needsUpdate = true;
+  }
+
+  store() {
+    return this.dataPoints;
+  }
+
+  load(dataPoints) {
+    for (const dp of dataPoints) {
+      this.trackers.setMatrixAt(this.dataPoints.length % Finger.MAX_TRACK, new T.Matrix4().makeTranslation(...dp.tip));
+      this.dataPoints.push(dp);
+    }
+
+    this.trackers.instanceMatrix.needsUpdate = true;
+  }
 }
 
 const material = new T.MeshLambertMaterial();
@@ -103,6 +128,30 @@ const fingers = [0,1,2,3,4].map(i => {
 window.F = fingers;
 
 window.onkeydown = (e) => {
+  if (e.key === 'r') {
+    e.preventDefault();
+    fingers.forEach(finger => finger.clear());
+    return;
+  } else if (e.key === 's') {
+    e.preventDefault();
+    const data = fingers.map(finger => finger.store());
+    saveAs(new Blob([JSON.stringify(data)]), 'text/json');
+  } else if (e.key === 'l') {
+    e.preventDefault();
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.click();
+
+    input.onchange = e => {
+      const reader = new FileReader();
+      reader.onload = e => {
+        const data = JSON.parse(e.target.result);
+        data.forEach((data, i) => fingers[i].load(data));
+      }
+      reader.readAsText(e.target.files[0]);
+    }
+  }
+
   const i = +e.key;
 
   if (i > -1 && i < 6) {
@@ -112,7 +161,6 @@ window.onkeydown = (e) => {
 }
 
 window.onkeyup = (e) => {
-  e.preventDefault();
   const i = +e.key;
 
   if (i > -1 && i < 6) {