transition to drawMask() for more easy rotated drawing of face points
This commit is contained in:
parent
f7a54b2e17
commit
d589e37a4e
1 changed files with 65 additions and 0 deletions
65
dist/static/assets/webcam.js
vendored
65
dist/static/assets/webcam.js
vendored
|
@ -5,6 +5,30 @@ console.log(location.origin);
|
||||||
let assets = {};
|
let assets = {};
|
||||||
|
|
||||||
var draw = function () {
|
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) {
|
// var gotResults = function(err, result) {
|
||||||
|
@ -333,3 +357,44 @@ function parseCoordinate(position) {
|
||||||
y: position._y * factor_y,
|
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)
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue