let video;

let predictions = [];

let canvas_w = 800;

let canvas_h = 600;

let video_w = 640;

let video_h = 480;

let margin_left = 5;

let margin_top = 5;

let clr = random()

//let mic;

​

var detailX = 5;

var detailY = 5;

var pic;

​

function preload() {

  //frdomoadModel('frog.obj', true);

  //pic = loadImage("glasses1.png")

 // shadee = loadShader('assets/basic.vert', 'assets/basic.frag');

}

​

function setup() {

  //imageMode(CENTER)

  createCanvas(canvas_w, canvas_h);

  createCanvas(canvas_w, canvas_h, WEBGL);

  video = createCapture(VIDEO);

  video.size(video_w, video_h);

  angle = 0;

  mic = new p5.AudioIn();

  mic.start();

​

​

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

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  drawBackground();

​

  image(video, margin_left, margin_top, video_w, video_h);

  // We can call both functions to draw all keypoints

  drawKeypoints();

  drawForeground();

  micLevel = mic.getLevel();

}

​

function drawForeground() {

  //circle(random(width), random(height), map(mouseY, 0, height, 0, 100));

}

​

​

​

function drawBackground() {

  imageMode(CENTER)

  background("blue");

  //rect(random(width), 0, map(mouseX, 0, width, 10, 100), height);

}

​

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

    let angle = 0;

    let loud = map (micLevel,0,10,0,width);

    let loud2 = map (micLevel,0,1,0,width*2);

    let loud3 = map (micLevel,0,1,0,width*244);

    // Draw facial keypoints.

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

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

      push();

      translate(margin_left, margin_top);

      textAlign( CENTER, CENTER);

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

       if (key == "1") {3

      //noStroke();

      //fill("red")

      let Angle1 = 0

      translate(-325, -240)

      translate(x, y ,0);

      sphere(loud);

      angle += 0.025;

      }

         if (key == "2") {3

      //noStroke();

      //fill("red")

      let Angle1 = 0

      translate(-325, -230)

      translate(x, y, loud2);

      sphere(10);

      angle += 0.025;

      }

      if (key == "3") {

      translate(-325, -230)

      stroke(255, 20);

      line(x, y, loud3, loud3);

      //line(x, y, 100, 200);

      //line(x, y, 600, 200);1

      //line(x, y, 600, 0);

      //line(x, y, 300, 0);

      //line(x, y, 300, 450);

      }  

      if (key == "4") {3

      //noStroke();

      //fill("red")

      let Angle1 = 0

      translate(-325, -230)

      //Mode (CENTER)

      rotateX(frameCount * 0.01);

      rotateY(frameCount * 0.01);

      rotateX(angle);

      translate(x, y ,0);

      box(10);

      angle += 0.025;

      }  

      if (key == "5") {3

      //noStroke();

      //fill("red")

      let Angle1 = 0

      translate(-325, -230)

      //translate(CENTER);

      rotateX(0);

      rotateY(0);

      translate(x, y ,0);

      box(10);

      angle += 0.025;

      }

      if (key == "6") {3

      //noStroke();

      //fill("red")

      let Angle1 = 0

      translate(-325, -230)

      //translate(CENTER);

      rotateX(0);

      rotateY(0);

      translate(x, y ,0);

      //shader(shadee);

      sphere(10);

      angle += 0.025;

      }

      pop();

    }

  }

}