let video;

let predictions = [];

​

let handX;

let handY;

​

let DIM = 20;

​

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  video = createCapture(VIDEO);

  video.size(width, height);

​

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

  createEasyCam();

  // createEasyCam(p5.RendererGL);

  createEasyCam({distance:500});

  document.oncontextmenu = ()=>false;

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  background(0)

  // lights();

  // box(100,100,100,0,0);

  for(let i = 0; i<DIM;i++){

    for(let j = 0; j<DIM;j++){

    for(let k = 0; k<DIM;k++){

      let x = map(i,0,DIM,-100,100);

      let y = map(j,0,DIM,-100,100);

      let z = map(k,0,DIM,-100,100);

      stroke(225);

      point(x,y,z);

  }

  }

  }

  push();

  translate(windowWidth/2, -windowHeight/2);

  push();

  scale(-1, 1);

  // image(video, 0, 0, width, height);

​

​

​

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

  drawKeypoints();

​

  pop();

  pop();

  // print(handX+"    "+handY);

}

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

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

    const prediction = predictions[i];

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

      const keypoint = prediction.landmarks[j];

      fill(0, 255, 0);

      if(i==0 && j==5){

        fill(255, 0, 0);

         }

      noStroke();

      ellipse(keypoint[0], keypoint[1], 10, 10);

    }

    handX = predictions[0].landmarks[5][0];

    handY = predictions[0].landmarks[5][1];

  }

}

​