transition to drawMask() for more easy rotated drawing of face points

dist/static/assets/webcam.js

@@ -5,6 +5,30 @@ console.log(location.origin);
 let assets = {};
 
 var draw = function () {
+  // Begin met het tekenen van de video
+  // plaats hem op position x = 0, y = 0.
+  // vul de hele breedte en hoogte
+  image(lastFrame, 0,0, width, height);
+
+  for(let detection of detections) {
+        push();
+        let transformed = transformDetection(detection, cx, cy, angle);
+        
+        translate(transformed.origin.x, transformed.origin.y);
+        rotate(transformed.angle);
+
+        try {
+            drawMask(transformed);
+        } catch (error) {
+            console.exception(error);
+        }
+
+        pop();
+    }
+};
+
+var drawMask = function(detection) {
+
 };
 
 // var gotResults = function(err, result) {
@@ -333,3 +357,44 @@ function parseCoordinate(position) {
         y: position._y * factor_y,
     }
 }
+
+function transformDetection(original) {
+
+    let a = detection.points[36]; // outer point on left eye
+    let b = detection.points[45]; // outer point on right eye
+    
+    let cx =a.x/2 + b.x/2 
+    let cy = a.y/2 + b.y/2
+
+    let angle = atan2(a.y - b.y, a.x - b.x);
+
+    let detection = {
+        'points': original.points.map(p => transformPoint(p, cx, cy, angle)),
+        'origin': {x:cx, y:cy},
+        'angle': angle,
+        original: original
+    }
+
+    let bbox = getBoundingBox(points);
+    padding_x = bbox.width * .1;
+    padding_y = bbox.height * .1;
+
+    detection['box'] = {
+        x: bbox.x - padding_x,
+        y: bbox.y - padding_y,
+        width: bbox.width * 1.2,
+        height: bbox.height * 1.2
+    }
+
+    return detection;    
+}
+
+function transformPoint(p, cx, cy, angle) {
+    const px = p.x-cx;
+    const py = p.y-cy;
+
+    return {
+        x: px * cos(-angle) - py * sin(-angle),
+        y: px * sin(-angle) + py * cos(-angle)
+    }
+}