xxxxxxxxxx
103
let handPose;
let myVideo;
let myResults;
function setup() {
createCanvas(640, 480);
myVideo = createCapture(VIDEO);
myVideo.size(width, height);
myVideo.hide();
handPose = ml5.handpose();
handPose.detectStart(myVideo, gotResults);
stroke(255,0,0);
fill(255,255,0);
strokeWeight(5);
}
function gotResults(results) {
console.log(results);
myResults = results;
}
function draw() {
image(myVideo, 0, 0, width, height);
if (myResults) {
//drawLines();
drawKeyPoints()
}
}
function drawKeyPoints() {
if (!myResults[0] || !myResults[1]) {
return;
}
//set vars for each selected key point
left_thumbTip = myResults[0].thumb_tip
left_ringTip = myResults[0].ring_finger_tip
right_thumbTip = myResults[1].thumb_tip
right_ringTip = myResults[1].ring_finger_tip
fill(0, 255, 0);
noStroke();
//draw a circle at thumbTip's x&y coords!
circle(left_thumbTip.x, left_thumbTip.y, 10);
//draw a circle at ringTip's x&y coords!
circle(left_ringTip.x, left_ringTip.y, 10);
circle(right_thumbTip.x, right_thumbTip.y, 10);
circle(right_ringTip.x, right_ringTip.y, 10);
}
//let's just do it for 1 hand
function drawLines() {
const leftHand = myResults[0];
const rightHand = myResults[1];
if (!leftHand || !rightHand) {
return;
}
const leftIndexTip = leftHand.index_finger_tip;
const rightIndexTip = rightHand.index_finger_tip;
line(leftIndexTip.x, leftIndexTip.y, rightIndexTip.x, rightIndexTip.y);
const leftThumbTip = leftHand.thumb_tip;
const rightThumbTip = rightHand.thumb_tip;
line(leftThumbTip.x, leftThumbTip.y, rightThumbTip.x, rightThumbTip.y);
line(leftThumbTip.x, leftThumbTip.y, leftIndexTip.x, leftIndexTip.y);
line(rightThumbTip.x, rightThumbTip.y, rightIndexTip.x, rightIndexTip.y);
// bezier(rightThumbTip.x, rightThumbTip.y, leftThumbTip.x, leftThumbTip.y, rightIndexTip.x, rightIndexTip.y, leftIndexTip.x, leftIndexTip.y);
drawCircle(leftIndexTip, leftThumbTip);
drawCircle(rightIndexTip, rightThumbTip);
// drawCircle(rightIndexTip, leftIndexTip);
// drawCircle(leftThumbTip, rightThumbTip);
}
function drawCircle(pointA, pointB) {
const centerX = (pointA.x + pointB.x) / 2;
const centerY = (pointA.y + pointB.y) / 2;
const r = dist(pointA.x, pointA.y, pointB.x, pointB.y);
circle(centerX, centerY, r);
}