let capture;
let font;

let segmenter;
let people;

function setup() {

  createCanvas(640, 480);

  capture = createCapture(VIDEO, captureLoaded);

  background(255);

}

function captureLoaded() {
  console.log("capture loaded...");
  initModel();
}

async function initModel() {
  const model = bodySegmentation.SupportedModels.MediaPipeSelfieSegmentation; // or 'BodyPix'

  const segmenterConfig = {
    runtime: 'tfjs', // or 'tfjs'
    modelType: 'general' // or 'landscape'
  };

  segmenter = await bodySegmentation.createSegmenter(model, segmenterConfig);

  
}

async function getPose() {
  people = await segmenter.segmentPeople(capture.elt);
}

function draw() {
    background(0,1);
  if (segmenter) {
    getPose();
    getPose2();
  }
  drawPoseInfo();
}


function drawPoseInfo() {
    noStroke();
    fill(255, 0, 0, 128);

  if (people && people.length > 0) {
    //let img = people[0].mask.toImageData().ImageData;
    //console.log(img)
    /*
    for (var i = 0; i < people.length; i++) {
      for (var j = 0; j<people[i].keypoints.length; j++) {
        if (people[i].keypoints[j].score > 0.1) {
          let posX = width-int(people[i].keypoints[j].x);
          let posY = height-int(people[i].keypoints[j].y);
          
          circle(posX, posY, 10);

        }
      }
    }*/

    
  }
}


function keyPressed() {
  noLoop();
}

async function getPose2(){

  const img = capture.elt;


  const segmentation = await segmenter.segmentPeople(img);
  
  // The mask image is an binary mask image with a 1 where there is a person and
  // a 0 where there is not.
  const coloredPartImage = await bodySegmentation.toBinaryMask(segmentation);
  const opacity = 0.7;
  const flipHorizontal = false;
  const maskBlurAmount = 0;
  const canvas = document.getElementById('canvas');
  // Draw the mask image on top of the original image onto a canvas.
  // The colored part image will be drawn semi-transparent, with an opacity of
  // 0.7, allowing for the original image to be visible under.
  bodySegmentation.drawMask(
      canvas, img, coloredPartImage, opacity, maskBlurAmount,
      flipHorizontal);
}