# Calculating the displacement of keypoints in pixels

**URL:** <https://discourse.processing.org/t/calculating-the-displacement-of-keypoints-in-pixels/31430>\
**Category:** Libraries\
**Created:** [July 24, 2021, 10:23pm UTC](https://discourse.processing.org/t/calculating-the-displacement-of-keypoints-in-pixels/31430 "2021-07-24T22:23:01Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Timo](https://avatars.discourse-cdn.com/v4/letter/t/c4cdca/32.png) [@Timo](https://discourse.processing.org/u/Timo)\
**Post date:** [July 24, 2021, 10:23pm UTC](https://discourse.processing.org/t/calculating-the-displacement-of-keypoints-in-pixels/31430/1 "2021-07-24T22:23:01Z")

</div>

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 .

```auto
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');
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 25, 2021, 11:54am UTC](https://discourse.processing.org/t/calculating-the-displacement-of-keypoints-in-pixels/31430/2 "2021-07-25T11:54:13Z")

</div>

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](https://thecodingtrain.com/learning/ml5/7.1-posenet.html)

I added this:

```auto
let nosexLast;
let noseyLast;

```

```auto
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](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](https://p5js.org/reference/#/p5/millis)

Have fun!

`:)`

---

<div class="post-metadata">

**Author:** ![Timo](https://avatars.discourse-cdn.com/v4/letter/t/c4cdca/32.png) [@Timo](https://discourse.processing.org/u/Timo)\
**Post date:** [July 31, 2021, 8:34pm UTC](https://discourse.processing.org/t/calculating-the-displacement-of-keypoints-in-pixels/31430/3 "2021-07-31T20:34:26Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 31, 2021, 8:51pm UTC](https://discourse.processing.org/t/calculating-the-displacement-of-keypoints-in-pixels/31430/4 "2021-07-31T20:51:26Z")

</div>

> [@Timo](#):
>
> 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 ?

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

> **Example**
>
> ```auto
> 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;  
> }
> 
> ```

> [@Timo](#):
>
> Isn’t that right way to append x co ordinates ?

See the p5.js references:  
[https://p5js.org/reference/](https://p5js.org/reference/)  
Look for `append` and `shorten` and read the description.

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1d6148e88f4d96ce697fdb27e28ae13fd9840e36.png)

`:)`