Preliminary 'flip' variable, but not really compatible with faceApi points, so disabled by default

dist/static/assets/webcam.js

@@ -46,6 +46,7 @@ function drawLandmarkOverlay(detection) {
       
       text(nr, p.x, p.y);
     }
+    noFill();
 }
 
 
@@ -150,6 +151,7 @@ var lastFrame;
 var frameToDetect;
 var detections = [];
 var factor_x, factor_y;
+var flip = false; // mirror mode, disabled, because it's tricky to enable with faceApi
 
 
 // function pause() {
@@ -271,11 +273,11 @@ function modelReady() {
     faceapi.detect(gotResults);
 }
 
-var handleResults = function(){
-    // background(parseInt(Math.random()*255),parseInt(Math.random()*255),parseInt(Math.random()*255));
-    background((millis()/100)%255,0,0);
-    image(video, -width/2 + 10, -height/2 + 10, width - 20, height -20);
-};
+// var handleResults = function(){
+//     // background(parseInt(Math.random()*255),parseInt(Math.random()*255),parseInt(Math.random()*255));
+//     background((millis()/100)%255,0,0);
+//     image(video, -width/2 + 10, -height/2 + 10, width - 20, height -20);
+// };
   
 
 gotResults = function(err, result) {
@@ -287,8 +289,17 @@ gotResults = function(err, result) {
     // store data for async draw function
     // TODO results to more compatible format
     
-    lastFrame.image(frameToDetect, 0,0, video.width, video.height);
-    detections = parseDetectionResults(result);
+    // translate(width,0); // move to far corner
+    if (flip) {
+        lastFrame.push();
+        lastFrame.scale(-1.0,1.0);    // flip x-axis backwards
+        lastFrame.image(frameToDetect, -lastFrame.width, 0, lastFrame.width, lastFrame.height);
+        lastFrame.pop();
+    } else {
+        lastFrame.image(frameToDetect, 0, 0, lastFrame.width, lastFrame.height);
+    }
+
+    detections = parseDetectionResults(result, flip, width);
     
     // size of video becomes known only after camera approval
     if(lastFrame.width != video.width || lastFrame.height != video.height){
@@ -432,22 +443,27 @@ function getBoundingBox(){
     }
 }
 
-function parseDetectionResults(results) {
+function parseDetectionResults(results, flip, frameWidth) {
     let detections = [];
     for(let result of results) {
-        const landmarks = result.landmarks._positions.map((pos) => parseCoordinate(pos));
+        const landmarks = result.landmarks._positions.map((pos) => parseCoordinate(pos, flip, frameWidth));
+        let x = result.alignedRect._box._x * factor_x;
+        if(flip) {
+            x *= -1;
+            x += frameWidth;
+        }
         let detection = {
             'points': landmarks,
             // TODO: rotation
             'parts': {},
-            x: result.alignedRect._box._x * factor_x,
+            x: x,
             y: result.alignedRect._box._y * factor_y,
             width: result.alignedRect._box._width * factor_x,
             height: result.alignedRect._box._height * factor_y,
         }
-        for(let idx in result.parts) {
-            detection.parts[idx] = result.parts[idx].map((pos) => parseCoordinate(pos));
-        }
+        // for(let idx in result.parts) {
+        //     detection.parts[idx] = result.parts[idx].map((pos) => parseCoordinate(pos));
+        // }
         detection['center'] = {
             x: detection.x + detection.width / 2,
             y: detection.y + detection.height / 2,
@@ -463,33 +479,39 @@ function parseDetectionResults(results) {
  * We convert this to the canvas's coordinates
  * @param Object {_x: , _y: }
  */
-function parseCoordinate(position) {
+function parseCoordinate(position, flip, frameWidth) {
+    let x = position._x * factor_x;
+    if (flip) {
+        x *= -1;
+        x += frameWidth;
+    }
     return {
-        x: position._x * factor_x,
+        x: x,
         y: position._y * factor_y,
     }
 }
 
 function transformDetection(original) {
 
-    let b = original.points[36]; // outer point on left eye
-    let a = original.points[45]; // outer point on right eye
-    let angle = atan2(a.y - b.y, a.x - b.x);
+    const b = original.points[36]; // outer point on left eye
+    const a = original.points[45]; // outer point on right eye
+    
+    const angle = atan2(a.y - b.y, a.x - b.x);
     
     // let cx =a.x/2 + b.x/2 
     // let cy = a.y/2 + b.y/2
 
-    let cx = original.x
-    let cy = original.y
+    const cx = original.x
+    const cy = original.y
 
     let detection = {
         'points': original.points.map(p => transformPoint(p, cx, cy, angle)),
         'origin': {x:cx, y:cy},
         'angle': angle,
-        original: original
+        'original': original
     }
 
-    let bbox = getBoundingBox(detection.points);
+    const bbox = getBoundingBox(detection.points);
     padding_x = bbox.width * .1;
     padding_y = bbox.height * .1;
 

doc/cheatsheet.md

@@ -27,6 +27,10 @@ detection.width
 detection.height
 : Hoogte van de bounding box van het gezicht.
 
+
+detection.angle
+: Hoeveel het gezicht gedraaid is (oftewel de 'roll').
+
 <!-- detection.center.x  & detection.center.y
 : Het midden van de bounding box -->