# Calculating the displacement of keypoints in pixels

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

}
``````

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

``````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

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 ?

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.

`:)`