// https://editor.p5js.org/yining/sketches/Tb4V-fXaz

​

let bodyPose;

let video;

let poses;

let latestNoses = [];

let trailingLength = 32;

​

function preload() {

  bodyPose = ml5.bodyPose();

}

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.hide();

  bodyPose.detectStart(video, gotResults);

  noStroke();

  fill(155, 20, 200);

}

​

function gotResults(results) {

  if (results) {

    poses = results;

    if (poses[0]) {

      const nose = poses[0].nose;

      latestNoses.push(nose);

      if (latestNoses.length > trailingLength) {

        latestNoses.shift();

      }

    }

  }

}

​

function draw() {

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

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

    fill(155, 20, 200, map(i, 0, latestNoses.length, 0, 255));

    const diameter = map(i, 0, latestNoses.length, 0, 64);

    circle(latestNoses[i].x, latestNoses[i].y, diameter);

  }

}

​