ml5 Face

let faceapi;

let video;

let detections;

let outsideText1;

let outsideText2;

let outsideText3;

let outsideText4;

let outsideText5;

let outsideText6;

let outsideText7;

let button4;

let exp1;

let exp2;

let exp3;

let exp4;

​

​

const detection_options = {

  withLandmarks: true,

  withDescriptors: false,

};

​

const mouthOpenThreshold = 30; // Control sensivity

let button1; 

let button2; 

let button3; 

let colorPicker1, colorPicker2, colorPicker3, colorPicker4, colorPicker5, colorPicker6, colorPicker7; // Color pickers for custom colors

let drawShapes = false; // to control sun and moon

let drawShapesWithDifferentColors = false; // to control angel and devil

let drawShapesWithCustomColors = false; // to control custom

let drawWaterAndFire = false; //to control water and fire

​

function setup() {

  noLoop();

​

  createCanvas(600, 500);

  textSize(100);

  exp1 = createP("Hello! This place is for you to try different");

  exp1.position(width -300 , height - 300); 

  exp2 = createP("type of masks and while having fun you can")

  exp2.position(width -300 , height - 280); 

​

  exp3 = createP("also get inspiration. First you can try different")

  exp3.position(width-300 , height - 260);

  exp4 = createP("type of masks we have already created for you");

  exp4.position(width-300 , height - 240);

  exp5 = createP("- be ready for surprises-. And of course with ")

  exp5.position(width-300, height - 220);

  exp6 = createP("our custom mask designer you can make your")

  exp6.position(width-300, height - 200);

  exp7 = createP("own mask with the color you wish to use");

  exp7.position(width-300 , height -180);

  // Create the first button and position it

  button1 = createButton('Sun and Moon');

  button1.position(width + 700, height - 300); 

  button1.mousePressed(toggleDrawing);

  button1.style('background-color', '#000'); // Initial color

  button1.style('color', '#fff'); // Text color

​

  // Create the second button and position it

  button2 = createButton('Angel and Devil');

  button2.position(width + 700, height - 200); 

  button2.mousePressed(toggleDifferentColors); 

  button2.style('background-color', '#000'); // Initial color

  button2.style('color', '#fff'); // Text color

​

  // Create the third button and position it

  button3 = createButton('Custom Mask');

  button3.position(width + 850, height - 300); 

  button3.mousePressed(toggleCustomColors); 

  button3.style('background-color', '#000'); // Initial color

  button3.style('color', '#fff'); // Text color

​

  // Create the fourth button and position it

  button4 = createButton('Water And Fire');

  button4.position(width + 700, height - 100); 

  button4.mousePressed(toggleWaterAndFire); 

  button4.style('background-color', '#000'); // Initial color

  button4.style('color', '#fff'); // Text color

​

  // Color pickers

  colorPicker1 = createColorPicker('#000');

  colorPicker1.position(width + 850, height - 250);

  colorPicker1.hide();

​

  colorPicker2 = createColorPicker('#fff');

  colorPicker2.position(width + 850, height - 210);

  colorPicker2.hide();

​

  colorPicker3 = createColorPicker('#fff');

  colorPicker3.position(width + 850, height - 170);

  colorPicker3.hide();

​

  colorPicker4 = createColorPicker('#fff');

  colorPicker4.position(width + 850, height - 130);

  colorPicker4.hide();

​

  colorPicker5 = createColorPicker('#fff');

  colorPicker5.position(width + 850, height - 90);

  colorPicker5.hide();

​

  colorPicker6 = createColorPicker('#fff');

  colorPicker6.position(width + 850, height - 50);

  colorPicker6.hide();

​

  colorPicker7 = createColorPicker('#fff');

  colorPicker7.position(width + 850, height - 10);

  colorPicker7.hide();

​

  textSize(80);

  outsideText1 = createP("Face");

  outsideText1.position(width + 930, height - 260); 

  outsideText1.hide();

​

  textSize(80);

  outsideText2 = createP("Face Stroke");

  outsideText2.position(width + 930, height - 220); 

  outsideText2.hide();

​

  textSize(80);

  outsideText3 = createP("Eyes");

  outsideText3.position(width + 930, height - 180); 

  outsideText3.hide();

​

  textSize(80);

  outsideText4 = createP("Eyebrows");

  outsideText4.position(width + 930, height - 140); 

  outsideText4.hide();

​

  textSize(80);

  outsideText5 = createP("Nose");

  outsideText5.position(width + 930, height - 100); 

  outsideText5.hide();

​

  textSize(80);

  outsideText6 = createP("Mouth");

  outsideText6.position(width + 930, height - 60);

  outsideText6.hide();

​

  textSize(80);

  outsideText7 = createP("Cheeks");

  outsideText7.position(width + 930, height - 20); 

  outsideText7.hide();

​

  // 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("ready!");

  console.log(faceapi);

  faceapi.detect(gotResults);

}

