Face.Mask

let faceapi;

let video;

let detections;

​

let colors = ['#9d3219', '#e8cfbc', '#442e59', '#D91E1E'];

let colors2 = ['#0AADBF', '#e8cfbc', '#D95A4E', '#F2C12E'];

let colors3 = ['#B4CF66', '#D9325E', '#146152', '#F2C12E'];

let colors4 = ['#2CBF7B', '#F25116', '#146152', '#F2EB85'];

let currentColor;

let currentColor2;

let currentColor3;

let currentColor4;

​

let sim= 436;

​

// by default all options are set to true

const detectionOptions = {

  withLandmarks: true,

  withDescriptors: false,

};

​

function setup() {

  createCanvas(360, 270);

​

  // load up your video

  video = createCapture(VIDEO);

  video.size(width, height);

  // video.hide(); // Hide the video element, and just show the canvas

  faceapi = ml5.faceApi(video, detectionOptions, modelReady);

  textAlign(RIGHT);

  currentColor = random(colors);

  currentColor2= random(colors2);

  currentColor3= random(colors3);

  currentColor4= random(colors4);

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

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

  if (detections) {

    if (detections.length > 0) {

      // console.log(detections)

      drawBox(detections);

      //drawLandmarks(detections);

    }

  }

  faceapi.detect(gotResults);

}

​

