Calculating the displacement of keypoints in pixels

p5.js Libraries
1

Hi , I am exploring then ml5 and posenet . I am having some issues in calculating the displacement of keypoints ( nose , in my case) . I can get the keypoints logged out but my logic on calculating the displacement of nose keypoint in the x , y axis seem to be wrong . I am trying to calculate the velocity
from the formula (sqrt(x2-x1)²+(y2-ya)²)/dt . Following is my code snippet .

let video;
let poseNet; 
let poses = [];
let skeletons = [];
var displacementNoseX =[];
let noseX;
let noseY;

let pNoseX;
let pNoseY;

function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.size(width, height);

  pixelDensity(1);
  pg = createGraphics(width, height);

  // Create a new poseNet method with a single detection
  poseNet = ml5.poseNet(video, modelReady);

  poseNet.on('pose', function(results) {
    poses = results;
  });

  // Hide the video element, and just show the canvas
  video.hide();
}

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 < min(poses.length, 1); i++) {
    // For each pose detected, loop through all the keypoints
    for (let j = 0; j < poses[i].pose.keypoints.length; j++) {
      // A keypoint is an object describing a body part (like rightArm or leftShoulder)
      let keypoint = poses[i].pose.keypoints[j];
      // Only draw an ellipse is the pose probability is bigger than 0.2
      if (keypoint.score > 0.2) {
        if (j == 0) {
          noseX = keypoint.position.x;
          noseY = keypoint.position.y;
          
          // displacement x2-x1
          


          pNoseX = noseX;
          pNoseY = noseY;
          displacementNoseX = pNoseX-noseX 
          console.log(displacementNoseX)
          

          // Results in 0 displacement
          
        // Appending  element in the array 
        //displacementNoseX = displacementNoseX.concat(displacementNoseX);
        //Error 
        }
      }
    }
  }
}

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

// The callback that gets called every time there's an update from the model
function gotPoses(results) {
  poses = results;
}

function keyPressed() {
  pg.clear();
}

function modelReady() {
  select('#status').html('model Loaded');
}
2

Hello,

Welcome to the forum.

And thanks for this topic! I am going to have some fun with it.

I took a look at example here:
https://thecodingtrain.com/learning/ml5/7.1-posenet.html

I added this:

let nosexLast;
let noseyLast;

let dt = .1;  
let velNose = dist(pose.nose.x, pose.nose.y, nosexLast, noseyLast)/dt;
strokeWeight(5);
stroke(255, 0, 0);
line(0, 10, velNose, 10);
    
nosexLast = pose.nose.x;
noseyLast = pose.nose.y;

In a nutshell, I am keeping track of the last position and subtracting that from the current position and then plotting a line proportional to velocity.

I used the dist() function:
https://p5js.org/reference/#/p5/dist

You can do the math as you did also.

dt can be the exact time between frames and scaled as desired; I made it a fixed value to scale it nicely for this example.

You can use millis() to calculate time between frames:
https://p5js.org/reference/#/p5/millis

Have fun!

:)

1 Like
3

Hi , thank you for information. If i understand correctly gives for example the x co-ordinate for nosexLast in the frame n and pose.nose.x is the x co cordinate in n-1 frame right ? But the drawing function happens in the same block of code that is the nth frame right ?

Another thing is in my solution , i tried to do append the poses in an array ( using the logic similar to python in array.append() method using array.push() in the posesX array . Isn’t that right way to append x co ordinates ? so as to make a 1D array ?

1 Like
4

You save your current x in xLast and use xLast in next frame.

Example 
let count = 0;
let countLast = 0;

function setup() 
  {
  createCanvas(400, 400);
  frameRate(1); //Slow things down for example
  textSize(24);
  }

function draw() 
  {
  background(220);
  //countLast = count; Woops! Wrong spot.  
  text(count, 100, 100);
  text(countLast, 100, 130)
  
  text(count-countLast, 100, 160);  
  
  countLast = count; //Whew! Works here!   
  count += 5;  
  }

See the p5.js references:
https://p5js.org/reference/
Look for append and shorten and read the description.

image

:)

1 Like