//

// This software is released under the MIT License.

// https://opensource.org/licenses/MIT

​

/* ===

ml5 Example

PoseNet example using p5.js

=== */

​

let video;

let poseNet;

let poses = [];

let trail = [];

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

​

  // Create a new poseNet method with a single detection

  poseNet = ml5.poseNet(video, modelReady);

  // This sets up an event that fills the global variable "poses"

  // with an array every time new poses are detected

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

    poses = results;

  });

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

  video.hide();

  colorMode(RGB, 100);

}

​

function modelReady() {

  select("#status").html("Model Loaded");

}

​

function draw() {

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

​

  // We can call both functions to draw all keypoints and the skeletons

  drawKeypoints();

  //  drawSkeleton();

}

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

  // Loop through all the poses detected

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

    // For each pose detected, loop through all the keypoints

    let pose = poses[i].pose;

​

    // Poses may include the following points:

    // leftEye,

    // rightEye,

    // nose,

    // leftEar,

    // rightEar,

    // leftShoulder,

    // rightShoulder,

    // leftElbow,

    // rightElbow,

    // leftWrist,

    // rightWrist,

    // leftHip,

    // rightHip,

    // leftKnee,

    // rightKnee,

    // leftAnkle,

    // rightAnkle

    fill(255, 0, 0);

    noStroke();

    ellipse(pose.leftEye.x, pose.leftEye.y, 10, 10);

    ellipse(pose.rightEye.x, pose.rightEye.y, 10, 10);

    powerEffect(pose.rightWrist, pose.leftWrist);

    // trail.unshift({ x1: pose.rightWrist.x, y1: pose.rightWrist.y });

  }

  // drawTrail();

}

​

function powerEffect(p1, p2) {

  if (p1.confidence < 0.2 || p2.confidence < 0.2) return;

  for (let i = 0; i < 30; i++) {

    randomStroke(255, 255, 255);

    brokenLine(p1.x, p1.y - 60, p2.x, p2.y - 60);

  }

}

​

function randomStroke() {

  if (random() < 0.8) {

    stroke(255);

  } else {

    let r = random() < 0.5 ? 255 : 0;

    let g = random() < 0.5 ? 255 : 0;

    let b = random() < 0.5 ? 255 : 0;

    stroke(r, g, b);

  }

}

​

const mid = (a, b) => (b - a) / 2 + a;

​

function brokenLine(x1, y1, x2, y2) {

  let breaks = [];

  let midx = fuzzy(mid(x1, x2));

  let midy = fuzzy(mid(y1, y2));

  let midxx = fuzzy(mid(x1, midx));

  let midxy = fuzzy(mid(y1, midy));

  let midyx = fuzzy(mid(midx, x2));

  let midyy = fuzzy(mid(midy, y2));

  breaks.push([x1, y1, midxx, midxy]);

  breaks.push([midxx, midxy, midx, midy]);

  breaks.push([midx, midy, midyx, midyy]);

  breaks.push([midyx, midyy, x2, y2]);

  breaks.forEach((b) => line(...b));

}

​

const fuzzy = (x) => x + random(-20, 20);

const fuzzyLine = (x1, y1, x2, y2) =>

  brokenLine(fuzzy(x1), fuzzy(y1), fuzzy(x2), fuzzy(y2));

​

function drawTrail() {

  if (trail.length < 2) return;

  if (trail.length > 100) {

    trail.length = 100;

  }

  let alpha = 100;

  strokeWeight(10);

  for (let i = 1; i < trail.length; i++) {

    let a = trail[i - 1];

    let b = trail[i];

    stroke(0, 255, 0, alpha - i);

    line(a.x, a.y, b.x, b.y);

  }

}

​