Published
Edited
Jul 26, 2021
md`# Movenet Receiver 3D`
//textarea = html`<textarea style="width: ${width}px; height: 300px; resize: none" readonly/>`
ip_domain = "https://summerproject.kineviz.com:9000"
socket = {
const socket = io(ip_domain);
console.log("from socket");
socket.on("skeleton", onDataReceived);
return socket;
}
io = require("socket.io-client@2.3.0/dist/socket.io.dev.js")
data1 = []
data2 = []
canvas = DOM.canvas(500, 500)
//socket.close()
mutable xyzArr = []
calculateData = (data) => {
let avgKeypoints = [];
let coordinates = [];
if (data2 == 1 && data1 == 1) {
return;
}
//console.log(data);
if (data.webcam == "1") {
data1[0] = data;
console.log("data1[0] ", data1[0]);
} else if (data.webcam == "2") {
data2[0] = data;
console.log("data2[0] ",data2[0]);
}
if (data1[0] != undefined && data2[0] != undefined) {
console.log("data1 & data2 ", data1," - ", data2)
for (let i = 0; i < 17; i++) {
console.log("====>>> data1.x: ",data1[0] , "data2.x: ", data2[0]);
const keypoint = {
score: (data1[0].data[i].score + data2[0].data[i].score) / 2,
part: data1[0].data[i].part,
position: {
x: (data1[0].data[i].x + data2[0].data[i].x) / 2,
y: (data1[0].data[i].y + data2[0].data[i].y) / 2
}
};
avgKeypoints.push(keypoint);
const xyz_points = {
pointX: data1[0].data[i].x,
pointY: data1[0].data[i].y,
pointZ: data2[0].data[i].x,
bodyPart: data1[0].data[i].part
};
//xyzArr[0] = xyz_points;
coordinates.push(xyz_points);
}
//if (xyzArr.includes(coordinates) === false) {
xyzArr.push(coordinates);
//}
//xyzArr.push("X");
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
//drawing skeleton
let adjacentKeyPoints = posenet.getAdjacentKeyPoints(avgKeypoints, 0);
// console.log("adjacentKeyPoints ", adjacentKeyPoints);
adjacentKeyPoints.forEach((keypoints) => {
drawSegment(
toTuple(keypoints[0].position),
toTuple(keypoints[1].position),
figColor,
1,
ctx
);
});
for (let i = 0; i < avgKeypoints.length; i++) {
const keypoint = avgKeypoints[i];
if (keypoint.score < 0) {
continue;
}
const { y, x } = keypoint.position;
drawPoint(ctx, y * 1, x * 1, pointRadius, color);
}
avgKeypoints = [];
}
return data;
}
function drawKeypoints(keypoints, minConfidence, ctx, scale) {
for (let i = 0; i < keypoints.length; i++) {
const keypoint = keypoints[i];
if (keypoint.score < minConfidence) {
continue;
}
const { y, x } = keypoint.position;
drawPoint(ctx, y * scale, x * scale, pointRadius, color);
}
}
function drawSegment([ay, ax], [by, bx], color, scale, ctx) {
console.log("from drawSegment()");
ctx.beginPath();
ctx.moveTo(ax * scale, ay * scale);
ctx.lineTo(bx * scale, by * scale);
ctx.lineWidth = lineWidth;
ctx.strokeStyle = figColor;
ctx.stroke();
}
// function drawPoint(ctx, y, x, r, color) {
// console.log("from drawPoint()");
// ctx.beginPath();
// ctx.arc(x, y, r, 0, 2 * Math.PI);
// ctx.fillStyle = figColor;
// ctx.fill();
// }
viewof pointRadius = slider({
min: 1,
max: 8,
step: 1,
value: 4,
title: "Point Radius"
})
viewof lineWidth = slider({
min: 1,
max: 5,
step: 1,
value: 2,
title: "Skeleton Line Width"
})
viewof figColor = color({
value: "#f44242",
title: "Color"
})
function drawSkeleton(keypoints, minConfidence, ctx, scale) {
const adjacentKeyPoints = posenet.getAdjacentKeyPoints(
keypoints, minConfidence);
adjacentKeyPoints.forEach((keypoints) => {
drawSegment(toTuple(keypoints[0].position), toTuple(keypoints[1].position), figColor, scale, ctx);
});
console.log("adjacentKeyPOints" + adjacentKeyPoints);
}
function toTuple({ y, x }) {
return [y, x];
}
function onDataReceived(data) {
calculateData(data);
//calculateAverage()
}
import { file, slider, select, color } from "@jashkenas/inputs"
detector = await poseDetection.createDetector(model)
model = poseDetection.SupportedModels.MoveNet
poseDetection = requireTF("@tensorflow-models/pose-detection@0.0.3/dist/pose-detection.js")
import {tf, requireTF, drawPose, drawLine, drawPoint, facePoints, sparkbar} from '@randomfractals/tensorflow-movenet-intro'
posenet = require("@tensorflow-models/posenet@1.0.3")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
