// 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 latestNoses = [];

​

function setup() {

  myVideo = createCapture(VIDEO);

  myVideo.hide()

  createCanvas(640, 480);

  poseNet = ml5.poseNet(myVideo, gotModel);

  noStroke();

  fill(155, 255, 10)

}

function gotModel(){

  poseNet.on('pose', gotResults);

}

​

function gotResults(results){

  myResults = results;

  if(myResults[0]) {

    //console.log(myResults)

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

    latestNoses.push(nose)

    if (latestNoses.length > 50){

      latestNoses.shift();

    }

  }

}

function draw() {

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

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

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

    ellipse(latestNoses[i].x, latestNoses[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);

}