let video;

let predictions = [];

let margin = 50;

let music;

​

let count = 0;

let faceMeshX = 0;

let faceMeshY = 0;

​

function setup() {

  let cnv = createCanvas(800, 600);

  cnv.mousePressed(userStartAudio);

  mic = new p5.AudioIn();

  mic.start();

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

  }

​

function modelReady(){

  console.log("Model ready!");

}

​

function draw() {

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

  micLevel = mic.getLevel();

  drawKeypoints();

  drawBackground();

  drawForeground();

}

​

function drawForeground(){

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

    let soud = 300*micLevel

       if(soud>100){

        translate(random(100,600),random(50,325));

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

        noStroke();

        triangle(75,140,-25,140,25,190);

        rect(0,65,50,100);

        fill(0);

        text('LOSeR',5,100);

    } if(soud<=100){

        return false;

         }else{

      return false;

    } 

  }

}

​

function addDotToFaceMesh(){

  count++;

}

​

function moveFaceMeshRight(){

  faceMeshX= faceMeshX + 20;

}

​

function moveFaceMeshLeft(){

  faceMeshX = faceMeshX - 20;

}

​

function moveFaceMeshUp(){

  faceMeshY = faceMeshY - 20;

}

​

function moveFaceMeshDown()

{

  faceMeshY = faceMeshY +20;

}

function keyPressed(){

  if(key == "a"){

    addDotToFaceMesh();

  } if(keyCode == RIGHT_ARROW){

    moveFaceMeshRight();

  } if(keyCode == LEFT_ARROW){

    moveFaceMeshLeft();

  } if(keyCode == UP_ARROW){

    moveFaceMeshUp();

  } if (keyCode == DOWN_ARROW){

    moveFaceMeshDown();

  }

}

​

function drawBackground(){

  if(mouseIsPressed){

    stroke(random(0,255),random(0,255),random(0,255));

    line(mouseX,mouseY,pmouseX,pmouseY);

  }   

}

​

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)

      //arrow

      if (j == 151){

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

      noStroke();

      let pos = map(x, 0, 640, 90,560);

      triangle(pos+50,100,pos-50,100,pos,150);

      rect(pos-25,25,50,100);

      fill(0);

      text('LOSeR',pos-20,60);

      }

      //circles

      if(key == "o"){

        if(j<=count){

          push()

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

          ellipse(x,y, random(5,10));

          pop()

        }

      }

      //emoji mask

      if(key == "e"){

        translate(faceMeshX,faceMeshY);

        textSize(20);

        if(j==60){

          text("🦄", x, y);

        } if(j==120){

          text("✨", x, y);

        } if (j ==348){

          text("👿", x, y);

        } if (j==230){

          text("🐱", x, y);

        } if (j == 57) {

          text("👑", x, y);

        } if (j == 9) {

          text(" 🦊 ", x, y);

        } if (j ==373) {

          text("🌈", x, y);

        } if (j == 181) {

          text("💫", x, y);

        } if (j==236) {

          text("🧬", x, y);

        } if(j == 67){

          text("🤡", x, y);

        } if (j ==404){

          text("💀", x, y);

        } if (j ==52){

          text("🔥", x, y);

        } if (j==82){

          text("🌠", x, y);

        } if (j==32){

          text("🔪", x, y);

        } if (j==297){

          text("💊", x, y);

        } if (j ==59){

          text("💣", x, y);

        } if (j ==301){

          text("💔", x, y);

        }

      }

      if (key == "q"){

        fill(micLevel*3000);

        noStroke();

        textSize(10);

        text("?",x,y);

      }

      pop()

    }

​

  }

}

​

​