​

// 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);

  }

}

​

​