let facemesh;

let video;

let predictions = [];

let canvas_w = 800;

let canvas_h = 600;

let video_w = 640;

let video_h = 480;

let margin_left = 50;

let margin_top = 50;

​

let video_w2 = 480;

let video_h2 = 480;

let margin_left2 = 130;

let margin_top2 = 50;

​

let margin = 50;

​

​

​

​

function setup() {

  let cnv = createCanvas(canvas_w, canvas_h);

  video = createCapture(VIDEO);

  video.size(video_w, video_h);

​

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

  //microphone

  mic=new p5.AudioIn();

  mic.start();

  cnv.mousePressed(userStartAudio);

  background("rgb(0,0,0)");

​

}

​

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  textSize(32);

  text('Press 1 or 2 or 3 or 4!!!', 250, 300);

  fill("#FFFFFF");

   if(key=="1"){

    drawBackground_1();

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

    drawKeypoints_1();

    drawForeground_1();

    }

   else if(key=="2"){

    drawBackground_2();

    image(video, margin_left2, margin_top2, video_w2, video_h2);

    drawKeypoints_2();

  }

  else if(key=="3"){

    drawBackground_3();

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

    drawKeypoints_3();

  }

    else if(key=="4"){

    drawBackground_3();

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

    drawMicLevel(); 

    }

}

​

// Miclevel

    function drawMicLevel() {

      push();

      micLevel = mic.getLevel();

      noStroke();

      pop();

      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_left, margin_top);

      //fill random color;

      let r = random(255); // Random red component between 0 and 255

      fill(r, 0, 0); // Set the fill color

      star(map(mouseX, 0, width, 1, 2)*x, map(mouseY, 0, height, 1, 2)*y, map(micLevel, 0, 0.8, 0, 1000),map(micLevel, 0, 0.8, 0, 3000),20);

      pop();

    }

  }

​

    }

​

function drawForeground_1() {

  //circle(20, 20, random(width));

  translate(width/2, height/2);

  rotate(map(mouseX, 0, width, 0, 360) / 3.0);

  star(100, 100, map(mouseX, 0, width, 0, 60), map(mouseY, 0, width, 0, 100), 5);

  rotate(map(mouseY, 0, width, 0, 180) / 3.5);

  star(100, 100, map(mouseX, 0, width, 0, 60), map(mouseY, 0, width, 0, 100), 6);

  translate(width / 2, height / 2);

  rotate(map(mouseY, 0, width, 0, 360) / 4.0);

  star(100, 100, map(mouseX, 0, width, 0, 60), map(mouseY, 0, width, 0, 100), 7);

  rotate(map(mouseX, 0, width, 0, 180) / 4.5);

  star(100, 100, map(mouseX, 0, width, 0, 60), map(mouseY, 0, width, 0, 100), 8);

  translate(width / 2, height / 2);

  rotate(map(mouseX, 0, width, 0, 360) / 5.0);

  star(100, 100, map(mouseX, 0, width, 0, 60), map(mouseY, 0, width, 0, 100), 9);

}

function drawBackground_1() {

  background("rgb(0,0,0)");

  rotate(map(mouseX, 0, width, 0, 360) / 0);

  star(0, 0, map(mouseX, 0, width, 0, 400), map(mouseY, 0, width, 0, 600), 9);

star(800, 0, map(mouseX, 0, width, 0, 200), map(mouseY, 0, width, 0, 400), 8);

  star(0, 600, map(mouseX, 0, width, 0, 200), map(mouseY, 0, width, 0, 400), 9);

  star(800, 600, map(mouseX, 0, width, 0, 300), map(mouseY, 0, width, 0, 400), 9);

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

}

​

function drawKeypoints_1() {

  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_left, margin_top);

      fill(255, 255, 255);

      star(x, y, map(mouseX, 0, width, 0, 10),map(mouseY, 0, width, 0, 10),4);

      pop();

    }

  }

}

​

​

function drawBackground_2() {

  background("#E91E63");

  push();

  translate(width / 2, height / 2);

  rotate(map(mouseX, 0, width, 0, 360) / 1.0);

  let e = color(map(mouseY, 0, width, 5, 144),5,253);

  fill(e);

  star(0, 0, map(mouseX, 0, width, 0, 400), map(mouseY, 0, width, 0, 600), 9);

  star(800, 0, map(mouseX, 0, width, 0, 200), map(mouseY, 0, width, 0, 400), 8);

  star(0, 600, map(mouseX, 0, width, 0, 200), map(mouseY, 0, width, 0, 400), 9);

  star(800, 600, map(mouseX, 0, width, 0, 300), map(mouseY, 0, width, 0, 400), 9);

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

​

  pop();

}

function drawKeypoints_2() {

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

      fill(255, 255, 255);

      translate(margin, margin);

      textAlign(CENTER, CENTER);

      if (j == 145) {

        translate(keypoints[j] / 2, keypoints[j] / 2);

        rotate(90 / 0.0);

        noStroke();

        let c = color(253, map(mouseX, 0, width, 5, 228), 5);

        fill(c);

        star(x, y, map(mouseX, 0, width, 10, 20),map(mouseY, 0, width, 30, 50),5);

      } else if (j == 374) {

        translate(keypoints[j] / 2, keypoints[j] / 2);

        rotate(90 / 0.0);

        noStroke();

        let c = color(253, map(mouseX, 0, width, 5, 228), 5);

        fill(c);

        star(x, y, map(mouseX, 0, width, 10, 20),map(mouseY, 0, width, 30, 50),5);

      }

      pop();

    }

  }

}

​

​

function drawBackground_3() {

  background("#000000");

  push();

  translate(width / 2, height / 2);

  rotate(map(mouseX, 0, width, 0, 360) / 1.0);

  let e = color(map(mouseY, 0, width, 5, 144),5,253);

  fill(e);

  star(0, 0, map(mouseX, 0, width, 0, 400), map(mouseY, 0, width, 0, 600), 9);

  star(800, 0, map(mouseX, 0, width, 0, 200), map(mouseY, 0, width, 0, 400), 8);

  star(0, 600, map(mouseX, 0, width, 0, 200), map(mouseY, 0, width, 0, 400), 9);

  star(800, 600, map(mouseX, 0, width, 0, 300), map(mouseY, 0, width, 0, 400), 9);

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

​

  pop();

}

function drawKeypoints_3() {

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

      if(j<200){

        fill("black");

        line(0,0,x,y);

        line(800,0,x,y);

        console.log('black');

      }else{

        fill("white");

        line(0,600,x,y);

        line(800,600,x,y);

        console.log('white');

      }

      pop();

    }

  }

}

​

function star(x, y, radius1, radius2, npoints) {

  let angle = TWO_PI / npoints;

  let halfAngle = angle / 2.0;

  beginShape();

  for (let a = 0; a < TWO_PI; a += angle) {

    let sx = x + cos(a) * radius2;

    let sy = y + sin(a) * radius2;

    vertex(sx, sy);

    sx = x + cos(a + halfAngle) * radius1;

    sy = y + sin(a + halfAngle) * radius1;

    vertex(sx, sy);

  }

  endShape(CLOSE);

}