xxxxxxxxxx
100
let handpose;
let video;
let hands = [];
let showFire = false;
let scalar = 1;
let translateX = 0;
let translateY = 0;
let thumbX;
let thumbY;
let indexX;
let indexY;
const options = {
flipHorizontal: false,
};
function setup() {
createCanvas(640, 480);
video = createCapture(VIDEO);
video.size(width, height);
handpose = ml5.handpose(video, options, modelReady);
// This sets up an event that fills the global variable "predictions"
// with an array every time new hand poses are detected
handpose.on("hand", results => {
hands = results;
});
// Hide the video element, and just show the canvas
video.hide();
}
function modelReady() {
console.log("Model ready!");
}
function draw() {
background(220);
translate(video.width + translateX, 0 + translateY);
scale(-scalar, scalar);
image(video, 0, 0, width, height);
// We can call both functions to draw all keypoints and the skeletons
drawKeypoints();
hand = hands[0]
//console.log(hand)
if (hand){
k = hand.landmarks
console.log("x",k[8][0])
console.log("y", k[8][1])
}
}
// A function to draw ellipses over the detected keypoints
function drawKeypoints() {
for (let i = 0; i < hands.length; i += 1) {
const hand = hands[i];
for (let j = 0; j < hand.landmarks.length; j += 1) {
const keypoint = hand.landmarks[j];
fill(0, 255, 0);
noStroke();
if (j == 4 || j == 8) {
fill(255, 0, 0);
if (j == 4) {
thumbX = keypoint[0];
thumbY = keypoint[1];
}
if (j == 8) {
indexX = keypoint[0];
indexY = keypoint[1];
}
const size = dist(thumbX, thumbY, indexX, indexY);
// console.log(size);
if (size >= 100) {
scalar += 0.001;
}
if (size <= 40) {
scalar -= 0.001;
}
if (indexX >= width/2) {
translateX -= 0.25;
}
if (indexX < width/2) {
translateX += 0.25;
}
if (indexY >= height/2) {
translateY += 0.25;
}
if (indexY < height/2) {
translateY -= 0.25;
}
}
ellipse(keypoint[0], keypoint[1], 10, 10);
}
}
}