update docs and demo

demo/browser.js

@@ -133,7 +133,6 @@ async function drawResults(input) {
   human.draw.body(canvas, result.body);
   human.draw.hand(canvas, result.hand);
   human.draw.gesture(canvas, result.gesture);
-  human.draw.angles(canvas, result.face);
   await calcSimmilariry(result);
 
   // update log

package.json

@@ -33,13 +33,13 @@
     "@tensorflow/tfjs-layers": "^3.2.0",
     "@tensorflow/tfjs-node": "^3.2.0",
     "@tensorflow/tfjs-node-gpu": "^3.2.0",
-    "@types/node": "^14.14.31",
+    "@types/node": "^14.14.32",
     "@typescript-eslint/eslint-plugin": "^4.16.1",
     "@typescript-eslint/parser": "^4.16.1",
     "@vladmandic/pilogger": "^0.2.14",
     "chokidar": "^3.5.1",
     "dayjs": "^1.10.4",
-    "esbuild": "^0.8.56",
+    "esbuild": "^0.8.57",
     "eslint": "^7.21.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-plugin-import": "^2.22.1",
@@ -48,7 +48,7 @@
     "eslint-plugin-promise": "^4.3.1",
     "rimraf": "^3.0.2",
     "seedrandom": "^3.0.5",
-    "simple-git": "^2.36.0",
+    "simple-git": "^2.36.1",
     "tslib": "^2.1.0",
     "typescript": "^4.2.3"
   },

src/draw.ts

@@ -16,7 +16,7 @@ export const options = {
   drawPolygons: true,
   fillPolygons: false,
   useDepth: true,
-  useCurves: true,
+  useCurves: false,
   bufferedOutput: false,
 };
 
@@ -130,6 +130,7 @@ export async function face(inCanvas, result) {
       const emotion = f.emotion.map((a) => `${Math.trunc(100 * a.score)}% ${a.emotion}`);
       labels.push(emotion.join(' '));
     }
+    if (f.angle) labels.push(`roll: ${Math.trunc(100 * f.angle.roll) / 100} yaw:${Math.trunc(100 * f.angle.yaw) / 100} pitch:${Math.trunc(100 * f.angle.pitch) / 100}`);
     if (labels.length === 0) labels.push('face');
     ctx.fillStyle = options.color;
     for (let i = labels.length - 1; i >= 0; i--) {
@@ -342,26 +343,6 @@ export async function hand(inCanvas, result) {
   }
 }
 
-export async function angles(inCanvas, result) {
-  // todo
-  if (!result || !inCanvas) return;
-  if (!(inCanvas instanceof HTMLCanvasElement)) return;
-  const ctx = inCanvas.getContext('2d');
-  if (!ctx) return;
-  ctx.font = options.font;
-  ctx.strokeStyle = options.color;
-  ctx.fillStyle = options.color;
-  ctx.lineWidth = options.lineWidth;
-  /*
-  const r = 200;
-  for (const res of result) {
-    ctx.moveTo(inCanvas.width - r, inCanvas.height - r);
-    ctx.lineTo(inCanvas.width - r + (r * Math.cos(res.angle.roll)), inCanvas.height - r + (r * Math.sin(res.angle.roll)));
-    ctx.stroke();
-  }
-  */
-}
-
 export async function canvas(inCanvas, outCanvas) {
   if (!inCanvas || !outCanvas) return;
   if (!(inCanvas instanceof HTMLCanvasElement) || !(outCanvas instanceof HTMLCanvasElement)) return;
@@ -376,5 +357,4 @@ export async function all(inCanvas, result) {
   body(inCanvas, result.body);
   hand(inCanvas, result.hand);
   gesture(inCanvas, result.gesture);
-  angles(inCanvas, result.face);
 }

src/human.ts

@@ -249,20 +249,19 @@ class Human {
   }
 
   calculateFaceAngle = (mesh) => {
-    if (!mesh || mesh.length < 152) return {};
+    if (!mesh || mesh.length < 300) return {};
     const radians = (a1, a2, b1, b2) => Math.atan2(b2 - a2, b1 - a1);
     // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
     const degrees = (theta) => Math.abs(((theta * 180) / Math.PI) % 360);
     const angle = {
+      // values are in radians in range of -pi/2 to pi/2 which is -90 to +90 degrees
+      // value of 0 means center
       // roll is face lean left/right
-      // looking at x,y of outside corners of leftEye and rightEye
+      roll: radians(mesh[33][0], mesh[33][1], mesh[263][0], mesh[263][1]), // looking at x,y of outside corners of leftEye and rightEye
-      roll: radians(mesh[33][0], mesh[33][1], mesh[263][0], mesh[263][1]),
       // yaw is face turn left/right
-      // looking at x,z of outside corners of leftEye and rightEye
+      yaw: radians(mesh[33][0], mesh[33][2], mesh[263][0], mesh[263][2]), // looking at x,z of outside corners of leftEye and rightEye
-      yaw: radians(mesh[33][0], mesh[33][2], mesh[263][0], mesh[263][2]),
       // pitch is face move up/down
-      // looking at y,x of top and bottom points of the face
+      pitch: radians(mesh[10][1], mesh[10][2], mesh[152][1], mesh[152][2]), // looking at y,z of top and bottom points of the face
-      pitch: radians(mesh[10][1], mesh[10][2], mesh[152][1], mesh[152][2]),
     };
     return angle;
   }

wiki

@@ -1 +1 @@
-Subproject commit f9a7144a87877d8e7b6da1f545fb4d49b313be22
+Subproject commit 0b8afcd5149686d64d6f00bebe33937cd175d949