viewof toggleImage = toggle({ title_off: 'Background image off', title: 'Background image on', value: false })
stickFigure = {
const canvas = DOM.canvas(source.width, source.height);
const ctx = canvas.getContext("2d");
const scale = 1;
if (toggleImage || webcam) {
ctx.drawImage(source, 0, 0, source.width, source.height);
}
if (multiple) {
pose.forEach((figure) => {
//drawSkeleton(figure.keypoints, confidence, ctx, scale);
//drawKeypoints(figure.keypoints, 1, ctx, scale);
});
} else {
//drawSkeleton(pose.keypoints, confidence, ctx, scale);
drawKeypoints(pose[0].keypoints, 1, ctx, scale);
}
return canvas;
}
mutable xyWebcam1 = []
function drawKeypoints(keypoints, minConfidence, ctx, scale) {
let skeleton = [];
for (let i = 0; i < keypoints.length; i++) {
const keypoint = keypoints[i];
if (keypoint.score < minConfidence) {
continue;
}
const { y, x } = keypoint.position;
const xyPoints = {
xPoint: x,
yPoint: y,
bodyPart: keypoint.part
};
skeleton.push(xyPoints);
drawPoint(ctx, y * scale, x * scale, 4, color);
}
const message = {
webcam: 1,
data: keypoints,
timestamp: Date.now()
};
console.log(skeleton);
xyWebcam1.push(skeleton);
xyWebcam1.push("X");
socket.emit("skeleton", message);
}
// 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);
// });
// }
async function* getSinglePose() {
let pose;
let i = 0;
while (true) {
if (i % 1500 == 0) {
//if (performance.now() - currentTime > 50) {
// do your thing
pose = await detector.estimatePoses(source);
// mutable counter += 1;
// mutable currentTime = performance.now(); // in javascript set timeout
yield pose;
}
i = i + 1;
}
}
ip_domain2 = "https://summerproject.kineviz.com:9000"
socket = io(ip_domain2, {
withCredentials: true,
extraHeaders: {
"my-custom-header": "abcd"
}
})
io = require("socket.io-client@2.3.0/dist/socket.io.dev.js")
async function* getMultiplePoses() {
let pose;
while (true) {
pose = await model.estimateMultiplePoses(source);
yield pose;
}
}
// poses = {
// if (source) {
// return await detector.estimatePoses(source);
// }
// return [];
// }
// viewof posesTable = Inputs.table(poses, {
// columns: ['score', 'keypoints'],
// format: {
// score: sparkbar(d3.max(poses, d => d.score)),
// keypoints: points => points.length,
// },
// required: true
// })
// keypoints = {
// if (poses && poses.length > 0) {
// return Inputs.table(posesTable[0].keypoints, {
// columns: ['name', 'score', 'x', 'y'],
// format: {
// score: sparkbar(d3.max(poses, d => d.score))
// }
// })
// }
// return 'No Pose Keypoints Detected';
// }
//markPoses(photoCanvas, poses, showLabels, showFacePoints, '#ff0000', '#eeeeee')
//poses[0].keypoints
model = poseDetection.SupportedModels.MoveNet
detector = await poseDetection.createDetector(model)
import {color} from '@jashkenas/inputs'
import {tf, requireTF, drawPose, drawLine, drawPoint, facePoints, sparkbar} from '@randomfractals/tensorflow-movenet-intro'
poseDetection = requireTF("@tensorflow-models/pose-detection@0.0.3/dist/pose-detection.js")
import {toggle} from '@kelleyvanevert/little-things'
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.
