fixes to draw the face canvas

dist/static/assets/webcam.js

@@ -100,7 +100,7 @@ const detection_options = {
 
 function setup() {
     // createCanvas(1280,720, WEBGL);
-    createCanvas(540,420);
+    createCanvas(540,420, WEBGL);
     smooth();
     noFill();
 
@@ -146,7 +146,14 @@ gotResults = function(err, result) {
     
     // store data for async draw function
     detections = result;
-    lastFrame.background('red');
+    
+    // size of video becomes known only after camera approval
+    if(lastFrame.width != video.width || lastFrame.height != video.height){
+        console.log('Resizing canvas');
+        lastFrame.resizeCanvas(video.width, video.height);
+    }
+
+    // lastFrame.background('red');
     lastFrame.image(video, 0,0, video.width, video.height);
 
     faceapi.detect(gotResults);
@@ -169,15 +176,15 @@ function drawBox(detections) {
 
 }
 
-function drawLandmarks(detections) {
-    for (let i = 0; i < detections.length; i++) {
-        const mouth = detections[i].parts.mouth;
-        const nose = detections[i].parts.nose;
-        const leftEye = detections[i].parts.leftEye;
-        const rightEye = detections[i].parts.rightEye;
-        const rightEyeBrow = detections[i].parts.rightEyeBrow;
-        const leftEyeBrow = detections[i].parts.leftEyeBrow;
-        const jawOutline = detections[i].parts.jawOutline;
+function drawLandmarks(detection) {
+    // for (let i = 0; i < detections.length; i++) {
+    const mouth = detection.parts.mouth;
+    const nose = detection.parts.nose;
+    const leftEye = detection.parts.leftEye;
+    const rightEye = detection.parts.rightEye;
+    const rightEyeBrow = detection.parts.rightEyeBrow;
+    const leftEyeBrow = detection.parts.leftEyeBrow;
+    const jawOutline = detection.parts.jawOutline;
 
     drawPart(mouth, true);
     drawPart(nose, true);
@@ -187,14 +194,18 @@ function drawLandmarks(detections) {
     drawPart(rightEyeBrow, false);
     drawPart(jawOutline, false);
 
-    }
+    // }
 }
 
 function drawPart(feature, closed) {
     beginShape();
+
+    const factor_x = width / video.width;
+    const factor_y = height / video.height;
+
     for (let i = 0; i < feature.length; i++) {
-        const x = feature[i]._x
-        const y = feature[i]._y
+        const x = feature[i]._x *factor_x;
+        const y = feature[i]._y * factor_y;
         vertex(x, y)
     }
 
@@ -205,3 +216,35 @@ function drawPart(feature, closed) {
     }
 
 }
+
+/**
+ * Wrapper around p5.js color class
+ * @param {*} c color, either as array, or string (css name or HEX string)
+ */
+function getColor(c) {
+    if(!Array.isArray(c)) c = [c];
+    return new p5.Color(p5.instance, c);
+}
+
+var colors = {
+    red: getColor('red'),
+    blue: getColor('blue'),
+    green: getColor('green'),
+};
+
+function faceDistance(face1, face2){
+    // distance between faces, in pixels, not meters.. for now
+
+}
+
+function getBoundingBox(){
+    // arguments contains points,  or sets of points. Find bbox
+    console.log(arguments)
+    
+    // return {
+    //     top: 
+    //     left:
+    //     width:
+    //     height:
+    // }
+}