2-3 Body Pose

let video;
let bodyPose;
let poses = [];
let options = { modelType: "MULTIPOSE", flipped: false };
let isModelStarted = false;
let isModelLoaded = false;

function setup() {
  createCanvas(windowWidth, windowHeight);
  pixelDensity(1);
  video = createCapture(VIDEO);
  video.size(640, 480);
  video.hide();

  ml5.bodyPose(options).then((results) => {
    bodyPose = results;
    isModelLoaded = true;
  });
}

function gotPoses(results) {
  poses = results;
}

function draw() {
  background(20);

  if (
    !isModelLoaded ||
    !video ||
    !video.elt ||
    video.elt.readyState < 2 ||
    video.elt.videoWidth === 0
  ) {
    fill(255);
    textAlign(CENTER, CENTER);
    textSize(24);
    text("Initializing AI Model... Please wait", width / 2, height / 2);
    return;
  }

  if (!isModelStarted) {
    bodyPose.detectStart(video.elt, gotPoses);
    isModelStarted = true;
  }

  push();
  translate(width, 0);
  scale(-1, 1);

  let vW = video.width || video.elt.videoWidth;
  let vH = video.height || video.elt.videoHeight;
  let aspect = vW / vH;
  let drawW = height * aspect;
  let drawH = height;
  if (drawW > width) {
    drawW = width;
    drawH = width / aspect;
  }
  let drawX = (width - drawW) / 2;
  let drawY = (height - drawH) / 2;

  tint(255, 60);
  image(video, drawX, drawY, drawW, drawH);
  noTint();

  for (let i = 0; i < poses.length; i++) {
    let pose = poses[i];
    if (pose && pose.keypoints) {
      for (let j = 0; j < pose.keypoints.length; j++) {
        let keypoint = pose.keypoints[j];
        if (keypoint && keypoint.confidence > 0.1) {
          let x = map(keypoint.x, 0, vW, drawX, drawX + drawW);
          let y = map(keypoint.y, 0, vH, drawY, drawY + drawH);
          fill(0, 255, 0);
          noStroke();
          circle(x, y, 8);
        }
      }
    }
  }
  pop();
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}