let video;

let predictions = [];

let margin = 60;

let mic;

let gifImgSmall;

let gifImgMedium;

let gifImgBig;

let gifToShow;

let showGifFlag = true; // 控制是否显示 GIF 图像的标志变量

​

function preload() {

//   // 预加载不同 micLevel 对应的 GIF 图像

  gifImgSmall = loadImage("smallMouth.gif");

  gifImgMedium = loadImage("mediumMouth.gif");

  gifImgBig = loadImage("bigMouth.gif");

}

​

function setup() {

  createCanvas(800, 600);

  video = createCapture(VIDEO);

  video.size(640, 480);

  background(0);

​

  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 = new p5.AudioIn();

  mic.start();

​

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  micLevel = mic.getLevel();

  console.log(micLevel);

  var nx = map(micLevel,0, 0.8, 0, 200)

  var mx = map(mouseX, 0, width, 0, 255);

  fill("white");  

  pop();

  fill("white");

      stroke("black");

       circle(mouseX, mouseY, 12+micLevel*600);

  push();

   drawForeground();

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

  //We can call both functions to draw all keypoints

  drawKeypoints();

  drawBackground();

}

​

function drawForeground() {}

​

function drawBackground() {

​

}

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

      var mx = map(mouseX, 0, width, 0, 255);

      if (key == "s") {

        stroke(255 - mx,100,0);

        strokeWeight(micLevel*40);

        line(x, y, mouseX - 40, mouseY - 40);

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

        stroke(255 - mx, 100, 0);

        strokeWeight(micLevel*40);

        line(x, y, mouseX - 40, mouseY - 40);

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

        stroke(0, 100, 255 - mx);

        strokeWeight(micLevel*40);

        line(x, y, mouseX - 50, mouseY - 30);

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

        stroke(0, 255 - mx, 100);

        strokeWeight(micLevel*40);

        line(x, y, mouseX - 50, mouseY - 30);

      }

      if (j === 13 && showGifFlag) {

        showGif(x, y);

      }

    pop();

   }

​

  }

}

function showGif(x, y) {

  // 根据 micLevel 的值选择要显示的 GIF 图像

  if (micLevel < 0.1) {

    gifToShow = gifImgSmall;

  } else if (micLevel < 0.3) {

    gifToShow = gifImgMedium;

  } else {

    gifToShow = gifImgBig;

  }

​

  // 绘制 GIF 图像在第 13 号关键点的位置

  image(gifToShow, x -60, y-50 , gifToShow.width / 2, gifToShow.height / 2);

}

function keyPressed() {

  if (key === "m") {

    // 切换 showGifFlag 的状态，以控制是否显示 GIF 图像

    showGifFlag = !showGifFlag;

  }

}