​

let detect = true; // Variable to control detection state

​

//sun and moon

function toggleDrawing() {

  drawShapes = !drawShapes; // Toggle drawing state

  drawShapesWithDifferentColors = false; // The second button state is off

  drawShapesWithCustomColors = false; // The third button state is off

  drawWaterAndFire = false; // The fourth button state is off

  colorPicker1.hide(); // Hide color pickers

  colorPicker2.hide(); 

  colorPicker3.hide();

  colorPicker4.hide();

  colorPicker5.hide();

  colorPicker6.hide();

  colorPicker7.hide();

  outsideText1.hide();

  outsideText2.hide();

  outsideText3.hide();

  outsideText4.hide();

  outsideText5.hide();

  outsideText6.hide();

  outsideText7.hide();

​

  if (drawShapes) {

    button1.style('background-color', '#ffb700'); // Change to yellow when active

    button2.style('background-color', '#000'); // Reset the second button color

    button3.style('background-color', '#000'); // Reset the third button color

    button4.style('background-color', '#000'); // Reset the fourth button color

        button2.style('color', '#fff');

​

  } else {

    button1.style('background-color', '#000'); // Reset to initial color

        button2.style('color', '#fff');

​

  }

}

​

//devil and angel

function toggleDifferentColors() {

  drawShapesWithDifferentColors = !drawShapesWithDifferentColors; // Toggle drawing shapes with different colors state

  drawShapes = false; // The first button state is off

  drawWaterAndFire = false;

  drawShapesWithCustomColors = false; // The third button state is off

  colorPicker1.hide(); // Hide color pickers

  colorPicker2.hide(); 

  colorPicker3.hide();

  colorPicker4.hide();

  colorPicker5.hide();

  colorPicker6.hide();

  colorPicker7.hide();

  outsideText1.hide();

  outsideText2.hide();

  outsideText3.hide();

  outsideText4.hide();

  outsideText5.hide();

  outsideText6.hide();

  outsideText7.hide();

​

​

  if (drawShapesWithDifferentColors) {

    button2.style('background-color', '#fff'); 

    button1.style('background-color', '#000'); 

    button3.style('background-color', '#000');

    button4.style('background-color', '#000'); 

    button2.style('color', '#000');

  } else {

    button2.style('background-color', '#000'); 

    button2.style('color', '#fff');

  }

}

​

//custom mask

function toggleCustomColors() {

  drawShapesWithCustomColors = !drawShapesWithCustomColors; 

  drawShapes = false; 

  drawWaterAndFire = false;

  drawShapesWithDifferentColors = false; 

​

  if (drawShapesWithCustomColors) {

    button3.style('background-color', '#c1121f'); 

    button1.style('background-color', '#000'); 

    button2.style('background-color', '#000'); 

    button4.style('background-color', '#000'); 

        button2.style('color', '#fff');

    colorPicker1.show(); 

    colorPicker2.show(); 

    colorPicker3.show();

    colorPicker4.show();

    colorPicker5.show();

    colorPicker6.show();

    colorPicker7.show();

    outsideText1.show();

    outsideText2.show();

    outsideText3.show();

    outsideText4.show();

    outsideText5.show();

    outsideText6.show();

    outsideText7.show();

​

  } else {

    button3.style('background-color', '#000'); 

        button2.style('color', '#fff');

    colorPicker1.hide(); 

    colorPicker2.hide(); 

    colorPicker3.hide();

    colorPicker4.hide();

    colorPicker5.hide();

    colorPicker6.hide();

    colorPicker7.hide();

    outsideText1.hide();

    outsideText2.hide();

    outsideText3.hide();

    outsideText4.hide();

    outsideText5.hide();

    outsideText6.hide();

    outsideText7.hide();

  }

}

​

//water and fire

function toggleWaterAndFire() {

  drawWaterAndFire = !drawWaterAndFire; 

  drawShapes = false; 

  drawShapesWithDifferentColors = false;

  drawShapesWithCustomColors = false; 

  colorPicker1.hide(); 

  colorPicker2.hide(); 

  colorPicker3.hide();

  colorPicker4.hide();

  colorPicker5.hide();

  colorPicker6.hide();

  colorPicker7.hide();

  outsideText1.hide();

  outsideText2.hide();

  outsideText3.hide();

  outsideText4.hide();

  outsideText5.hide();

  outsideText6.hide();

  outsideText7.hide();

​

  if (drawWaterAndFire) {

    button4.style('background-color', '#003399'); 

    button1.style('background-color', '#000'); 

    button2.style('background-color', '#000'); 

    button3.style('background-color', '#000'); 

        button2.style('color', '#fff');

  } else {

    button4.style('background-color', '#000'); 

        button2.style('color', '#fff');

​

  }

}

