face track drawing v2

// code modified from https://editor.p5js.org/ml5/sketches/FaceApi_Video_Landmarks

​

let faceapi;

let video, videoGraphic, faceGraphic

let detections;

let setBg = true

// by default all options are set to true

const detection_options = {

    withLandmarks: true,

    withDescriptors: false,

}

​

​

function setup() {

    createCanvas(640, 480);

​

    // load up your video

    video = createCapture(VIDEO);

    video.size(width, height);

    faceGraphic = createGraphics(width,height)

    faceGraphic.translate(width,0)

    faceGraphic.scale(-1,1)

    videoGraphic = createGraphics(width,height)

    videoGraphic.translate(width,0)

    videoGraphic.scale(-1,1)

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

    textAlign(RIGHT);

    video.hide()

}

​

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);

    //if(setBg) {

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

    //}

    //console.log(frameCount)

    image(videoGraphic,0,0,width,height)

    image(faceGraphic, 0,0, width, height)

    if (detections) {

        setBg = false

        if (detections.length > 0) {

            // console.log(detections)

            //drawBox(detections)

            //setTimeout(()=>copyFace(detections),500)

            copyFace(detections)

            //drawLandmarks(detections)

        }

​

    }

    faceapi.detect(gotResults)

}

​

function drawBox(detections){

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

        const alignedRect = detections[i].alignedRect;

        const x = alignedRect._box._x

        const y = alignedRect._box._y

        const boxWidth = alignedRect._box._width

        const boxHeight  = alignedRect._box._height

        noFill();

        stroke(161, 95, 251);

        strokeWeight(2);

        rect(x, y, boxWidth, boxHeight);

    }

}

​

function copyFace(detections) {

  if (mouseIsPressed){

    faceGraphic.clear() // clear the trace of face

  }

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

      const alignedRect = detections[i].alignedRect;

      const x = floor(alignedRect._box._x)

      const y = floor(alignedRect._box._y)

      const boxWidth = floor(alignedRect._box._width)

      const boxHeight  = floor(alignedRect._box._height)

      faceGraphic.copy(video,x,y,boxWidth,boxHeight,x,y,boxWidth,boxHeight)

  }

}

​

function drawLandmarks(detections){

    noFill();

    stroke(161, 95, 251)

    strokeWeight(2)

​

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

        const mouth = detections[i].parts.mouth; 

        const nose = detections[i].parts.nose;

        const leftEye = detections[i].parts.leftEye;

        const rightEye = detections[i].parts.rightEye;

        const rightEyeBrow = detections[i].parts.rightEyeBrow;

        const leftEyeBrow = detections[i].parts.leftEyeBrow;

​

        drawPart(mouth, true);

        drawPart(nose, false);

        drawPart(leftEye, true);

        drawPart(leftEyeBrow, false);

        drawPart(rightEye, true);

        drawPart(rightEyeBrow, false);

​

    }

​

}

​

function drawPart(feature, closed){

    beginShape();

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

        const x = feature[i]._x

        const y = feature[i]._y

        vertex(x, y)

    }

    if(closed === true){

        endShape(CLOSE);

    } else {

        endShape();

    }

}