r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

fixes to draw the face canvas

Browse source
This commit is contained in:
Ruben van de Ven 2020-09-21 14:57:54 +02:00
parent 793d7e6521
commit 10ed1de810
1 changed files with 64 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
dist/static/assets/webcam.js vendored
View file

@ -100,7 +100,7 @@ const detection_options = {
function setup() { function setup() {
// createCanvas(1280,720, WEBGL); // createCanvas(1280,720, WEBGL);
createCanvas(540,420); createCanvas(540,420, WEBGL);
smooth(); smooth();
noFill(); noFill();
@ -146,7 +146,14 @@ gotResults = function(err, result) {
// store data for async draw function // store data for async draw function
detections = result; 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); lastFrame.image(video, 0,0, video.width, video.height);
faceapi.detect(gotResults); faceapi.detect(gotResults);
@ -169,15 +176,15 @@ function drawBox(detections) {
} }
function drawLandmarks(detections) { function drawLandmarks(detection) {
for (let i = 0; i < detections.length; i++) { // for (let i = 0; i < detections.length; i++) {
const mouth = detections[i].parts.mouth; const mouth = detection.parts.mouth;
const nose = detections[i].parts.nose; const nose = detection.parts.nose;
const leftEye = detections[i].parts.leftEye; const leftEye = detection.parts.leftEye;
const rightEye = detections[i].parts.rightEye; const rightEye = detection.parts.rightEye;
const rightEyeBrow = detections[i].parts.rightEyeBrow; const rightEyeBrow = detection.parts.rightEyeBrow;
const leftEyeBrow = detections[i].parts.leftEyeBrow; const leftEyeBrow = detection.parts.leftEyeBrow;
const jawOutline = detections[i].parts.jawOutline; const jawOutline = detection.parts.jawOutline;
drawPart(mouth, true); drawPart(mouth, true);
drawPart(nose, true); drawPart(nose, true);
@ -187,14 +194,18 @@ function drawLandmarks(detections) {
drawPart(rightEyeBrow, false); drawPart(rightEyeBrow, false);
drawPart(jawOutline, false); drawPart(jawOutline, false);
} // }
} }
function drawPart(feature, closed) { function drawPart(feature, closed) {
beginShape(); beginShape();
const factor_x = width / video.width;
const factor_y = height / video.height;
for (let i = 0; i < feature.length; i++) { for (let i = 0; i < feature.length; i++) {
const x = feature[i]._x const x = feature[i]._x *factor_x;
const y = feature[i]._y const y = feature[i]._y * factor_y;
vertex(x, 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:
// }
}