let video;

let predictions = [];

let margin = 50;

let music;

​

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

  background("white")

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

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

  // We can call both functions to draw all keypoints

  micLevel = mic.getLevel();

  drawKeypoints();

  drawBackground()

  drawForeground()

}

​

function drawForeground(){

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

  noStroke();

  let pos = map(mouseX, 0, 640, 80,510);

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

  rect(pos,65,50,100);

  fill(0);

  text('LOSeR',pos+5,100);

}

​

  function drawBackground(){

    if(mouseIsPressed){

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

      line(mouseX,mouseY,pmouseX,pmouseY);

    }   

  }

​

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

      if(key=="1"){

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

        stroke(0);

        let dia = map(mouseY, 0, 600, 0,10);

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

      }

      if(key=="2"){

        translate(micLevel*-1000,micLevel*-1000);

        textSize(10);

          text("🦄", x, y);

      }

      if(key=="3"){

        fill(micLevel*4000);

        textSize(10);

        text("?",x,y);

      }

      pop()

    }

​

  }

}

​