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;

​

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 set

  sidelen = 100;

  let cnv = createCanvas(sidelen * 8, sidelen * 6);

  mic = new p5.AudioIn();

  mic.start();

  cnv.mousePressed(userStartAudio);

}

​

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

​

  drawKeypoints();

  drawForeground();

  if (key == "i") {

    fill(random(100, 250), random(100, 250), random(100, 250));

    rect(random(width), random(height), random(2, 200), random(2, 200), 20);

​

    //strokeWeight(random(1,5))

    //line(random(width),random(height),random(width),random(height))

    // rectangle(random(width), random(height), random(10, 30));

    // } else if (key == "3") {

    // strokeWeight(random(1, 5));

    // line(random(width), random(height), random(width), random(height));

  } else if (key == "k") {

    fill("skyblue");

    noStroke();

    rect(mouseX, mouseY, random(10, 800), random(10, 800));

  } else if (key == "l") {

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

        fill(random(1, 100), random(1, 100), random(1, 100));

        noStroke();

        circle(x, y, random(10, 30));

        pop();

      }

    }

  }

}

​

//FG

function drawForeground() {

  micLevel = mic.getLevel();

​

  push();

  scale(1.6)

  translate(sidelen * 1, sidelen * 1);

  noStroke();

  c1 = color("#b18036");

  c2 = color("white");

  c3 = color("#f1b990");

  c_mid = lerpColor(c1, c2, 10 * micLevel);

  fill(c_mid);

  circle(30, 35, 20); //귀 l

  fill(c3);

  circle(30, 35, 10);

  fill(c_mid);

  circle(70, 35, 20); //귀 r

  fill(c3);

  circle(70, 35, 10);

  fill(c_mid);

  circle(50, 50, 50);

  fill("black");

  circle(sidelen / 2 - 10, sidelen / 2 - 5, 7);

  circle(sidelen / 2 + 10, sidelen / 2 - 5, 7);

  fill("#392b1f");

  ellipse(50, 53, 6, 3);

  fill("white");

  circle(38, 44, 1.5);

  circle(58, 44, 1.5);

  fill("#e07a95");

  stroke("black");

  strokeWeight(0.5);

  ellipse(sidelen / 2, sidelen / 2 + 12, 250 * micLevel, 170 * micLevel);

  pop();

​

  push();

  translate(20, 30);

  noStroke();

  c1 = color("#b18036");

  c2 = color("white");

  c3 = color("#f1b990");

  c_mid = lerpColor(c1, c2, 10 * micLevel);

  fill(c_mid);

  circle(30, 35, 20); //귀 l

  fill(c3);

  circle(30, 35, 10);

  fill(c_mid);

  circle(70, 35, 20); //귀 r

  fill(c3);

  circle(70, 35, 10);

  fill(c_mid);

  circle(50, 50, 50);

  fill("black");

  circle(sidelen / 2 - 10, sidelen / 2 - 5, 7);

  circle(sidelen / 2 + 10, sidelen / 2 - 5, 7);

  fill("#392b1f");

  ellipse(50, 53, 6, 3);

  fill("white");

  circle(38, 44, 1.5);

  circle(58, 44, 1.5);

  fill("#e07a95");

  stroke("black")

  strokeWeight(0.5);

  ellipse(sidelen / 2, sidelen / 2 + 12, 250 * micLevel, 170 * micLevel);

  pop();

​

  push();

  scale(1.4)

  translate(450, 200);

  noStroke();

  c1 = color("#b18036");

  c2 = color("white");

  c3 = color("#f1b990");

  c_mid = lerpColor(c1, c2, 10 * micLevel);

  fill(c_mid);

  circle(30, 35, 20); //귀 l

  fill(c3);

  circle(30, 35, 10);

  fill(c_mid);

  circle(70, 35, 20); //귀 r

  fill(c3);

  circle(70, 35, 10);

  fill(c_mid);

  circle(50, 50, 50);

  fill("black");

  circle(sidelen / 2 - 10, sidelen / 2 - 5, 7);

  circle(sidelen / 2 + 10, sidelen / 2 - 5, 7);

  fill("#392b1f");

  ellipse(50, 53, 6, 3);

  fill("white");

  circle(38, 44, 1.5);

  circle(58, 44, 1.5);

  fill("#e07a95");

  stroke("black");

  strokeWeight(0.5);

  ellipse(sidelen / 2, sidelen / 2 + 12, 250 * micLevel, 170 * micLevel);

  pop();

​

  push();

  scale(1.2)

  translate(100, 390);

  noStroke();

  c1 = color("#b18036");

  c2 = color("white");

  c3 = color("#f1b990");

  c_mid = lerpColor(c1, c2, 10 * micLevel);

  fill(c_mid);

  circle(30, 35, 20); //귀 l

  fill(c3);

  circle(30, 35, 10);

  fill(c_mid);

  circle(70, 35, 20); //귀 r

  fill(c3);

  circle(70, 35, 10);

  fill(c_mid);

  circle(50, 50, 50);

  fill("black");

  circle(sidelen / 2 - 10, sidelen / 2 - 5, 7);

  circle(sidelen / 2 + 10, sidelen / 2 - 5, 7);

  fill("#392b1f");

  ellipse(50, 53, 6, 3);

  fill("white");

  circle(38, 44, 1.5);

  circle(58, 44, 1.5);

  fill("#e07a95");

  stroke("black");

  strokeWeight(0.5);

  ellipse(sidelen / 2, sidelen / 2 + 12, 250 * micLevel, 170 * micLevel);

  pop();

​

  push();

  translate(570, 100);

  noStroke();

  c1 = color("#b18036");

  c2 = color("white");

  c3 = color("#f1b990");

  c_mid = lerpColor(c1, c2, 10 * micLevel);

  fill(c_mid);

  circle(30, 35, 20); //귀 l

  fill(c3);

  circle(30, 35, 10);

  fill(c_mid);

  circle(70, 35, 20); //귀 r

  fill(c3);

  circle(70, 35, 10);

  fill(c_mid);

  circle(50, 50, 50);

  fill("black");

  circle(sidelen / 2 - 10, sidelen / 2 - 5, 7);

  circle(sidelen / 2 + 10, sidelen / 2 - 5, 7);

  fill("#392b1f");

  ellipse(50, 53, 6, 3);

  fill("white");

  circle(38, 44, 1.5);

  circle(58, 44, 1.5);

  fill("#e07a95");

  stroke("black");

  strokeWeight(0.5);

  ellipse(sidelen / 2, sidelen / 2 + 12, 250 * micLevel, 170 * micLevel);

  pop();

​

  push();

  translate(480, 420);

  noStroke();

  c1 = color("#b18036");

  c2 = color("white");

  c3 = color("#f1b990");

  c_mid = lerpColor(c1, c2, 10 * micLevel);

  fill(c_mid);

  circle(30, 35, 20); //귀 l

  fill(c3);

  circle(30, 35, 10);

  fill(c_mid);

  circle(70, 35, 20); //귀 r

  fill(c3);

  circle(70, 35, 10);

  fill(c_mid);

  circle(50, 50, 50);

  fill("black");

  circle(sidelen / 2 - 10, sidelen / 2 - 5, 7);

  circle(sidelen / 2 + 10, sidelen / 2 - 5, 7);

  fill("#392b1f");

  ellipse(50, 53, 6, 3);

  fill("white");

  circle(38, 44, 1.5);

  circle(58, 44, 1.5);

  fill("#e07a95");

  stroke("black");

  strokeWeight(0.5);

  ellipse(sidelen / 2, sidelen / 2 + 12, 250 * micLevel, 170 * micLevel);

  pop();

​

  push();

  translate(350, -40);

  noStroke();

  c1 = color("#b18036");

  c2 = color("white");

  c3 = color("#f1b990");

  c_mid = lerpColor(c1, c2, 10 * micLevel);

  fill(c_mid);

  circle(30, 35, 20); //귀 l

  fill(c3);

  circle(30, 35, 10);

  fill(c_mid);

  circle(70, 35, 20); //귀 r

  fill(c3);

  circle(70, 35, 10);

  fill(c_mid);

  circle(50, 50, 50);

  fill("black");

  circle(sidelen / 2 - 10, sidelen / 2 - 5, 7);

  circle(sidelen / 2 + 10, sidelen / 2 - 5, 7);

  fill("#392b1f");

  ellipse(50, 53, 6, 3);

  fill("white");

  circle(38, 44, 1.5);

  circle(58, 44, 1.5);

  fill("#e07a95");

  stroke("black");

  strokeWeight(0.5);

  ellipse(sidelen / 2, sidelen / 2 + 12, 250 * micLevel, 170 * micLevel);

  pop();

​

  push();

  translate(-50, 320);

  noStroke();

  c1 = color("#b18036");

  c2 = color("white");

  c3 = color("#f1b990");

  c_mid = lerpColor(c1, c2, 10 * micLevel);

  fill(c_mid);

  circle(30, 35, 20); //귀 l

  fill(c3);

  circle(30, 35, 10);

  fill(c_mid);

  circle(70, 35, 20); //귀 r

  fill(c3);

  circle(70, 35, 10);

  fill(c_mid);

  circle(50, 50, 50);

  fill("black");

  circle(sidelen / 2 - 10, sidelen / 2 - 5, 7);

  circle(sidelen / 2 + 10, sidelen / 2 - 5, 7);

  fill("#392b1f");

  ellipse(50, 53, 6, 3);

  fill("white");

  circle(38, 44, 1.5);

  circle(58, 44, 1.5);

  fill("#e07a95");

  stroke("black");

  strokeWeight(0.5);

  ellipse(sidelen / 2, sidelen / 2 + 12, 250 * micLevel, 170 * micLevel);

  pop();

​

  push();

  translate(760, 20);

  noStroke();

  c1 = color("#b18036");

  c2 = color("white");

  c3 = color("#f1b990");

  c_mid = lerpColor(c1, c2, 10 * micLevel);

  fill(c_mid);

  circle(30, 35, 20); //귀 l

  fill(c3);

  circle(30, 35, 10);

  fill(c_mid);

  circle(70, 35, 20); //귀 r

  fill(c3);

  circle(70, 35, 10);

  fill(c_mid);

  circle(50, 50, 50);

  fill("black");

  circle(sidelen / 2 - 10, sidelen / 2 - 5, 7);

  circle(sidelen / 2 + 10, sidelen / 2 - 5, 7);

  fill("#392b1f");

  ellipse(50, 53, 6, 3);

  fill("white");

  circle(38, 44, 1.5);

  circle(58, 44, 1.5);

  fill("#e07a95");

  stroke("black");

  strokeWeight(0.5);

  ellipse(sidelen / 2, sidelen / 2 + 12, 250 * micLevel, 170 * micLevel);

  pop();

​

  push();

  translate(680, 550);

  noStroke();

  c1 = color("#b18036");

  c2 = color("white");

  c3 = color("#f1b990");

  c_mid = lerpColor(c1, c2, 10 * micLevel);

  fill(c_mid);

  circle(30, 35, 20); //귀 l

  fill(c3);

  circle(30, 35, 10);

  fill(c_mid);

  circle(70, 35, 20); //귀 r

  fill(c3);

  circle(70, 35, 10);

  fill(c_mid);

  circle(50, 50, 50);

  fill("black");

  circle(sidelen / 2 - 10, sidelen / 2 - 5, 7);

  circle(sidelen / 2 + 10, sidelen / 2 - 5, 7);

  fill("#392b1f");

  ellipse(50, 53, 6, 3);

  fill("white");

  circle(38, 44, 1.5);

  circle(58, 44, 1.5);

  fill("#e07a95");

  stroke("black");

  strokeWeight(0.5);

  ellipse(sidelen / 2, sidelen / 2 + 12, 250 * micLevel, 170 * micLevel);

  pop();

​

  push();

  stroke("white");

  strokeWeight(3);

  circle(random(width), random(height), map(mouseY, 0, height, 0, 300));

  fill("white");

  noStroke();

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

  pop();

}

​

//BG

let bg = "#6493d0";

let cc = "#e8efc9";

function drawBackground() {

  background(bg);

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

  let t = map(mouseX, 0, width, -10, 100);

  curveTightness(t);

  noFill();

  stroke("#e8efc9");

  strokeWeight(map(mouseX, 0, width, 4, 110));

  beginShape();

  curveVertex(400, 500);

  curveVertex(400, 550);

  curveVertex(10, 700);

  curveVertex(700, 10);

  curveVertex(25, 65);

  curveVertex(25, 65);

  curveVertex(15, 300);

  endShape();

}

function mousePressed() {

  if (bg == "#6493d0") bg = "#223d69";

  else if (bg == "#223d69") bg = "#1774c4";

  else if (bg == "#1774c4") bg = "#5797ac";

  else if (bg == "#5797ac") bg = "#c2d6e8";

  else {

    bg = "#6493d0";

  }

}

​

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

      fill(random(100, 250), random(100, 250), random(100, 250));

      noStroke();

      circle(x, y, random(10, 30));

      pop();

    }

  }

}

​