​

​

function gotResults(err, result) {

  if (err) {

    console.log(err);

    return;

  }

  detections = result;

​

  background(255);

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

  if (detect && detections) {

    if (detections.length > 0) {

      drawBox(detections);

      drawLandmarks(detections);

    }

  }

  if (detect) {

    faceapi.detect(gotResults);

  }

}

​

function drawBox(detections) {

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

    const alignedRect = detections[i].alignedRect;

    const mouth = detections[i].parts.mouth;

    const mouthWidth = dist(mouth[0]._x, mouth[0]._y, mouth[mouth.length - 1]._x, mouth[mouth.length - 1]._y);

​

    const x = alignedRect._box._x;

    const y = alignedRect._box._y;

    const centerX = x + alignedRect._box._width / 2;

    const centerY = y + alignedRect._box._height / 2 - 20;

    const boxWidth = alignedRect._box._width;

    const boxHeight = alignedRect._box._height;

​

    // Sun and Moon

    if (drawShapes) {

    if (mouthWidth > mouthOpenThreshold) {

      //moon

        fill(0);

        noStroke();

    } else {

        // sun

        for (let j = 0; j < 360; j += 30) {

            const angle = radians(j);

            const lineLength = alignedRect._box._width * 1.5;

            const endX = centerX + cos(angle) * lineLength;

            const endY = centerY + sin(angle) * lineLength;

            stroke(255, 183, 3);

            strokeWeight(8);

            line(centerX, centerY, endX, endY);

        }

        fill(255, 183, 3);

    }

    ellipse(centerX, centerY, alignedRect._box._width * 1.5, alignedRect._box._height * 1.5);

    drawCheeks(detections[i]);

}

​

    // Angel and Devil

    if (drawShapesWithDifferentColors) {

      //devil

      if (mouthWidth > mouthOpenThreshold) {

        fill(106, 4, 15);

      } else {

        //angel

        strokeWeight(5);

        stroke(255);

        noFill();

        const aboveHeadY = centerY - boxHeight / 2 - 30; // distance above the head

        ellipse(centerX, aboveHeadY - 50, boxWidth * 1, boxHeight / 3);

        fill(255);

      }

      stroke(0);

      strokeWeight(0);

      ellipse(centerX, centerY, boxWidth * 1.5, boxHeight * 1.5);

      drawCheeks(detections[i]);

    }

​

    //water and fire

    if (drawWaterAndFire) {

      //fire

      if (mouthWidth > mouthOpenThreshold) {

        fill(106, 4, 15);

        strokeWeight(2);

        stroke(106, 4, 15);           

        ellipse(centerX, centerY, alignedRect._box._width * 1.5, alignedRect._box._height * 1.5);

        //little circles around for the movement

        let ellipseWidth1 = alignedRect._box._width * 1.5;

        let ellipseHeight1 = alignedRect._box._height * 1.5;

        let numSmallCircles1 = 70;

        for (let i = 0; i < numSmallCircles1; i++) {

          let angle = TWO_PI / numSmallCircles1 * i;

          let x = centerX + (ellipseWidth1 / 2) * cos(angle);

          let y = centerY + (ellipseHeight1 / 2) * sin(angle);

          let smallCircleRadius1 = random(45, 65);

          line(centerX, centerY, x, y);

          ellipse(x, y, smallCircleRadius1, smallCircleRadius1);

        }

​

      } else {

        //water

        fill(2, 62, 138);

        ellipse(centerX, centerY, alignedRect._box._width * 1.5, alignedRect._box._height * 1.5);

        //little circles around for the movement

        let ellipseWidth = alignedRect._box._width * 1.5;

        let ellipseHeight = alignedRect._box._height * 1.5;

        let numSmallCircles = 70;

        for (let i = 0; i < numSmallCircles; i++) {

          let angle = TWO_PI / numSmallCircles * i;

          let x = centerX + (ellipseWidth / 2) * cos(angle);

          let y = centerY + (ellipseHeight / 2) * sin(angle);

          let smallCircleRadius = random(45, 50);

          ellipse(x, y, smallCircleRadius, smallCircleRadius);

        }

      }

    }

​

    // Custom Mask

    if (drawShapesWithCustomColors) {

      fill(colorPicker1.color());

      stroke(colorPicker2.color());

      strokeWeight(5);

      ellipse(centerX, centerY, alignedRect._box._width * 1.5, alignedRect._box._height * 1.5);

      drawCheeks(detections[i]);

    }

​

    if (drawShapesWithDifferentColors && mouthWidth > mouthOpenThreshold) {

      drawRockTriangles(detections[i]);

    }

  }

}

