xxxxxxxxxx
93
let video;
// Handpose
let handpose;
let hands = [];
function setup() {
createCanvas(640, 480);
video = createCapture(VIDEO);
// video.size(width, height);
video.hide();
// load model (and callback function)
handpose = ml5.handpose(video, modelLoaded);
document.getElementById('message').innerHTML = 'Model Loading.....';
handpose.on('hand', results=>{
console.log(results);
hands = results;
drawKeypoints();
});
}
function draw() {
image(video, 0, 0);
}
function modelLoaded() {
console.log('Model loaded!');
document.getElementById('message').innerHTML = 'Model loaded!!!';
}
function drawKeypoints() {
if(hands[0]) {
hand = hands[0];
// draw points
for(let j=0; j<hand.landmarks.length; j++) {
keypoint = hand.landmarks[j];
fill(0, 255, 0);
noStroke();
circle(keypoint[0], keypoint[1], 10);
}
// draw line
let k = hand.landmarks
stroke(255, 255, 0);
strokeWeight(3);
noFill();
line(k[0][0], k[0][1], k[1][0], k[1][1]);
line(k[1][0], k[1][1], k[2][0], k[2][1]);
line(k[2][0], k[2][1], k[3][0], k[3][1]);
line(k[3][0], k[3][1], k[4][0], k[4][1]);
line(k[0][0], k[0][1], k[5][0], k[5][1]);
line(k[5][0], k[5][1], k[6][0], k[6][1]);
line(k[6][0], k[6][1], k[7][0], k[7][1]);
//stroke('red')
line(k[7][0], k[7][1], k[8][0], k[8][1]);
noStroke()
fill("red")
ellipse(k[8][0], k[8][1], 20, 20)
line(k[0][0], k[0][1], k[9][0], k[9][1]);
line(k[9][0], k[9][1], k[10][0], k[10][1]);
line(k[10][0], k[10][1], k[11][0], k[11][1]);
line(k[11][0], k[11][1], k[12][0], k[12][1]);
line(k[0][0], k[0][1], k[13][0], k[13][1]);
line(k[13][0], k[13][1], k[14][0], k[14][1]);
line(k[14][0], k[14][1], k[15][0], k[15][1]);
line(k[15][0], k[15][1], k[16][0], k[16][1]);
line(k[0][0], k[0][1], k[17][0], k[17][1]);
line(k[17][0], k[17][1], k[18][0], k[18][1]);
line(k[18][0], k[18][1], k[19][0], k[19][1]);
line(k[19][0], k[19][1], k[20][0], k[20][1]);
// draw box
x1 = hand.boundingBox.topLeft[0];
y1 = hand.boundingBox.topLeft[1];
x2 = hand.boundingBox.bottomRight[0];
y2 = hand.boundingBox.bottomRight[1];
stroke(0, 0, 255);
strokeWeight(3);
noFill();
rect(x1, y1, x2, y2);
}
}