let video;

let predictions = [];

let margin = 50;

let mX, mY;

let screenSize=512;

​

function setup() {

  createCanvas(800, 600);

  video = createCapture(VIDEO);

  video.size(640, 480);

​

  facemesh = ml5.facemesh(video, modelReady);

​

  // This sets up an event that fills the global variable "predictions"

  // with an array every time new predictions are made

  facemesh.on("predict", results => {

    predictions = results;

  });

​

  // Hide the video element, and just show the canvas

  video.hide();

  background("#FBB9C9");

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  drawBackground()

  image(video, margin, margin, 640, 480);

  // We can call both functions to draw all keypoints

  drawKeypoints();

  noStroke()

  mX = map(mouseX, 0, 800, 0, 25)

  mY = map(mouseY, 0, 600, -5, 15)

  c = color(236+mX, 132+mY, 140+mY, 60);

  fill(c)

  for(var i=0+60; i<640+60; i+=20){

    for(var j=0+60; j<480+60; j+=20){

      ellipse(i, j, mX+mY, mX+mY)

    }

  }

  drawForeground()

}

​

function drawForeground(){

}

​

function drawBackground(){

  circle(random(width),random(height), 10)

}

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

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

    const keypoints = predictions[i].scaledMesh;

​

    // Draw facial keypoints.

    for (let j = 0; j < keypoints.length; j += 1) {

      const [x, y] = keypoints[j];

      push()

      translate(margin,margin)

      fill(random(255), 0, 0);

      mX = map(mouseX, 0, 800, -100, 100);

      mY = map(mouseY, 0, 600, -100, 100);

      circle(x+mX, y+mY, random(10,20));

      pop()

    }

  }

}

​

​

function skin(){

    // face

  fill("#FBDBCD"); // pink color

  beginShape();

  // Define the curve points as JavaScript objects

  let points = [{ x: 100, y: 320 }, { x: 100, y: 340 }, { x: 140, y: 390 }, { x: 256, y: 400}]

  noStroke()

  ellipse(256, 340, 156*2, 60*2)

  rectMode(CENTER)

  fill("#F3CDBF")

  rect(256, 340-30, 156*2, 60)

​

  fill("#FBDBCD");

  ellipse(256-156+25,340, 50)

  ellipse(256+156-25,340, 50)

  rect(256, 340-60*1.5, 156*2-50, 60*3)

}

function face(){

  // eyes

  var eye = 55;

  var xp = screenSize/2-eye;

  var yp = 300;

  fill("#5A608F"); // black color

  ellipse(xp, yp, 25, 55); // left eye

  fill("#9B8AAD");

  ellipse(xp, yp+20, 18, 10);

  fill(255);

  let vX = map(mouseX, 0,512, -4, 0)

  let vY = map(mouseY, 0, 512, 0, 5)

  ellipse(xp+2+vX, yp-15+vY, 25/5*2, 55/5*1.7); // left eye

  blendMode(BLEND);

  xp = screenSize/2+eye;

  yp = 300;

  fill("#5A608F"); // black color

  ellipse(xp, yp, 25, 55); // left eye

  fill("#9B8AAD");

  ellipse(xp, yp+20, 18, 10);

  fill(255);

  ellipse(xp+2+vX, yp-15+vY, 25/5*2, 55/5*1.7); // left eye

  blendMode(BLEND);

  //nose

  fill("#EA8B8B");

  ellipse(screenSize/2, yp+23, 7, 8);

  fill("#FBDBCD"); // pink color

  arc(screenSize/2, yp+25, 7, 8, PI/6, PI/6*7);

​

  // mouth

  fill("#EA8B8B");

  arc(screenSize/2, yp+45, 35, 45, 0, PI);

  fill(255);

  arc(screenSize/2, yp+45, 18, 9, 0, PI);

}

function hair(){

  var xp = 256

  var yp = 210

  fill("#654556")

  stroke("#9A7B85")

  strokeWeight(5)

  arc(xp, yp, (256-70)*2-5, (210-60)*2,PI, PI*2)

  noStroke()

  rect(xp-100, yp, 100, 70)

  rect(xp, yp, 90, 70)

  rect(xp+100, yp, 100, 70)

  fill("#654556")

  arc(xp-120, yp-10, 130, 260,(PI/2)*1, (PI/2)*2)

  arc(xp+120, yp-10, 130, 260,0, (PI/2)*1)

  fill("#9A7B85")

  translate(width / 2, height / 2);

  rotate(PI/14);

  ellipse(-125, -65, 22, 40)

  ellipse(-105, -70, 22*0.75, 40*0.75)

  fill("#9A7B85")

  rotate(PI/14*(-2));

  ellipse(105, -70, 22*0.75, 40*0.75)

  noFill();

  stroke("#59394B");

  rotate(PI/14*(1));

  var b = 2;

  bezier(-65, -20, -60, -30, -50, -40, -40, -25);

  bezier(65, -20, 60, -30, 50, -40, 40, -25);

}

function bhair(){

  rectMode(CENTER)

  fill("#3A1E3C")

  rect(256, 300, 330, 220)

  arc(256, 300+105, 330, 80, 0, PI, OPEN)

  fill("#F3CDBF")

  noStroke()

  ellipse(256-151, 300, 40, 70)

  ellipse(256+151, 300, 40, 70)

  fill(c)

  var hor = 40;

  triangle(256+50+hor, 450, 256+52+hor, 400, 256+70+hor, 450)

}

​