​

//cheeks

function drawCheeks(detection) {

  const leftCheek = detection.parts.leftEye[0];

  const rightCheek = detection.parts.rightEye[3];

  const cheekRadius = 20; // Size of the cheeks

​

  if (drawShapes || drawShapesWithCustomColors) {

    fill(drawShapesWithCustomColors ? colorPicker7.color() : color(255, 143, 171)); 

    noStroke();

    ellipse(leftCheek._x - 20, leftCheek._y + 40, cheekRadius * 2, cheekRadius * 2);

    ellipse(rightCheek._x + 20, rightCheek._y + 40, cheekRadius * 2, cheekRadius * 2);

  }

​

  if (drawShapesWithDifferentColors) {

    fill(72, 202, 228); 

    noStroke();

    ellipse(leftCheek._x - 20, leftCheek._y + 20, cheekRadius * 3 - 20, cheekRadius * 2 - 20);

    ellipse(rightCheek._x + 20, rightCheek._y + 20, cheekRadius * 3 - 20, cheekRadius * 2 - 20);

  }

}

​

//the horns for devil

function drawRockTriangles(detection) {

  const alignedRect = detection.alignedRect;

  const x = alignedRect._box._x;

  const y = alignedRect._box._y;

  const boxWidth = alignedRect._box._width;

  const boxHeight = alignedRect._box._height;

​

  const leftX = x + boxWidth / 4;

  const rightX = x + 3 * boxWidth / 4;

  const topY = y - 20;

​

  fill(106, 4, 15);

  noStroke();

  triangle(leftX - 50, topY, leftX + 10, topY, leftX - 20, topY - 80); // Left triangle

  triangle(rightX - 10, topY, rightX + 50, topY, rightX + 20, topY - 80); // Right triangle

}

​

function drawLandmarks(detections) {

  if (!drawShapes && !drawShapesWithDifferentColors && !drawShapesWithCustomColors && !drawWaterAndFire) return;

​

  noFill();

  stroke(161, 95, 251);

  strokeWeight(0);

​

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

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

  }

​

  //for coloring the shapes

  function drawPart(feature, closed) {

    if (!drawShapes && !drawShapesWithDifferentColors && !drawShapesWithCustomColors && !drawWaterAndFire) return;

​

    beginShape();

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

      const x = feature[i]._x;

      const y = feature[i]._y;

      vertex(x, y);

    }

    if (closed === true) {

      endShape(CLOSE);

    }

​

    if (drawShapesWithDifferentColors || drawShapesWithCustomColors || drawWaterAndFire) {

      // Different colors when the second or third button is pressed

      let colorMap = {

        rightEyeBrow: drawShapesWithCustomColors ? colorPicker4.color() : (drawShapesWithDifferentColors ? color(255) : color(0)), // Example colors for differentiating

        leftEyeBrow: drawShapesWithCustomColors ? colorPicker4.color() : (drawShapesWithDifferentColors ? color(255) : color(0)),

        nose: drawShapesWithCustomColors ? colorPicker5.color() : (drawShapesWithDifferentColors ? color(0) : color(255)), // Example colors for differentiating

        rightEye: drawShapesWithCustomColors ? colorPicker3.color() : (drawShapesWithDifferentColors ? color(72, 202, 228) : color(72, 202, 228)), // Example colors for differentiating

        leftEye: drawShapesWithCustomColors ? colorPicker3.color() : (drawShapesWithDifferentColors ? color(72, 202, 228) : color(72, 202, 228)),

        mouth: drawShapesWithCustomColors ? colorPicker6.color() : (drawShapesWithDifferentColors ? color(0) : color(208, 0, 0)), // Example colors for differentiating

      };

​

      for (let part in colorMap) {

        if (feature === detections[0].parts[part]) {

          fill(colorMap[part]);

          break;

        } else {

          noFill();

        }

      }

    } else {

      // Default colors

      fill(255);

    }

​

    beginShape();

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

      const x = feature[i]._x;

      const y = feature[i]._y;

      vertex(x, y);

    }

    if (closed === true) {

      endShape(CLOSE);

    } else {

      endShape();

    }

  }

}