let video;

let predictions = [];

let margin = 50;

let mic, vol;

let shouldDraw = false;

let black_screen = true;

​

function setup() {

  createCanvas(800, 600);

  video = createCapture(VIDEO);

  video.size(640, 480);

​

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

​

  mic = new p5.AudioIn();

  mic.start();

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  // image(video, margin, margin, 640, 480);

  vol = mic.getLevel();

  let squareSize = map(vol, 0, 1, 10, 100);

  let r = map(vol, 0, 1, 0, 255);

  let g = random(100, 255);

  let b = random(100, 255);

  if (vol > 0.1) {

    shouldDraw = true;

  }

  if (shouldDraw) {

    fill(r, g, b);

    noStroke();

    let x = random(width);

    let y = random(height);

    rect(x, y, squareSize, squareSize);

  }

 background("black");

  drawBackground();

  drawForeground();

​

  // We can call both functions to draw all keypoints

  drawKeypoints();

  if(black_screen){

    background("black")

  }

}

function keyPressed() {

  shouldDraw = false;

}

​

function drawForeground() {

  if (keyIsPressed && key === "c") {

    let emojiSize = random(20, 80); // 随机猫爪 emoji 的大小

    let x = random(width); // 随机 x 坐标

    let y = random(height); // 随机 y 坐标

​

    textSize(emojiSize);

    text("🐾", x, y);

  } else if (keyIsPressed && key === "d") {

    let emojiSize = random(20, 80);

    let x = random(width);

    let y = random(height);

​

    textSize(emojiSize);

    text("🦴", x, y);

  } else if (keyIsPressed && key === "w") {

    let emojiSize = random(20, 80);

    let x = random(width);

    let y = random(height);

​

    textSize(emojiSize);

    text("🍖", x, y);

  } else {

    let size = map(mouseX, 0, width, 10, 100); // 将x坐标关联大小的范围

    let r = map(mouseX, 0, width, 0, 255); // 将x坐标关联红色的范围

    let g = map(mouseY, 0, height, 0, 255); // 将y坐标关联绿色的范围

    let b = map(mouseX, 0, width, 255, 0); // 将x坐标关联蓝色的范围

​

    fill(r, g, b);

    noStroke();

​

    ellipse(mouseX, mouseY, size, size);

  }

}

​

function drawBackground() {

  if (keyIsPressed && key === "x") {

    background(0);

  } else {

    circle(random(width), random(height), 10);

  }

​

  if (keyIsPressed && key === "c") {

    background(255, 255, 150);

    let emojiSize = random(20, 80);

    let x = random(width);

    let y = random(height);

​

    textSize(emojiSize);

    text("🐈", x, y);

  } else if (keyIsPressed && key === "d") {

    background(150, 200, 255);

    let emojiSize = random(20, 80);

    let x = random(width);

    let y = random(height);

​

    textSize(emojiSize);

    text("🐕", x, y);

  } else if (keyIsPressed && key === "w") {

    background(200, 150, 255);

    let emojiSize = random(20, 80);

    let x = random(width);

    let y = random(height);

​

    textSize(emojiSize);

    text("🐺", x, y);

  } else {

    circle(random(width), random(height), 10);

  }

}

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

  let textDrawn = false; // 用于跟踪是否已绘制文本

  let textSpacing = 40; // 文本之间的间距

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

      let colorValue = map(mouseY, 0, height, 0, 255); // 将y坐标与颜色范围关联

      let distance = dist(x, y, mouseX, mouseY); // 计算鼠标和方块之间的距离

      let size = map(0, distance, width, 20, 60); // 将距离映射到方块的大小范围

​

      fill(colorValue, random(255), random(255), random(255));

      square(x, y, size);

      let distance1 = dist(x, y, mouseX, mouseY); // 计算鼠标与脸部关键点之间的距离

      let textSize1 = map(distance, 0, width, 10, 100); // 将距离映射到文本大小范围

      if (distance < 30) {

        // 当鼠标接近脸部关键点时

        fill(255);

        textSize(30);

        text("BACK OFF", x - 80, y - 30);

      }

      pop();

    }

  }

  function keyPressed(){

    black_screen = false;

  }

​