p5.js Web Editor

xxxxxxxxxx
let faceMesh;
let video;
let faces = [];
let options = { maxFaces: 9, refineLandmarks: false, flipHorizontal: false };
let bg;
let img1;
let img2;
let img3;
let img4;
let img5;
let img6;
let img7;
let img8;
let img9;
​
function preload() {
  faceMesh = ml5.faceMesh(options);
  bg = loadImage("ok.jpg");
}
​
function setup() {
  createCanvas(windowWidth, (windowWidth * 9) / 16);
​
  video = createCapture(VIDEO);
  video.size(640, 480);
  video.hide();
  imageMode(CENTER);
​
  faceMesh.detectStart(video, gotFaces);
}
​
function draw() {
  // draw the webcam video
  // image(video, 0, 0, width, height);
  // image(bg, 0, 0, width, height);
  image(bg, width / 2, height / 2, width, height);
​
  //  background(255)
  // draw the faces' bounding boxes
  for (let i = 0; i < faces.length; i++) {
    let face = faces[i];
​
   /* 
   // draw the bounding box of face parts
    fill(0, 255, 0, 50);
    stroke(0, 255, 0);
    rect(face.lips.x, face.lips.y, face.lips.width, face.lips.height);
    rect(
      face.leftEye.x,
      face.leftEye.y,
      face.leftEye.width,
      face.leftEye.height
    );
    rect(
      face.leftEyebrow.x,
      face.leftEyebrow.y,
      face.leftEyebrow.width,
      face.leftEyebrow.height
    );
    rect(
      face.rightEye.x,
      face.rightEye.y,
      face.rightEye.width,
      face.rightEye.height
    );
    rect(
      face.rightEyebrow.x,
      face.rightEyebrow.y,
      face.rightEyebrow.width,
      face.rightEyebrow.height
    );
    rect(
      face.faceOval.x,
      face.faceOval.y,
      face.faceOval.width,
      face.faceOval.height
    );
    */
​
    let ratio = face.faceOval.height / face.faceOval.width;
​
    if (i == 0) {
      img1 = video.get(
        face.faceOval.x,
        face.faceOval.y,
        face.faceOval.width,
        face.faceOval.height
      );
​
       image(bg,  width * 0.723,
        height - height * 0.594,
        width * 0.097,
        width * 0.097 * ratio)
      
      image(
        img1,
        width * 0.723,
        height - height * 0.594,
        width * 0.097,
        width * 0.097 * ratio
      );
      
     
      
    } else if (i == 1) {
      img2 = video.get(
        face.faceOval.x,
        face.faceOval.y,
        face.faceOval.width,
        face.faceOval.height
      );
​
​
      
      image(
        img2,
        width * 0.516,
        height - height * 0.593,
        width * 0.097,
        width * 0.097 * ratio
      );
    }
​
      else if (i == 2) {
        
          img3 = video.get(
      face.faceOval.x,
      face.faceOval.y,
      face.faceOval.width,
      face.faceOval.height
    );
​
    image(
      img3,
      width * 0.396,
      height - height * 0.586,
      width * 0.042,
      width * 0.042 * ratio
    );
        
      }
    
   else if (i == 3) {
         img4 = video.get(
      face.faceOval.x,
      face.faceOval.y,
      face.faceOval.width,
      face.faceOval.height
    );
​
    image(
      img4,
      width * 0.187,
      height - height * 0.627,
      width * 0.053,
      width * 0.053 * ratio
    );
     
   }
    
      else if (i == 4) {
       img5 = video.get(
      face.faceOval.x,
      face.faceOval.y,
      face.faceOval.width,
      face.faceOval.height
    );
​
    image(
      img5,
      width * 0.272,
      height - height * 0.683,
      width * 0.026,
      width * 0.026 * ratio
    );
     
   }  else if (i == 5) {
        img6 = video.get(
      face.faceOval.x,
      face.faceOval.y,
      face.faceOval.width,
      face.faceOval.height
    );
​
    image(
      img6,
      width * 0.615,
      height - height * 0.588,
      width * 0.033,
      width * 0.033 * ratio
    );
     
   }  else if (i == 6) {
     
​
    img7 = video.get(
      face.faceOval.x,
      face.faceOval.y,
      face.faceOval.width,
      face.faceOval.height
    );
​
    image(
      img7,
      width * 0.915,
      height - height * 0.623,
      width * 0.033,
      width * 0.033 * ratio
    );
​
     
   }  else if (i == 7) {
      
    img8 = video.get(
      face.faceOval.x,
      face.faceOval.y,
      face.faceOval.width,
      face.faceOval.height
    );
​
    image(
      img8,
      width * 0.146,
      height - height * 0.754,
      width * 0.024,
      width * 0.024 * ratio
    );
​
     
   }  else if (i == 8) {
     
     
​
    img9 = video.get(
      face.faceOval.x,
      face.faceOval.y,
      face.faceOval.width,
      face.faceOval.height
    );
​
    image(
      img9,
      width * 0.002,
      height - height * 0.78,
      width * 0.044,
      width * 0.044 * ratio
    );
   } 
​
  }
}
​
function gotFaces(results) {
  faces = results;
}
​
Cookies

Sketch Files

Console

Preview
