// the closer your nose is to the camera, the thicker the stroke

// we find the distance of nose to screen by checking the distance between your eyes

// circles get cleared after a while. Implemented using FIFO and arrays

​

let poseNet;

let myVideo;

let myResults;

let latestLeft = [];

let latestRight = [];

let rectSizeLeft = 50;

let rectSizeRight = 50;

​

function setup() {

  myVideo = createCapture(VIDEO);

  myVideo.hide()

  createCanvas(640, 480);

  poseNet = ml5.poseNet(myVideo, gotModel);

  noStroke();

  fill(155, 255, 10)

  rectMode(CENTER)

}

function gotModel(){

  poseNet.on('pose', gotResults);

}

​

function gotResults(results){

  myResults = results;

  if(myResults[0]) {

    const left = myResults[0].pose.leftWrist;

    const leftDist = dist(left.x, left.y, 100, 100);

    if (leftDist < size/2){

      rectSizeLeft += 10;

    }

    latestLeft.push(left)

    if (latestLeft.length > 50){

      latestLeft.shift();

    }

    const right = myResults[0].pose.rightWrist;

    latestRight.push(right)

    if (latestRight.length > 50){

      latestRight.shift();

  }

  }

}

function draw() {

  image(myVideo, 0, 0, width, height);

  fill(20, 200, 200);

  rect(500, 100, rectSizeLeft, rectSizeLeft);

  fill(155,20, 200);

  rect(100, 100, rectSizeRight, rectSizeRight);

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

    fill(`rgba(20,200, 200, ${i/50})`)

    ellipse(latestLeft[i].x, latestLeft[i].y, 5+i*1, 5+i*1)

  }

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

    fill(`rgba(155,20, 200, ${i/50})`)

    ellipse(latestRight[i].x, latestRight[i].y, 5+i*1, 5+i*1)

  }

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

  // if (myResults && myResults[0]){

  //   const nose = myResults[0].pose.nose;

  //   //ellipse(nose.x, nose.y, 15, 15)

  //   const leftEye = myResults[0].pose.leftEye;

  //   const rightEye = myResults[0].pose.rightEye;

  //   const size = dist(rightEye.x, rightEye.y,leftEye.x, leftEye.y);

  //   //fill(random() * 255, random() * 255, random() * 255) // ranbow fill

  //   //fill(random() * 255, 255, 10)

  //   ellipse(nose.x, nose.y, size/4, size/4);

}