let video;

let detections;

var x=0;

var y=0;

var boxWidth=100;

var boxHeight=100;

​

//ignore this! /////////////////////////////////

// by default all options are set to true

const detection_options = {

  withLandmarks: true,

  withDescriptors: false,

}

/////////////////////////////////

​

​

///start from here///////

function setup() {

  createCanvas(360, 270);

​

  // load up your video

  video = createCapture(VIDEO);

  video.size(width, height);

  video.hide(); // Hide the video element, and just show the canvas

  faceapi = ml5.faceApi(video, detection_options, modelReady)

​

}

​

​

function draw() {

  //this is you visual box 

    noFill();

    stroke(161, 95, 251);

    strokeWeight(2);

    rect(x, y, boxWidth, boxHeight);

  //you can do other things with x,y,box.width or box.height.

  //notice how box.width gets bigger the closer you are to the web cam!

​

}

​

​

​

​

​

​

​

///////ignore everything below here/////

function modelReady() {

  console.log('ready!')

  console.log(faceapi)

  faceapi.detect(gotResults)

​

}

​

function gotResults(err, result) {

  if (err) {

    console.log(err)

    return

  }

  // console.log(result)

  detections = result;

​

  // background(220);

  background(255);

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

  if (detections) {

    if (detections.length > 0) {

      // console.log(detections)

      drawBox(detections)

    }

​

  }

  faceapi.detect(gotResults)

}

​

function drawBox(detections) {

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

    const alignedRect = detections[i].alignedRect;

     x = alignedRect._box._x

     y = alignedRect._box._y

     boxWidth = alignedRect._box._width

     boxHeight = alignedRect._box._height

​

​

  }

​

}