let video;

let predictions = [];

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  video = createCapture(VIDEO);

  video.hide();

  handpose = ml5.handpose(video, modelReady);

​

​

  // This sets up an event that fills the global variable "predictions"

  // with an array every time new hand poses are detected

  handpose.on("predict", results => {

    predictions = results;

  });

​

  // Hide the video element, and just show the canvas

  video.hide();

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  //background(0);

 push();

  translate(width,0);

  scale(-1, 1);

  image(video, 0, 0, windowWidth, windowHeight);

  pop();

  // We can call both functions to draw all keypoints and the skeletons

  drawKeypoints();

}

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

  let totalX=0;

  let totalY=0;

  let avgctr=0;

  let len=0;

  for (let i = 0; i < predictions.length; i += 1) {

    const prediction = predictions[i];

    len=predictions.lenght*prediction.landmarks.length;

    for (let j = 0; j < prediction.landmarks.length; j += 1) {

      const keypoint = prediction.landmarks[j];

      fill(0, 255, 0);

      noStroke();

      ellipse(windowWidth-map(keypoint[0],0,video.width,0,windowWidth), map(keypoint[1],0,video.height,0,windowHeight), 10, 10);

      totalX+=windowWidth-map(keypoint[0],0,video.width,0,windowWidth);

      totalY+=map(keypoint[1],0,video.height,0,windowHeight);

      avgctr++;

    }

  }

  fill(0,0,255);

  push();

  translate(totalX/avgctr,totalY/avgctr);

  //console.log(totalX/avgctr);

  console.log(totalY/avgctr);

  rotate(avgctr,0,len,0,PI)

  rect(0,0,20,40);

  pop();

}

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

function keyTyped() {

  // $$$ For some reason on Chrome/Mac you may have to press f twice to toggle. Works correctly on Firefox/Mac

  if (key === 'f') {

    toggleFullscreen();

  }

  // uncomment to prevent any default behavior

  // return false;

}

​

// Toggle fullscreen state. Must be called in response

// to a user event (i.e. keyboard, mouse click)

function toggleFullscreen() {

  let fs = fullscreen(); // Get the current state

  fullscreen(!fs); // Flip it!

}