Portrait Faceparts Geo

let img;

let faceapi;

let parts, landmarks;

let video;

​

function preload() {

  img = loadImage("image.jpg");

}

​

function setup() {

  createCanvas(640, 480);

  background(100);

​

  video = createCapture(VIDEO);

  video.size(640, 480);

  video.hide();

​

  //faceapi = ml5.faceApi(modelLoaded);

  faceapi = ml5.faceApi(video, modelLoaded);

}

​

function draw() {

  background(255,255,0);

  //image(video,0,0);

​

  if (parts != null) {

​

    // Separate Parts

    stroke(255, 0, 100);

    beginShape();

    for (i = 0; i < parts.mouth.length; i++)

    //  ellipse(parts.mouth[i]._x, parts.mouth[i]._y, 5, 5);

      //text(i, parts.mouth[i]._x, parts.mouth[i]._y);

    //  vertex(parts.mouth[i]._x, parts.mouth[i]._y);

    endShape(CLOSE);

​

    //All Landmarks

    stroke(100);

    noFill();

    beginShape();

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

      //vertex(landmarks[i]._x, landmarks[i]._y);

      //text(i, landmarks[i]._x, landmarks[i]._y);

    }

    endShape();

    //KOPF

    push();

    let x = (landmarks[8]._x - landmarks[27]._x)

    let y = (landmarks[8]._y - landmarks[27]._y)

    let m = Math.sqrt(x * x + y * y)

    e = map(m, 0, 640, 0, 1000)

    let a = Math.atan2(landmarks[27]._y - landmarks[8]._y, landmarks[27]._x - landmarks[8]._x) + PI/2;

    rectMode(CENTER);

    translate(landmarks[29]._x,landmarks[29]._y);

    noStroke();

    fill(255,100,100);

    rotate(a);

    //scale(e);

    rect(0,0,e*0.8,e);

    pop();

    //MUND

      beginShape();

      noStroke();

    //ellipse(parts.mouth[i]._x, parts.mouth[i]._y, 5, 5);

      fill(0,150,250);

      vertex(landmarks[55]._x, landmarks[55]._y);

      vertex(landmarks[57]._x, landmarks[57]._y);

      vertex( landmarks[59]._x, landmarks[59]._y);

      vertex( landmarks[67]._x, landmarks[67]._y);

      vertex( landmarks[65]._x, landmarks[65]._y);

      vertex(landmarks[55]._x, landmarks[55]._y);

      //vertex( landmarks[59]._x, landmarks[59]._y);

      endShape();

      beginShape();

      noStroke();

      fill(0,200,255);

      vertex(landmarks[48]._x, landmarks[48]._y);

      vertex(landmarks[54]._x, landmarks[54]._y);

      vertex( landmarks[52]._x, landmarks[52]._y);

      vertex( landmarks[50]._x, landmarks[50]._y);

      vertex( landmarks[48]._x, landmarks[48]._y);

      endShape();

    beginShape();

    noFill();

    stroke(0,150,250);

    vertex(landmarks[59]._x, landmarks[59]._y);

    vertex(landmarks[48]._x, landmarks[48]._y);

    endShape();

    beginShape();

    noFill();

    stroke(0,150,250);

    vertex(landmarks[55]._x, landmarks[55]._y);

    vertex(landmarks[54]._x, landmarks[54]._y);

    endShape();

    /*

    //OHR L

    beginShape();

    //noFill();

    noStroke();

    fill(50,100,100);

    //stroke(100,200,100);

    vertex(landmarks[1]._x, landmarks[1]._y);

    vertex(landmarks[2]._x-10, landmarks[2]._y);

    vertex(landmarks[3]._x, landmarks[3]._y);

    endShape();

      //OHR R

    beginShape();

    //noFill();

    noStroke();

    fill(50,100,100);

    //stroke(100,200,100);

    vertex(landmarks[15]._x, landmarks[15]._y);

    vertex(landmarks[14]._x+10, landmarks[14]._y);

    vertex(landmarks[13]._x, landmarks[13]._y);

    endShape();

    //KINN

      beginShape();

    //noFill();

    noStroke();

    fill(100,100,50);

    //stroke(100,200,100);

    vertex(landmarks[7]._x, landmarks[7]._y);

    vertex(landmarks[8]._x, landmarks[8]._y);

    vertex(landmarks[9]._x, landmarks[9]._y);

    endShape();

    */

    //NASE

      beginShape();

      noStroke();

      fill(255,200,100);

      vertex(landmarks[35]._x, landmarks[35]._y);

      vertex(landmarks[33]._x, landmarks[33]._y);

      vertex( landmarks[31]._x, landmarks[31]._y);

      vertex( landmarks[27]._x, landmarks[27]._y);

      vertex( landmarks[35]._x, landmarks[35]._y);

      endShape();

    //AUGE L

      beginShape();

      noStroke();

      fill(100,200,100);

      vertex(landmarks[37]._x-10, landmarks[37]._y);

      vertex(landmarks[38]._x+10, landmarks[38]._y);

      vertex( landmarks[40]._x+10, landmarks[40]._y);

      vertex( landmarks[41]._x-10, landmarks[41]._y+10);      

      endShape();

    //AUGE R

      beginShape();

      noStroke();

      fill(100,200,100);

      vertex(landmarks[43]._x-10, landmarks[43]._y);

      vertex(landmarks[44]._x+10, landmarks[44]._y);

      vertex( landmarks[46]._x+10, landmarks[46]._y+10);

      vertex( landmarks[47]._x-10, landmarks[47]._y);     

      endShape();

    //AUENBRAUE R

      beginShape();

      noStroke();

      fill(100,200,250);

      vertex(landmarks[22]._x, landmarks[22]._y);

    vertex(landmarks[23]._x, landmarks[23]._y);

      vertex(landmarks[25]._x, landmarks[25]._y);

      vertex( landmarks[26]._x, landmarks[26]._y);

      endShape();

    //AUENBRAUE L

      beginShape();

      noStroke();

      fill(100,200,250);

      vertex(landmarks[21]._x, landmarks[21]._y);

    vertex(landmarks[20]._x, landmarks[20]._y);

      vertex(landmarks[18]._x, landmarks[18]._y);

      vertex( landmarks[17]._x, landmarks[17]._y);

      endShape();

  }

}

​

function modelLoaded() {

  print("Model loaded");

​

  faceapi.detect(gotResults);

}

​

function gotResults(error, result) {

  if (error) {

    console.log("error");

    return;

  }

​

  if (result.length > 0) {

    parts = result[0].parts;

    landmarks = result[0].landmarks.positions;

  }

  faceapi.detect(gotResults);

}

​

function boundingbox(coords) {

  let xmin = 10000;

  let ymin = 10000;

  let xmax = -10000;

  let ymax = -10000;

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

    if (coords[i]._x > xmax)

      xmax = coords[i]._x;

    if (coords[i]._x <= xmin)

      xmin = coords[i]._x;

    if (coords[i]._y > ymax)

      ymax = coords[i]._y;

    if (coords[i]._y <= ymin)

      ymin = coords[i]._y;

  }

  return ([xmin, ymin, xmax - xmin, ymax - ymin]);

}