diff --git a/README.ruben.md b/README.ruben.md new file mode 100644 index 00000000..f8ea419a --- /dev/null +++ b/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` diff --git a/dist/static/assets/webcam.js b/dist/static/assets/webcam.js index 800d8c3a..b679c30b 100644 --- a/dist/static/assets/webcam.js +++ b/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 y = feature[i]._y * factor_y; + const x = feature[i].x; + 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(){ @@ -247,4 +269,42 @@ function getBoundingBox(){ // width: // 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, + } } \ No newline at end of file diff --git a/p5.js-web-editor.service b/p5.js-web-editor.service new file mode 100644 index 00000000..d3cc82c6 --- /dev/null +++ b/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 +