function myExtraOrdinaryMask() {

  //kafasının tacı sol

  fill(currentColor4);

  {beginShape();

curveVertex(436,143);

curveVertex(436,143); 

curveVertex(284,206);  

curveVertex(436,258);

curveVertex(436,253);

endShape(CLOSE);}

  //kafasının tacı sağ 

  beginShape();

curveVertex(436, 143);

curveVertex(436, 143); 

curveVertex(436 + (sim - 284), 206); 

curveVertex(436, 258); 

curveVertex(436, 253);

endShape(CLOSE);

​

  //taç süsleri sol 

  fill(currentColor2);

  triangle(436, 144, 425, 192, 385,161);

  fill(currentColor);

  triangle(425, 192, 385,161,345,173);

  fill(currentColor3);

  triangle(425, 192, 345,173,308,189);

  fill(currentColor2);

  triangle(425, 192,308,189,325,229);

  //taç süsleri sağ

  fill(currentColor2);

  triangle(sim + (sim-436), 144,sim + (sim-425), 192, sim + (sim-385),161);

  fill(currentColor3);

  triangle(sim + (sim-425), 192, sim + (sim-385),161,sim + (sim-345),173);

  fill(currentColor);

  triangle(sim + (sim-425), 192, sim + (sim-345),173,sim + (sim-308),189);

  fill(currentColor2);

  triangle(sim + (sim-425), 192,sim + (sim-308),189,sim + (sim-325),229);

  //maskenin üst yüzü

  fill(68,46,89);

  ellipse(435,350,280,270);

  //üst yüzünün dekor dairesi

  fill(currentColor2);

  ellipse(435,270,150,70);

  //maskesi üstü

  fill(currentColor);

  {beginShape();

  vertex(303,348); 

  vertex(333,303); 

  vertex(436,270); 

  vertex(546,303); 

  vertex(572,348);

  endShape(CLOSE);}  

  //maskesi altı 

  fill(68,46,89);

{beginShape();

vertex(303,348); 

vertex(303,422); 

vertex(436,518); 

vertex(572,422); 

vertex(572,348);

endShape(CLOSE);}  

  //maske çene kısmı 

  fill(68,46,89);

{beginShape();

curveVertex(303,422); 

curveVertex(303,422); 

curveVertex(306,475); 

curveVertex(436,640);

curveVertex(572,472);

curveVertex(573,422);

curveVertex(573,422);

  endShape(CLOSE);}  

//gözler sol

push();

fill(0,0,0);

ellipse(379,380,70,60);

// Gözler sağ

ellipse(sim + (sim-379), 380, 70, 60);

pop();

​

//göz bebegi sol

push();

fill(255);

ellipse(379,380,72,15); 

// Göz bebekleri sağ

ellipse(sim + (sim-379), 380, 72, 15);

pop();

​

//yüz süsleri

//üst daireler sol

fill(currentColor2);

circle(333,343,20);

fill(currentColor3);

circle(373,333,20);

fill(currentColor4);

circle(411,329,20);

//üst daireler sağ

fill(currentColor4);

circle(sim + (sim-333),343,20);

fill(currentColor3);

circle(sim + (sim-373),333,20);

fill(currentColor2);

circle(sim + (sim-411),329,20);

//alt daireler sol 

push();

fill(currentColor2);

circle(337,410,15);

fill(0);

circle(364,420,15);

fill(currentColor2);

circle(396,419,15);

//alt daireler sağ 

fill(currentColor2);

circle(sim + (sim-337),410,15);

fill(0);

circle(sim + (sim-364),420,15);

fill(currentColor2);

circle(sim + (sim-396),419,15);

pop();

//yanak çizgisi sol 

fill(currentColor2);

{beginShape();

curveVertex(300,390);

curveVertex(303,389);

curveVertex(340,440);

curveVertex(400,477); 

curveVertex(400,484);

curveVertex(344,450);

curveVertex(311,422);

curveVertex(300,390); 

endShape(CLOSE);}

//yanak çizgisi sağ 

fill(currentColor3);

{beginShape();

curveVertex(sim + (sim-300),390);

curveVertex(sim + (sim-303),389);

curveVertex(sim + (sim-340),440);

curveVertex(sim + (sim-400),477); 

curveVertex(sim + (sim-400),484);

curveVertex(sim + (sim-344),450);

curveVertex(sim + (sim-311),422);

curveVertex(sim + (sim-300),390); 

endShape(CLOSE);}

​

//burun

  fill(currentColor);

{beginShape();

vertex(430,339); 

vertex(391,516); 

vertex(436,534); 

endShape(CLOSE);}

​

//burun sağ

{beginShape();

vertex(sim + (sim-430),339); 

vertex(sim + (sim-391),516); 

vertex(sim + (sim-436),534); 

endShape(CLOSE);} 

​

//burun üstü sol

  fill(currentColor2);

  {beginShape();

vertex(430,339); 

vertex(403,504); 

vertex(436,516); 

endShape(CLOSE);}

​

//burun üstü sağ

{beginShape();

vertex(sim + (sim-430),339); 

vertex(sim + (sim-403),504); 

vertex(sim + (sim-436),516); 

endShape(CLOSE);}

​

//ağız içi siyah

push();

fill(0,0,0);

ellipse(436,562,72,20);

pop();

​

//disler

ellipse(436,553,72,15); 

//alt dudak sol 

  fill(currentColor4);

{beginShape();

vertex(398,563); 

vertex(398,579); 

vertex(436,605);

vertex(436,572); 

endShape(CLOSE);}

//alt dudak sağ

{beginShape();

vertex(sim + (sim-398),563); 

vertex(sim + (sim-398),579); 

vertex(sim + (sim-436),605);

vertex(sim + (sim-436),572); 

endShape(CLOSE);}

//üst dudak sol

  fill(currentColor);

{beginShape();

vertex(398,563); 

vertex(398,547); 

vertex(436,540);

vertex(436,548); 

endShape(CLOSE);}

//üst dudak sağ

{beginShape();

vertex(sim + (sim-398),563); 

vertex(sim + (sim-398),547); 

vertex(sim + (sim-436),540);

vertex(sim + (sim-436),548); 

endShape(CLOSE);}

//çeneüçgenleri sol 

fill(currentColor4);

triangle(383,599,388,582,366,576);

triangle(366,576,371,552,350,551);

triangle(350,551,358,530,336,526);

triangle(336,526,343,507,321,502);

​

//çeneüçgenleri sağ 

triangle(sim + (sim-383),599,sim + (sim-388),582,sim + (sim-366),576);

triangle(sim + (sim-366),576,sim + (sim-371),552,sim + (sim-350),551);

triangle(sim + (sim-350),551,sim + (sim-358),530,sim + (sim-336),526);

triangle(sim + (sim-336),526,sim + (sim-343),507,sim + (sim-321),502);

​

​

    pop();

}

​

function drawBox(detections) {

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

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

    push();

    translate(x - 105, y - 105);

    scale(0.4, 0.4);

    myExtraOrdinaryMask();

    pop();

  }

}

​

function drawLandmarks(detections) {

  noFill();

  stroke(161, 95, 251);

  strokeWeight(2);

​

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

    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 += 1) {

    const x = feature[i]._x;

    const y = feature[i]._y;

    vertex(x, y);

  }

​

  if (closed === true) {

    endShape(CLOSE);

  } else {

    endShape();

  }

}