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 mount=0;

let toggle =true;

let mic;

​

function setup() {

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

  //mic

  mic = new p5.AudioIn();

  mic.start(); 

}

​

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

  if(key == "1"){

    drawKeypoints();

  }

 else if(key=="2"){

   drawMoveballs();

 }

  else if(key=="3"){

    drawColorvariety();

  }

  else if(key == "4"){

    drawColorlight();

  }

  drawForeground();

}

​

function drawForeground() {

  if(mouseX<width/2)  {

    fill("blue")

  } 

 if(mouseX>=width/2)  {

    fill("pink")

  }  rect(random(width),random(height),map(mouseX,0,width,0,100),map(mouseY,0,height,100,200))

}

​

​

function drawBackground() {

  if(mouseX<width/2){

    background("#FC6B46");

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

  }

   if(mouseX>=width/2)  {

    background("#EEFF27");

     fill("green")

     circle(random(width),random(height),map(mouseY,0,height,20,150))

   }

}

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

      if(mouseY<height/2){

        fill("#EEFF27");

        rect(x,y,map(mouseX,width,0,5,10),20)

        pop();

      }

      if(mouseY>=height/2){

        fill("#EB4F52");

      circle(x, y, map(mouseX,0,width,5,40));

      pop();

      }

​

  }

}

}

​

function drawMoveballs(){

  for (i = 0;i<5;i=i+1){

  fill("white");

  let dia=mount+i*70

  circle(dia,0,60);

  circle(0,dia,60);

  circle(width-dia,height,60);

  circle(width,height-dia,60);

  mount=mount+1;

  }

}

​

function drawColorvariety(){

  if(mouseIsPressed === true){

        toggle = !toggle;

    }

  if(toggle == true){

        background("white");

    }else{

        background("black");

    }

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

     if(toggle == true){

        fill("black");

        circle (x,y,random(2,20),random(50,100))

        pop();

     }

       else{

         fill("white");

        circle (x,y,random(2,20),random(50,90))

        pop();

       }

  }

}

}

​

 function drawColorlight(){

     micLevel = mic.getLevel();

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

    for(j=0;j<100;j++){

      fill("blue")

      circle(i+i*5,j+j*10,10-200*micLevel-i)

    }

  }

   for(i=0;i<200;i++){

    for(j=0;j<6;j++){

      fill("green")

      circle(60+i*5,j*10,10-300*micLevel+j)

    }

  }

for(i=0;i<15;i++){

    for(j=0;j<70;j++){

      fill("blue")

      circle(680+i*10,j+j*10,10-400*micLevel+i)

    }

  }

for(i=0;i<65;i++){

    for(j=0;j<8;j++){

      fill("yellow")

      circle(60+i*10,530+j*10,10-400*micLevel+j)

    }

  }

 }