​

​

let facemesh;

let video;

let poseNet;

let poses = [];

let predictions = [];

let margin = 50;

let music;

​

let count = 0;

let faceMeshX = 0;

let faceMeshY = 0;

​

function preload() {

  paints = loadImage(

"kindpng_46959.png","pngfind.com-3d-paint-splatter-png-6837838.png" 

  );

}

​

function setup() {

  let cnv = createCanvas(800, 600);

  cnv.mousePressed(userStartAudio);

  mic = new p5.AudioIn();

  mic.start();

  video = createCapture(VIDEO);

  video.size(640, 480);

​

  // Create a new poseNet method with a single detection

poseNet = ml5.poseNet(video, poseNetModelReady);

​

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

  // with an array every time new poses are detected

  poseNet.on("pose", function (results) {

    poses = results;

  });

​

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

  arrows_layer = createGraphics(width, height);

  background_layer = createGraphics(width, height);

  body_keypoints_layer = createGraphics(width, height);

  video.hide();

  push();

  textSize(80);

  text("What are you?",100,590)

  pop();

}

​

function poseNetModelReady() {

  console.log("poseNet Model ready!");

  facemesh = ml5.facemesh(video, faceMeshModelReady);

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

    predictions = results;

  });

}

​

function faceMeshModelReady() {

  console.log("faceMesh Model ready!");

}

​

function draw() {

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

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

  micLevel = mic.getLevel();

  // image(ontop_layer,0,0,width,height);

  drawKeypoints();

  drawBodyKeypoints();

  drawBackground();

  drawForeground();

}

​

function drawForeground() {

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

​

  let soud = 300 * micLevel;

  if (soud > 100) {

    arrows_layer.push();

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

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

    arrows_layer.noStroke();

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

    arrows_layer.rect(0, 65, 50, 100);

    arrows_layer.fill(0);

    arrows_layer.textSize(10);

    arrows_layer.text("LOSeR", 5, 100);

    arrows_layer.pop();

  } //if(soud<=100){

  //  return false;

  //   }else{

  //return false;

  //}

}

​

function addDotToFaceMesh() {

  count = count + 5;

}

​

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

    background(random(200, 255), random(200, 255), random(200, 255));

  }

  if (keyCode == RIGHT_ARROW) {

    moveFaceMeshRight();

  }

  if (keyCode == LEFT_ARROW) {

    moveFaceMeshLeft();

  }

  if (keyCode == UP_ARROW) {

    moveFaceMeshUp();

  }

  if (keyCode == DOWN_ARROW) {

    moveFaceMeshDown();

  }

  if (key == "c") {

    arrows_layer.clear();

    background_layer.clear();

    body_keypoints_layer.clear();

  }

}

​

function drawBackground() {

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

  if (mouseIsPressed) {

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

    background_layer.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) {

          translate(faceMeshX, faceMeshY);

          push();

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

          noStroke();

          ellipse(x, y, random(micLevel * 150, 10 + micLevel * 150));

          pop();

        }

      }

​

      //emoji mask

      if (key == "e") {

        translate(faceMeshX, faceMeshY);

        textSize(20);

        if (j == 123) {

          text("🦄", x, y);

        }

        if (j == 192) {

          text("✨", x, y);

        }

        if (j == 66) {

          text("👿", x, y);

        }

        if (j == 266) {

          text("🐱", x, y);

        }

        if (j == 434) {

          text("👑", x, y);

        }

        if (j == 9) {

          text(" 🦊 ", x, y);

        }

        if (j == 372) {

          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 == 139) {

          text("🔥", x, y);

        }

        if (j == 164) {

          text("🌠", x, y);

        }

        if (j == 32) {

          text("🔪", x, y);

        }

        if (j == 297) {

          text("💊", x, y);

        }

        if (j == 10) {

          text("💣", x, y);

        }

        if (j == 301) {

          text("💔", x, y);

        }

        if (j == 54) {

          text("😰", x, y);

        }

        if (j == 136) {

          text("⚡️", x, y);

        }

      }

​

      if (key == "q") {

        fill(micLevel * 3000);

        noStroke();

        textSize(10);

        text("?", x, y);

      }

      pop();

    }

  }

}

​

function drawBodyKeypoints() {

  // Loop through all the poses detected

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

    // For each pose detected, loop through all the keypoints

    let pose = poses[i].pose;

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

      // A keypoint is an object describing a body part (like rightArm or leftShoulder)

      let keypoint = pose.keypoints[j];

      let x = keypoint.position.x;

      let y = keypoint.position.y;

      // Only draw an ellipse is the pose probability is bigger than 0.2

      if (keypoint.score > 0.2) {

        body_keypoints_layer.push();

        //           body_keypoints_layer.fill("Aquamarine");

        //           body_keypoints_layer.noStroke();

        //           body_keypoints_layer.circle(x, y, 20);

        //           body_keypoints_layer.textAlign(CENTER, CENTER);

        //           body_keypoints_layer.fill("DodgerBlue");

        //           body_keypoints_layer.text(j, x, y);

        //       if (j == 3 || j == 4) {

        //         body_keypoints_layer.textSize(20);

        //         body_keypoints_layer.text("❤️ ", x, y);

        if (j == 9 || j == 10) {

                   body_keypoints_layer.textSize(84);

                   body_keypoints_layer.image(paints, x, y, 100, 100);

        }

        body_keypoints_layer.pop();

      }

    }

  }

}

​