improve demo line continous draws

pull/50/head
Vladimir Mandic 2020-10-30 07:32:35 -04:00
parent 61aba98cda
commit 60796a9117
11 changed files with 29 additions and 23 deletions

View File

@ -57,6 +57,7 @@ async function drawFace(result, canvas, ui, triangulation) {
async function drawBody(result, canvas, ui) { async function drawBody(result, canvas, ui) {
if (!result) return; if (!result) return;
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
ctx.lineJoin = 'round';
for (const pose of result) { for (const pose of result) {
ctx.fillStyle = ui.baseColor; ctx.fillStyle = ui.baseColor;
ctx.strokeStyle = ui.baseColor; ctx.strokeStyle = ui.baseColor;
@ -97,15 +98,19 @@ async function drawBody(result, canvas, ui) {
part = pose.keypoints.find((a) => a.part === 'rightAnkle'); part = pose.keypoints.find((a) => a.part === 'rightAnkle');
path.lineTo(part.position.x, part.position.y); path.lineTo(part.position.x, part.position.y);
// arms // arms
part = pose.keypoints.find((a) => a.part === 'leftShoulder'); part = pose.keypoints.find((a) => a.part === 'rightShoulder');
path.moveTo(part.position.x, part.position.y); path.moveTo(part.position.x, part.position.y);
part = pose.keypoints.find((a) => a.part === 'leftShoulder');
path.lineTo(part.position.x, part.position.y);
part = pose.keypoints.find((a) => a.part === 'leftElbow'); part = pose.keypoints.find((a) => a.part === 'leftElbow');
path.lineTo(part.position.x, part.position.y); path.lineTo(part.position.x, part.position.y);
part = pose.keypoints.find((a) => a.part === 'leftWrist'); part = pose.keypoints.find((a) => a.part === 'leftWrist');
path.lineTo(part.position.x, part.position.y); path.lineTo(part.position.x, part.position.y);
// arms // arms
part = pose.keypoints.find((a) => a.part === 'rightShoulder'); part = pose.keypoints.find((a) => a.part === 'leftShoulder');
path.moveTo(part.position.x, part.position.y); path.moveTo(part.position.x, part.position.y);
part = pose.keypoints.find((a) => a.part === 'rightShoulder');
path.lineTo(part.position.x, part.position.y);
part = pose.keypoints.find((a) => a.part === 'rightElbow'); part = pose.keypoints.find((a) => a.part === 'rightElbow');
path.lineTo(part.position.x, part.position.y); path.lineTo(part.position.x, part.position.y);
part = pose.keypoints.find((a) => a.part === 'rightWrist'); part = pose.keypoints.find((a) => a.part === 'rightWrist');
@ -119,6 +124,7 @@ async function drawBody(result, canvas, ui) {
async function drawHand(result, canvas, ui) { async function drawHand(result, canvas, ui) {
if (!result) return; if (!result) return;
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
ctx.lineJoin = 'round';
for (const hand of result) { for (const hand of result) {
ctx.font = ui.baseFont; ctx.font = ui.baseFont;
ctx.lineWidth = ui.baseLineWidth; ctx.lineWidth = ui.baseLineWidth;
@ -142,11 +148,11 @@ async function drawHand(result, canvas, ui) {
} }
if (ui.drawPolygons) { if (ui.drawPolygons) {
const addPart = (part) => { const addPart = (part) => {
for (let i = 1; i < part.length; i++) { for (let i = 0; i < part.length; i++) {
ctx.lineWidth = ui.baseLineWidth; ctx.lineWidth = ui.baseLineWidth;
ctx.beginPath(); ctx.beginPath();
ctx.strokeStyle = ui.useDepth ? `rgba(${127.5 + (2 * part[i][2])}, ${127.5 - (2 * part[i][2])}, 255, 0.5)` : ui.baseColor; ctx.strokeStyle = ui.useDepth ? `rgba(${127.5 + (2 * part[i][2])}, ${127.5 - (2 * part[i][2])}, 255, 0.5)` : ui.baseColor;
ctx.moveTo(part[i - 1][0], part[i - 1][1]); ctx.moveTo(part[i > 0 ? i - 1 : 0][0], part[i > 0 ? i - 1 : 0][1]);
ctx.lineTo(part[i][0], part[i][1]); ctx.lineTo(part[i][0], part[i][1]);
ctx.stroke(); ctx.stroke();
} }
@ -156,7 +162,7 @@ async function drawHand(result, canvas, ui) {
addPart(hand.annotations.ringFinger); addPart(hand.annotations.ringFinger);
addPart(hand.annotations.pinky); addPart(hand.annotations.pinky);
addPart(hand.annotations.thumb); addPart(hand.annotations.thumb);
addPart(hand.annotations.palmBase); // addPart(hand.annotations.palmBase);
} }
} }
} }

View File

@ -5777,7 +5777,7 @@ var require_config = __commonJS((exports) => {
var require_package = __commonJS((exports, module) => { var require_package = __commonJS((exports, module) => {
module.exports = { module.exports = {
name: "@vladmandic/human", name: "@vladmandic/human",
version: "0.4.9", version: "0.4.10",
description: "human: 3D Face Detection, Iris Tracking and Age & Gender Prediction", description: "human: 3D Face Detection, Iris Tracking and Age & Gender Prediction",
sideEffects: false, sideEffects: false,
main: "dist/human.node.js", main: "dist/human.node.js",

View File

@ -5,7 +5,7 @@
"imports": [] "imports": []
}, },
"package.json": { "package.json": {
"bytes": 2870, "bytes": 2871,
"imports": [] "imports": []
}, },
"src/emotion/emotion.js": { "src/emotion/emotion.js": {
@ -353,7 +353,7 @@
"bytesInOutput": 2230 "bytesInOutput": 2230
}, },
"package.json": { "package.json": {
"bytesInOutput": 3012 "bytesInOutput": 3013
}, },
"src/human.js": { "src/human.js": {
"bytesInOutput": 10775 "bytesInOutput": 10775
@ -362,7 +362,7 @@
"bytesInOutput": 0 "bytesInOutput": 0
} }
}, },
"bytes": 155238 "bytes": 155239
} }
} }
} }

2
dist/human.esm.js vendored
View File

@ -72826,7 +72826,7 @@ var require_config = __commonJS((exports) => {
var require_package = __commonJS((exports, module) => { var require_package = __commonJS((exports, module) => {
module.exports = { module.exports = {
name: "@vladmandic/human", name: "@vladmandic/human",
version: "0.4.9", version: "0.4.10",
description: "human: 3D Face Detection, Iris Tracking and Age & Gender Prediction", description: "human: 3D Face Detection, Iris Tracking and Age & Gender Prediction",
sideEffects: false, sideEffects: false,
main: "dist/human.node.js", main: "dist/human.node.js",

6
dist/human.esm.json vendored
View File

@ -149,7 +149,7 @@
] ]
}, },
"package.json": { "package.json": {
"bytes": 2870, "bytes": 2871,
"imports": [] "imports": []
}, },
"src/emotion/emotion.js": { "src/emotion/emotion.js": {
@ -618,7 +618,7 @@
"bytesInOutput": 2230 "bytesInOutput": 2230
}, },
"package.json": { "package.json": {
"bytesInOutput": 3012 "bytesInOutput": 3013
}, },
"src/human.js": { "src/human.js": {
"bytesInOutput": 10765 "bytesInOutput": 10765
@ -627,7 +627,7 @@
"bytesInOutput": 0 "bytesInOutput": 0
} }
}, },
"bytes": 2924202 "bytes": 2924203
} }
} }
} }

2
dist/human.js vendored
View File

@ -72827,7 +72827,7 @@ var Human = (() => {
var require_package = __commonJS((exports, module) => { var require_package = __commonJS((exports, module) => {
module.exports = { module.exports = {
name: "@vladmandic/human", name: "@vladmandic/human",
version: "0.4.9", version: "0.4.10",
description: "human: 3D Face Detection, Iris Tracking and Age & Gender Prediction", description: "human: 3D Face Detection, Iris Tracking and Age & Gender Prediction",
sideEffects: false, sideEffects: false,
main: "dist/human.node.js", main: "dist/human.node.js",

6
dist/human.json vendored
View File

@ -149,7 +149,7 @@
] ]
}, },
"package.json": { "package.json": {
"bytes": 2870, "bytes": 2871,
"imports": [] "imports": []
}, },
"src/emotion/emotion.js": { "src/emotion/emotion.js": {
@ -618,13 +618,13 @@
"bytesInOutput": 2424 "bytesInOutput": 2424
}, },
"package.json": { "package.json": {
"bytesInOutput": 3144 "bytesInOutput": 3145
}, },
"src/human.js": { "src/human.js": {
"bytesInOutput": 11994 "bytesInOutput": 11994
} }
}, },
"bytes": 3070079 "bytes": 3070080
} }
} }
} }

