P5.JS Pose Detection

ML5: Webcam Body Tracking using Posenet - p5.js Webcam

Pose Estimation with PoseNet

Dropped shoulder syndrome, is caused by uneven shoulders occur when one shoulder is higher than the other. This can be a slight or significant difference and may be due to several causes like scoliosis in the future.

I’m suffering from Dropped shoulder syndrome for a long time. The reason for this, was carrying bag in one shoulder with lots of books in it in my early ages, but there are other reasons why it may occur like always using one hand or side of your body for writing or drawing. If you have uneven shoulders you may experience neck, shoulder, and lower back pain like me.

This application could help people like me to engage in regular exercise and  participate in sports as much as possible. I will make it a practice to check in with their posture continually throughout the exercice process and make people to become aware of their posture wether the exercises improve their process. It’s not only while they are standing or sitting, but as a tool to participate in exercise as much as possible.

I will use, real medical exercise to healing techniques promote symmetrical alignment and balance in your body for people who suffers from dropped shoulder syndrome like me.

I used ml5 and poseNet are the platforms that I can use as a tool for this project.

---

Public Code BELOW

let video;
let poseNet;
let poses = [];

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

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;
    for (let j = 0; j < pose.keypoints.length; j++) {
      // A keypoint is an object describing a body part (like rightArm or leftShoulder)
      let keypoint = pose.keypoints[j];
      // Only draw an ellipse is the pose probability is bigger than 0.2
      if (keypoint.score > 0.2) {
        fill(255, 0, 0);
        noStroke();
        ellipse(keypoint.position.x, keypoint.position.y, 10, 10);
      }
    }
  }
}

// A function to draw the skeletons
function drawSkeleton() {
  // Loop through all the skeletons detected
  for (let i = 0; i < poses.length; i++) {
    let skeleton = poses[i].skeleton;
    // For every skeleton, loop through all body connections
    for (let j = 0; j < skeleton.length; j++) {
      let partA = skeleton[j][0];
      let partB = skeleton[j][1];
      stroke(255, 0, 0);
      line(partA.position.x, partA.position.y, partB.position.x, partB.position.y);
    }
  }