let faceMesh;

let video;

let faces = [];

let options = { maxFaces: 14, refineLandmarks: false, flipHorizontal: false };

let mask;

​

​

function preload() {

  faceMesh = ml5.faceMesh(options);

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  mask = createGraphics(width, height);

  video = createCapture(VIDEO);

  video.size(windowWidth, windowHeight);

  video.hide();

  faceMesh.detectStart(video, gotFaces);

     background(0, 0);

      colorMode(HSB, 100)

​

}

​

function draw() {

  mask.clear();

  const facePosition = [];

 // background(0, 0, 0, 2);

      frameRate(10);

​

    // for (let f = 0; f < 100; f++) {

    //     background(f, 100, 100);

    // }

   colorMode(HSB)

​

    let x = frameCount % 100;

   // background(x, 100, 100, 2);

​

  const shouldDraw = true;

  if (shouldDraw) {

    // draw the faces' bounding boxes

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

      let face = faces[i];

​

      facePosition.push({

        x: face.faceOval.x + face.faceOval.width / 2,

        y: face.faceOval.y + face.faceOval.height / 2,

        widthFake: face.faceOval.width,

        heightFake: face.faceOval.height,

      });

      mask.ellipse(

        face.faceOval.x + face.faceOval.width / 2,

        face.faceOval.y + face.faceOval.height / 2,

        face.faceOval.width,

        face.faceOval.height

      );

      const offset = 40;

​

    }

//            for (i = 0; i < facePosition.length; i++) {

​

//        fill(x, 100, 100);

//         noStroke()

//         ellipse(facePosition[i].x,

//         facePosition[i].y,

//         facePosition[i].widthFake*1.1,

//         facePosition[i].heightFake*1.1)

//         }

​

    video.mask(mask);

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

​

  }

}

​

function gotFaces(results) {

  faces = results;

}

​