mask

let faceapi;

let video;

let detections = null; // Initialize detections as null

​

// by default all options are set to true

const detection_options = {

  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, detection_options, modelReady);

  textAlign(RIGHT);

}

​

function modelReady() {

  console.log('Model ready!');

  faceapi.detect(gotResults);

}

​

function gotResults(err, results) {

  if (err) {

    console.error(err);

    return;

  }

  detections = results; // Store the results

  faceapi.detect(gotResults); // Call detect again at the end of gotResults

}

​

function draw() {

  background(255); // Reset the background every frame

  image(video, 0, 0, width, height); // Draw the video

​

  if (detections && detections.length > 0) {

    drawBox(detections); // Draw the mask on the face

  }

}

​

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;

​

        // Yüzün merkez noktasını hesapla

        const nose = detections[i].parts.nose; // Burun landmarklarını al

        let noseTipX = 0;

        let noseTipY = 0;

        if (nose.length > 0) {

            // Burun landmarklarının ortalamasını alarak burun ucunu bul

            nose.forEach(part => {

                noseTipX += part._x;

                noseTipY += part._y;

            });

            noseTipX = noseTipX / nose.length;

            noseTipY = noseTipY / nose.length;

        }

        push(); // Yeni bir çizim matrisi başlat

        // Maske çizimini yüzün orta noktasına taşı

        translate(noseTipX - 44, noseTipY - 44); 

        // Maskeyi yüzün boyutuna göre ölçeklendir

        scale(boxWidth / 220, boxHeight / 260); 

        // Maskeyi çizmek için fonksiyon çağır

        drawMask(); 

        pop(); // Çizim matrisini geri yükle

    }

}

​

function drawMask() {

strokeCap(PROJECT);

  strokeJoin(MITER);

​

  // Ana yüz şekli ve detaylar

  fill('#FFFFFF');

  stroke('#1d1d1b');

  beginShape();

  vertex(138.4,377.94);

  vertex(218.5,338.46);

  vertex(242.17000000000002,237);

  vertex(262.63,224.44);

  vertex(263.29,188.85);

  bezierVertex(263.29,188.85,350.2,4.39,141.92,0.5);

  bezierVertex(-66.39,0.5,16.98,190.77,16.98,190.77);

  vertex(16.98,226.37);

  vertex(37.2,239.31);

  vertex(59.040000000000006,337.2);

  vertex(138.39,377.94);

  endShape(CLOSE);

​

  // Göz detayları

  fill("#3c3c3b");

  beginShape();

  vertex(50.78,143.17);

  bezierVertex(50.78,143.17,48.620000000000005,157.73,58.06,174.72);

  bezierVertex(76.4,164.45,99.32,182.54,99.32,182.54);

  vertex(92.30999999999999,162.85);

  bezierVertex(92.30999999999999,162.85,64.66999999999999,156.78,50.77999999999999,143.16);

  endShape(CLOSE);

  fill("#3c3c3b");

  beginShape();

  vertex(238.1,143.17);

  bezierVertex(238.1,143.17,240.26,157.73,230.82,174.72);

  bezierVertex(212.48,164.45,189.56,182.54,189.56,182.54);

  vertex(196.57,162.85);

  bezierVertex(196.57,162.85,224.20999999999998,156.78,238.1,143.16);

  endShape(CLOSE);

​

  // Ağız detayı

  fill("#c6c6c6");

  beginShape();

  vertex(109.09,210.19);

  vertex(137.81,255.69);

  vertex(182.51,210.99);

  vertex(109.09,210.19);

  endShape(CLOSE);

​

  // Gövde detayı

  fill("#706f6f");

  beginShape();

  vertex(150.41,156.92);

  vertex(150.41,220.1);

  bezierVertex(150.41,220.1,151.77,236.68,142.26999999999998,236.68);

  bezierVertex(132.76,236.68,134.13,220.10000000000002,134.13,220.10000000000002);

  vertex(134.13,156.92000000000002);

  endShape(CLOSE);

​

​

  // Diğer çizgiler

  strokeWeight(2);

  line(16.98, 226.36, 81.16, 264.52); // Sol alt çizgi

  line(262.57, 223.55, 198.39, 261.71); // Sağ alt çizgi

​

  // Gözler ve burun için daireler

  strokeWeight(1);

  arc(143.27, 84.39, 24.81, 24.81, 0, TWO_PI); // Sol göz

  arc(140.44, 32.68, 26.36, 26.36, 0, TWO_PI); // Sağ göz

  arc(142.46, 134.54, 24.81, 24.81, 0, TWO_PI); // Burun

​

  // Ayaklar için elipsler

  fill("#9d9d9c");

  ellipse(138.72, 347.62, 27.38*2, 25.85*2); // Ayak

​

  // Ayakların detay çizgileri

  fill('#1d1d1b');

  triangle(120.21, 300.12, 125.67, 312.25, 131.67, 300.12); // Sol ayak çizgisi

  triangle(148.66, 300.12, 152.98, 312.25, 159.25, 300.12); // Sağ ayak çizgisi

​

  // Diğer eksik çizgiler

  stroke('#1d1d1b');

  line(105.79, 300.12, 171.31, 300.12); // Ağzın altındaki çizgi

  noFill(); // İçi dolu olmasını istemiyorsanız

  stroke('#1d1d1b'); // Çizgi rengini belirle

  strokeWeight(5); // Çizgi kalınlığını belirle

  strokeCap(PROJECT);

  strokeJoin(MITER);

  beginShape();

  vertex(89.39, 8.85);

  vertex(38.96, 2.64);

  vertex(2.96, 44.58);

  vertex(20.49, 80.78);

  vertex(66.33, 62.91);

  vertex(43.89, 23.11);

  vertex(26.96, 55.77);

  endShape(OPEN); // 

}

​

function drawLandmarks(detections) {

  noFill();

  stroke(161, 95, 251);

  strokeWeight(2);

​

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

    // Draw facial landmarks

    drawPart(detections[i].parts.mouth, true);

    drawPart(detections[i].parts.nose, false);

    drawPart(detections[i].parts.leftEye, true);

    drawPart(detections[i].parts.leftEyeBrow, false);

    drawPart(detections[i].parts.rightEye, true);

    drawPart(detections[i].parts.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) {

    endShape(CLOSE);

  } else {

    endShape();

  }

}

​