getSkeletons

The function getSkeletons receives a jsonObject, this .json file passes the values of the joints obtained from the Kinect sensor. So, in simple words, it is not a gesture as such but a list with the positions of those joints captured by the sensor from the body.

These joint are seen in the image below.

 

The joints available which are included in the .json are listed below with the naming and number convention used for them.

[0] handright
[1] elbowright
[2] shoulderright
[3] handleft
[4] elbowleft
[5] shoulderleft
[6] head
[7] spineneck
[8] spinecenter
[9] hipcenter
[10] kneeleft
[11] kneeright
[12] ankleleft
[13] ankleright

With them you can control the application in multiple different ways, assigning them for triggering actions, use some of them to control de mouse functionality, combine them to make an avatar jumping or running to name just a few.

Let´s create an application which shows the skeletons and those joints in order to visualize them and understand it better.

First, we are going to need the skeletonsCanvas from HTML which is already created for you when a new application is created.

HTML

<html>

<head>
</head>

<body>
  <canvas id="skeletonsCanvas" width="640" height="480"></canvas>


</body>

</html>

 

Then, in order to visualize it we will add the following lines onto the CSS.

CSS

.skeletonsCanvas{
bottom: 20px;
left: 100px;
position: absolute;
transition: bottom .3s;
z-index: -3000;
}

 

Finally, we will add the lines needed onto the Javascript code to make it work.

 

mouseHasBeenMoved = {'hasMoved': false};

var canvas = document.getElementById("skeletonsCanvas");
var context = canvas.getContext("2d");


function getSkeletons(jsonObject){



if (context == null) {
return;
}
try{
if(recorder.recording){
recorder.saveStep(jsonObject);
}
}catch(err){

}

context.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < jsonObject.skeletons.length; i++) {
var headZ = 0;
var hipZ = 0;

//draw head
var head = jsonObject.skeletons[i].joints[6];

//http://www.codeproject.com/KB/dotnet/KinectGettingStarted/7.png
//------------------------
//[0] handright
//[1] elbowright
//[2] shoulderright
//[3] handleft
//[4] elbowleft
//[5] shoulderleft
//[6] head
//[7] spineneck
//[8] spinecenter
//[9] hipcenter
//[10] kneeleft
//[11] kneeright
//[12] ankleleft
//[13] ankleright

var shouldercenter = jsonObject.skeletons[i].joints[7];
var shoulderleft = jsonObject.skeletons[i].joints[5];
var shoulderright = jsonObject.skeletons[i].joints[2];
var elbowright = jsonObject.skeletons[i].joints[1];
var elbowleft = jsonObject.skeletons[i].joints[4];
var handright = jsonObject.skeletons[i].joints[0];
var handleft = jsonObject.skeletons[i].joints[3];
//var wristright = jsonObject.skeletons[i].joints[10];
//var wristleft = jsonObject.skeletons[i].joints[6];
var hipcenter = jsonObject.skeletons[i].joints[9];
var kneeleft = jsonObject.skeletons[i].joints[10];
var kneeright = jsonObject.skeletons[i].joints[11]; 
var ankleleft = jsonObject.skeletons[i].joints[12]; 
var ankleright = jsonObject.skeletons[i].joints[13]; 

context.fillStyle = "#000000";
context.strokeStyle = '#000000'; 
context.lineWidth = 10;


context.beginPath()
context.arc(head.x, head.y, 20, 0, Math.PI * 2, true);
context.closePath()
context.fill(); 
context.stroke(); 

context.beginPath()
context.moveTo(head.x, head.y);
context.lineTo(shouldercenter.x, shouldercenter.y);
context.closePath()
context.stroke();


context.beginPath()
context.moveTo(shouldercenter.x, shouldercenter.y);
context.lineTo(elbowright.x, elbowright.y); 
context.closePath()
context.stroke();

context.beginPath()
context.moveTo(elbowright.x, elbowright.y);
context.lineTo(handright.x, handright.y); 
context.closePath()
context.stroke();


context.beginPath()
context.moveTo(shouldercenter.x, shouldercenter.y);
context.lineTo(elbowleft.x, elbowleft.y);
context.closePath()
context.stroke();

context.beginPath()
context.moveTo(elbowleft.x, elbowleft.y);
context.lineTo(handleft.x, handleft.y); 
context.closePath()
context.stroke(); 

context.beginPath()
context.moveTo(shouldercenter.x, shouldercenter.y);
context.lineTo(hipcenter.x, hipcenter.y);
context.closePath()
context.stroke();

context.beginPath()
context.moveTo(hipcenter.x, hipcenter.y);
context.lineTo(kneeleft.x, kneeleft.y); 
context.closePath()
context.stroke();

context.beginPath()
context.moveTo(kneeleft.x, kneeleft.y);
context.lineTo(ankleleft.x, ankleleft.y); 
context.closePath()
context.stroke(); 


context.beginPath()
context.moveTo(hipcenter.x, hipcenter.y);
context.lineTo(kneeright.x, kneeright.y); 
context.closePath()
context.stroke();

context.beginPath()
context.moveTo(kneeright.x, kneeright.y);
context.lineTo(ankleright.x, ankleright.y); 
context.closePath()
context.stroke();





/*
context.beginPath()
context.arc(shoulderLeft.x, shoulderLeft.y, 20, 0, Math.PI * 2, true);
context.closePath()
context.fill(); 
context.stroke(); 

context.beginPath()
context.arc(shoulderRight.x, shoulderRight.y, 20, 0, Math.PI * 2, true); 
context.closePath()
context.fill(); 
context.stroke();

*/


/*for (var j = 0; j < jsonObject.skeletons[i].joints.length; j++) 
{
var joint = jsonObject.skeletons[i].joints[j];

context.fillStyle = "#EC8B38";
context.beginPath();
context.arc(joint.x, joint.y, 10, 0, Math.PI * 2, true);
context.closePath();
context.fill(); 

}*/
}
}

This app requires Kinect sensor to work.

BUILT-IN GESTURES

Other GESTURES