let video;

let predictions = [];

let margin = 50;

let mic, vol;

let shouldDraw = false;

let black_screen = true;

let starImg;

let wy1Img;

let tsumuImg;

let song;

let capture;

let newLayer = false;

let poseNet;

let poses = [];

​

​

​

function preload() {

  starImg = loadImage("star.jpg");

  wy1Img = loadImage("wy1.jpg");

  sz = loadImage("sz.jpg");

  tsumu=loadImage("tsumu.gif");

}

​

function setup() {

  createCanvas(800, 600);

  video = createCapture(VIDEO);

  video.size(640, 480);

  song = loadSound('tsumu.m4a');

  capture = createCapture(VIDEO);

  capture.size(800, 600);

  capture.hide();

​

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

  text_layer = createGraphics(width, height);

​

poseNet = ml5.poseNet(video, poseNetModelReady);

​

  poseNet.on("pose", function (results) {

    poses = results;

  });

​

  // Hide the video element, and just show the canvas

  facemesh_layer = createGraphics(width, height);

  body_keypoints_layer = createGraphics(width, height);

  skeleton_layer = createGraphics(width, height);

  video.hide();

​

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function poseNetModelReady() {

  console.log("poseNet Model ready!");

  facemesh = ml5.facemesh(video, faceMeshModelReady);

  facemesh.on("predict", (results) => {

    predictions = results;

  });

}

​

function faceMeshModelReady() {

  console.log("faceMesh Model ready!");

}

​

function mousePressed() {//🟡语音包

  if (song.isPlaying()) {

    // .isPlaying() returns a boolean

    song.stop();

  } else {

    song.play();

  }

}

​

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.4) {

    shouldDraw = true;

  }

  if (vol < 0.2) {

    shouldDraw = false;

  }

  if (shouldDraw) {

    //🟡方块大小关联音量

    fill(r, g, b);

    noStroke();

    let x = random(width);

    let y = random(height);

    rect(x, y, squareSize, squareSize);

  }

  drawBackground();

  drawForeground();

​

  // We can call both functions to draw all keypoints

  drawKeypoints();

​

  if (black_screen) {

    background("black");

  }

function keyPressed() {

  shouldDraw = false;

}

​

function drawForeground() {

  //🟡猫狗狼1

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

  }

  image(text_layer,0,0,width,height)

  text_layer.clear()

}

​

function drawBackground() {

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

    background(0);

  }

  // } else {

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

  // }

  //🟡猫狗狼2

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

  }

​

 }

​

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

      if (x < 120 && y < 120) {

         if (!newLayer) {

    background("white");

    capture.loadPixels();

    let gap = 10;

    for (let i = 0; i < capture.width; i += gap) {

      for (let j = 0; j < capture.height; j += gap) {

        let index = (j * capture.width + i) * 4;

        let red = capture.pixels[index];

        let green = capture.pixels[index + 1];

        let blue = capture.pixels[index + 2];

        let alpha = capture.pixels[index + 3];

        noStroke();

        fill("black");

        let val = map(green, 0, 255, 0, 6);

        let char = "";

        if (val > 5) {

          char = "🐋";

        } else if (val > 4) {

          char = "☄️";

        } else if (val > 2) {

          char = "📘";

        } else if (val > 1) {

          char = "🧼";

        } else if (val > 0) {

          char = "🔹";

        }

        textAlign(CENTER, CENTER);

        text(char, i, j);

      }

   newLayer = !newLayer;

  }

}

      }

      if (x > 600 && y < 200) {

        image(wy1Img, -100, -50, wy1Img.width * 0.7, wy1Img.height * 0.7);

      }

      if (x > 600 && y > 400) {

        image(tsumu, 0, 20, 800 ,500 );

      }   

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

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

        text_layer.fill(255);

        text_layer.textSize(30);

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

      } //新建一个图层

      pop();

    }

  }

}

​

   if (frameCount % 300 == 0) {

    clearScreen();

  }

  drawFacemeshKeypoints();

  drawBodyKeypoints();

  image(video, 0, 0, width, height);

  image(facemesh_layer, 0, 0, width, height);

  image(skeleton_layer, 0, 0, width, height);

  image(body_keypoints_layer, 0, 0, width, height);

​

}

​

function drawBodyKeypoints() {

  for (let i = 0; i < poses.length; i++) {

    let pose = poses[i].pose;

    for (let j = 0; j < pose.keypoints.length; j++) {

      let keypoint = pose.keypoints[j];

      let x = keypoint.position.x;

      let y = keypoint.position.y;

      if (keypoint.score > 0.2) {

        body_keypoints_layer.push();

        if (j == 9 || j == 10) 

        {

          body_keypoints_layer.textSize(100);

          body_keypoints_layer.text("🌠", x, y);

        }

        body_keypoints_layer.pop();

      }

    }

  }

}

​

function drawFacemeshKeypoints() {

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

    }

  }

}

​

​

function clearScreen() {

  facemesh_layer.clear();

  skeleton_layer.clear();

  body_keypoints_layer.clear();

}

​

function keyPressed() {

  black_screen = false;

}

​

push()

fill(" white");

rect(0,0,800,40)

textSize(35)

fill("black")

text("Try moving around or Press C/D/W/X" ,20,20)

pop()

push();

​

​