Some helper function for drawing

README.ruben.md

@@ -0,0 +1,24 @@
+Gebruik s3cmd om bucket in te stellen.
+
+## Make bucket:
+s3cmd mb s3://digitalplayground-p5
+
+## Set the CORS rules
+s3cmd -c .s3cfg setcors CORS.xml s3://digitalplayground-p5
+## Delete the CORS rules
+s3cmd -c .s3cfg delcors s3://digitalplayground-p5
+## Get bucket info including CORS rules
+s3cmd -c .s3cfg info s3://digitalplayground-p5
+
+# Development
+
+`docker-compose -f docker-compose-development.yml up`
+
+# Deployment
+
+* Push to git (in case linting fails on commit use `git commit --no-verify`)
+* Pull on server.
+* `service p5.js-web-editor stop`
+* `npm run build:server`
+* `npm run build:client`
+* `service p5.js-web-editor start`

dist/static/assets/webcam.js

@@ -73,6 +73,7 @@ let faceapi;
 var video;
 var lastFrame;
 var detections = [];
+var factor_x, factor_y;
 
 
 // function pause() {
@@ -100,7 +101,7 @@ const detection_options = {
 
 function setup() {
     // createCanvas(1280,720, WEBGL);
-    createCanvas(540,420, WEBGL);
+    createCanvas(540,420);
     smooth();
     noFill();
 
@@ -145,7 +146,8 @@ gotResults = function(err, result) {
     }
     
     // store data for async draw function
-    detections = result;
+    // TODO results to more compatible format
+    detections = parseDetectionResults(result);
     
     // size of video becomes known only after camera approval
     if(lastFrame.width != video.width || lastFrame.height != video.height){
@@ -156,6 +158,9 @@ gotResults = function(err, result) {
     // lastFrame.background('red');
     lastFrame.image(video, 0,0, video.width, video.height);
 
+    factor_x = width / video.width;
+    factor_y = height / video.height;
+
     faceapi.detect(gotResults);
 }
 
@@ -200,12 +205,9 @@ function drawLandmarks(detection) {
 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 *factor_x;
+        const x = feature[i].x;
-        const y = feature[i]._y * factor_y;
+        const y = feature[i].y;
         vertex(x, y)
     }
 
@@ -234,7 +236,27 @@ var colors = {
 
 function faceDistance(face1, face2){
     // distance between faces, in pixels, not meters.. for now
+    // we cheat a little: take centers, visualise circle with r = max(width, height)
+    // and find distance between these circles
+    box1 = (face1.box.x, face1.box.x + face1.box.width)
+    box2 = (face2.box.x, face2.box.x + face2.box.width)
 
+    c1 = {
+        x: face1.box.x + face1.box.width / 2,
+        y: face1.box.y + face1.box.height / 2,
+    }
+    c2 = {
+        x: face2.box.x + face2.box.width / 2,
+        y: face2.box.y + face2.box.height / 2,
+    }
+
+    r1 = Math.max(face1.box.width, face1.box.height) / 2;
+    r2 = Math.max(face2.box.width, face2.box.height) / 2;
+
+    dx = c1.x - c2.x;
+    dy = c1.y - c2.y;
+
+    return Math.sqrt( Math.pow(dx, 2) + Math.pow(dy, 2) ) - r1 - r2;
 }
 
 function getBoundingBox(){
@@ -248,3 +270,41 @@ function getBoundingBox(){
     //     height:
     // }
 }
+
+function parseDetectionResults(results) {
+    let detections = [];
+    for(let result of results) {
+        const landmarks = result.landmarks._positions.map((pos) => parseCoordinate(pos));
+        let detection = {
+            'landmarks': landmarks,
+            'parts': {},
+            'box': {
+                x: result.alignedRect._box._x * factor_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));
+        }
+        detections.push(detection);
+    }
+
+    return detections;
+    // result.parts
+    // result.alignedRect._box
+    // factor_x, factor_y
+}
+
+/**
+ * face api detector returns coordinates with _x and _y attributes.
+ * We convert this to the canvas's coordinates
+ * @param Object {_x: , _y: }
+ */
+function parseCoordinate(position) {
+    return {
+        x: position._x * factor_x,
+        y: position._y * factor_y,
+    }
+}

p5.js-web-editor.service

@@ -0,0 +1,15 @@
+[Unit]
+Description=p5.js web editor
+After=network.target
+
+[Service]
+Type=simple
+User=YOUR_USER
+EnvironmentFile=/home/YOUR_USER/p5.js-web-editor/.env
+WorkingDirectory=/home/YOUR_USER/p5.js-web-editor
+ExecStart=/usr/bin/npm run start:prod
+Restart=on-failure
+
+[Install]
+WantedBy=multi-user.target
+