View File

@ -5777,7 +5777,7 @@ var require_config = __commonJS((exports2) => {
var require_package = __commonJS((exports2, module2) => { var require_package = __commonJS((exports2, module2) => {
module2.exports = { module2.exports = {
name: "@vladmandic/human", name: "@vladmandic/human",
version: "0.4.9", version: "0.4.10",
description: "human: 3D Face Detection, Iris Tracking and Age & Gender Prediction", description: "human: 3D Face Detection, Iris Tracking and Age & Gender Prediction",
sideEffects: false, sideEffects: false,
main: "dist/human.node.js", main: "dist/human.node.js",

2
dist/human.node.js vendored
View File

@ -73868,7 +73868,7 @@ var require_config = __commonJS((exports2) => {
var require_package = __commonJS((exports2, module2) => { var require_package = __commonJS((exports2, module2) => {
module2.exports = { module2.exports = {
name: "@vladmandic/human", name: "@vladmandic/human",
version: "0.4.9", version: "0.4.10",
description: "human: 3D Face Detection, Iris Tracking and Age & Gender Prediction", description: "human: 3D Face Detection, Iris Tracking and Age & Gender Prediction",
sideEffects: false, sideEffects: false,
main: "dist/human.node.js", main: "dist/human.node.js",

View File

@ -5,7 +5,7 @@
"imports": [] "imports": []
}, },
"package.json": { "package.json": {
"bytes": 2870, "bytes": 2871,
"imports": [] "imports": []
}, },
"src/emotion/emotion.js": { "src/emotion/emotion.js": {
@ -353,7 +353,7 @@
"bytesInOutput": 2232 "bytesInOutput": 2232
}, },
"package.json": { "package.json": {
"bytesInOutput": 3015 "bytesInOutput": 3016
}, },
"src/human.js": { "src/human.js": {
"bytesInOutput": 47 "bytesInOutput": 47
@ -362,7 +362,7 @@
"bytesInOutput": 10775 "bytesInOutput": 10775
} }
}, },
"bytes": 155392 "bytes": 155393
} }
} }
} }

View File

@ -1,6 +1,6 @@
{ {
"name": "@vladmandic/human", "name": "@vladmandic/human",
"version": "0.4.10", "version": "0.5.0",
"description": "human: 3D Face Detection, Iris Tracking and Age & Gender Prediction", "description": "human: 3D Face Detection, Iris Tracking and Age & Gender Prediction",
"sideEffects": false, "sideEffects": false,
"main": "dist/human.node.js", "main": "dist/human.node.js",