let angle, px, py;

let poseNet;

let pose;

​

function setup() {

  createCanvas(680, 400, WEBGL);

  setAttributes('antialias', true);

  video = createCapture(VIDEO);

  video.hide();

  background(255);

  poseNet = ml5.poseNet(video, modelLoaded);

  poseNet.on('pose', gotPoses);

}

​

function modelLoaded(){

  console.log('poseNet ready');

}

​

function gotPoses(poses){

  //console.log(poses);

  if (poses.length > 0) {

    pose = poses[0].pose;

  } 

}

​

function draw() {

  if(pose){

    fill(0);

    noStroke();

    push(); 

    let eyeR = pose.rightEye;

    let eyeL = pose.leftEye;

    let d = dist(eyeR.x, eyeR.y, eyeL.x, eyeL.y);

    console.log(d);

    background(255);

    // translate(width,0);

    // scale(-1, 1);

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

    fill(170,166,240);

    rotateX(frameCount * 0.01);

    rotateZ(frameCount * 0.01);

    ngon(sides, d, d, d);

    pop();

    rect(pose.nose.x,pose.nose.y,50,50);

    translate(50,50);

    scale(1.2);

    rect(pose.nose.x,pose.nose.y,50,50);

    translate(50,50);

    scale(1.2);

    rect(pose.nose.x,pose.nose.y,50,50);

   }

}

​

function mouseClicked() {

  if (sides > 6) {

    sides = 3;

  } else {

    sides++;

  }

}

​

function ngon(n, x, y, d) {

  beginShape(TESS);

  for (let i = 0; i < n + 1; i++) {

    angle = TWO_PI / n * i;

    px = x + sin(angle) * d / 2;

    py = y - cos(angle) * d / 2;

    vertex(px, py, 0);

  }

  for (let i = 0; i < n + 1; i++) {

    angle = TWO_PI / n * i;

    px = x + sin(angle) * d / 4;

    py = y - cos(angle) * d / 4;

    vertex(px, py, 0);

  }

  endShape();

}