Portrait Faceparts Collage

let nase, augeL, augeR, augenBrL, augenBrR, uMund, oMund;

let faceapi;

let parts, landmarks;

let video;

​

function preload() {

  nase = loadImage("Nase.png");

  augeL= loadImage("AugeL.png");

  augeR= loadImage("AugeR.png");

  augenBrL= loadImage("AugeBrL.png");

  augenBrR= loadImage("AugeBrR.png");

  uMund= loadImage("Unterlippe.png");

  oMund= loadImage("OberLippe.png");

}

​

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

  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, 300, 480, 0, 40)

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

    pop();

    push(); 

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

    noStroke();

    rotate(a);

    imageMode(CENTER);

    image(augeL,0,0,70,40);

    pop();

    push(); 

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

    noStroke();

    rotate(a);

    imageMode(CENTER);

    image(augeR,0,0,70,40);

    pop();

      push(); 

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

    noStroke();

    rotate(a);

    imageMode(CENTER);

    image(augenBrL,0,0,70,50);

    pop();

    push(); 

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

    noStroke();

    rotate(a);

    imageMode(CENTER);

    image(augenBrR,0,0,80,50);

    pop();

    push(); 

    translate(landmarks[51]._x,landmarks[51]._y+10);

    noStroke();

    rotate(a);

    imageMode(CENTER);

    image(oMund,0,0,100,50);

    pop();

    push(); 

    translate(landmarks[57]._x,landmarks[57]._y+10);

    noStroke();

    rotate(a);

    imageMode(CENTER);

    image(uMund,0,0,100,50);

    pop();

    push();

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

    noStroke();

    rotate(a);

    imageMode(CENTER);

    image(nase,0,0,60,90);

    pop();

  }

}

​

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

}