let faceapi;

let detections = [];

let w = 1920/5;

let h = 1080/5;

let time_inference;

​

// Video

let video;

​

function setup() {

  createCanvas(w, h);

​

  // Creat the video and start face tracking

  video = createCapture(VIDEO);

  video.hide();

  video.size(width, height);

  // Only need landmarks for this example

  const faceOptions = {

    withLandmarks: true,

    withExpressions: true,

    withDescriptors: false,

    minConfidence: 0.5,

    withTinyNet: false

  };

​

  faceapi = ml5.faceApi(video, faceOptions, faceReady);

  frameRate(30);

}

​

// Start detecting faces

function faceReady() {

  faceapi.detect(gotFaces);

}

​

// Got faces

let t0;

​

function gotFaces(error, result) {

  time_inference = millis() - t0;

  console.log(time_inference);

  if (error) {

    console.log(error);

    return;

  }

  detections = result;

​

  console.log("result of detections:", detections);

​

  if (detections.length > 0) {

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

      let expressions = detections[i].expressions;

      console.log(expressions);

      for (let key in expressions) {

​

        if (key == "neutral") {

          select("#neutral").value(parseInt(expressions[key] * 100));

        }

        else if (key == "happy") {

          select("#happy").value(parseInt(expressions[key] * 100));

        }

        else if (key == "sad") {

          select("#sad").value(parseInt(expressions[key] * 100));

        }

        else if (key == "angry") {

          select("#angry").value(parseInt(expressions[key] * 100));

        }

        else if (key == "fearful") {

          select("#fearful").value(parseInt(expressions[key] * 100));

        }

        else if (key == "disgusted") {

          select("#disgusted").value(parseInt(expressions[key] * 100));

        }

        else if( key == "surprised"){

          select("#surprised").value(parseInt(expressions[key] * 100));

        }

      }

    }

  }

​

  faceapi.detect(gotFaces);

  t0 = millis();

}

​

// Draw everything

function draw() {

  background(0);

  textSize(8);

  image(video, 0, 0, w, h);

  text(str(parseInt(frameRate())), 20,20);

​

  // Just look at the first face and draw all the points

  if (detections.length > 0) {

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

      let points = detections[i].landmarks.positions;

      for (let j = 0; j < points.length; j++) {

        stroke(161, 95, 251);

        strokeWeight(4);

        point(points[j].x, points[j].y);

      }

      let expressions = detections[i].expressions;

​

      // let pos = 20;

      // for (let key in expressions) {

      //   noStroke();

      //   text(str(key) + ":" + str(expressions[key]),

      //     detections[i].detection.box.x,

      //     detections[i].detection.box.y + pos);

      //   pos += 10;

      // }

​

    }

  }

​

}