xxxxxxxxxx
52
// Hand Pose Detection for Thumbs Up/Down
// https://youtu.be/vfNHdVbE-l4
// https://thecodingtrain.com/tracks/ml5js-beginners-guide/ml5/hand-pose
let video;
let handPose;
let hands = [];
function preload() {
// Load HandPose model with flipped video input
handPose = ml5.handPose({ flipped: true });
}
function mousePressed() {
console.log(hands);
}
function gotHands(results) {
hands = results;
}
function setup() {
createCanvas(640, 480);
video = createCapture(VIDEO, { flipped: true });
video.hide();
// Start detecting hands
handPose.detectStart(video, gotHands);
}
function draw() {
image(video, 0, 0);
// At least one hand is detected
if (hands.length > 0) {
let hand = hands[0];
let index = hand.index_finger_tip;
let thumb = hand.thumb_tip;
textSize(128);
textAlign(CENTER, CENTER);
// Thumbs up or down based on relative thumb position
if (thumb.y < index.y) {
text("👍", index.x, index.y);
} else {
text("👎", index.x, index.y);
}
}
}