mirror of https://github.com/vladmandic/human
improve demo line continous draws
parent
61aba98cda
commit
60796a9117
16
demo/draw.js
16
demo/draw.js
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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",
|
||||||
|
|
Loading…
Reference in New Issue