function Computational(canvas) {
var xScale = d3.scale.linear().domain([-1, 1]).range([0, 1000]);
var yScale = d3.scale.linear().domain([-0.2, 1.2]).range([1000, 0]);
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(0,0,0)";
ctx.fillRect(0, 0, 1000, 800);
// 3 colours, one for extremities, another for insides, another for in-betweens
var colors = {
HipCenter : '#ff7f0e',
Spine : '#ff7f0e',
ShoulderCenter : '#ff7f0e',
Head : '#e7cb94',
ShoulderLeft : '#bd9e39',
ElbowLeft : '#bd9e39',
WristLeft : '#bd9e39',
HandLeft : '#e7cb94',
ShoulderRight : '#bd9e39',
ElbowRight : '#bd9e39',
WristRight : '#bd9e39',
HandRight : '#e7cb94',
HipLeft : '#bd9e39',
KneeLeft : '#bd9e39',
AnkleLeft : '#bd9e39',
FootLeft : '#e7cb94',
HipRight : '#bd9e39',
KneeRight : '#bd9e39',
AnkleRight : '#bd9e39',
FootRight : '#e7cb94'
}
// Colour coded hands + feet
// var colors = {
// HipCenter : '#5254a3',
// Spine : '#5254a3',
// ShoulderCenter : '#5254a3',
// Head : '#5254a3',
// ShoulderLeft : '#5254a3',
// ElbowLeft : '#5254a3',
// WristLeft : '#5254a3',
// HandLeft : '#637939',
// ShoulderRight : '#5254a3',
// ElbowRight : '#5254a3',
// WristRight : '#5254a3',
// HandRight : '#8c6d31',
// HipLeft : '#5254a3',
// KneeLeft : '#5254a3',
// AnkleLeft : '#5254a3',
// FootLeft : '#843c39',
// HipRight : '#5254a3',
// KneeRight : '#5254a3',
// AnkleRight : '#5254a3',
// FootRight : '#7b4173'
// }
function getAllJoints(json) {
var joints = [];
_.each(json.Skeletons, function(skeleton) {
_.each(skeleton.Joints, function(joint) {
joints.push(joint);
});
});
return joints;
}
function getJointsOfSkeleton(json, skeleton) {
var joints = [];
if(json.Skeletons === undefined)
return [];
if(skeleton > json.Skeletons.length - 1)
return [];
_.each(json.Skeletons[skeleton].Joints, function(joint) {
joints.push(joint);
});
return joints;
}
function clear() {
ctx.globalAlpha = 1;
ctx.fillStyle = "rgb(0,0,0)";
ctx.fillRect(0, 0, 1000, 800);
}
this.draw = function(json) {
// console.log(json);
if(json === undefined) {
return;
}
var joints = getJointsOfSkeleton(json, 0);
ctx.globalAlpha = 0.03;
_.each(joints, function(joint, i) {
// console.log(joint.JointType)
ctx.fillStyle = colors[joint.JointType];
drawCircle(ctx, xScale(joint.Position.X), yScale(joint.Position.Y), 3);
});
};
};
// You can choose one of these to visualise a different dance
var DATASET_ALGORITHM = 'https://d10u56tzn9e9rq.cloudfront.net/algorithm_';
var DATASET_BINARY = 'https://d10u56tzn9e9rq.cloudfront.net/binary_';
var DATASET_WHOLEPIECE = 'https://d10u56tzn9e9rq.cloudfront.net/wholepiece_';
var dataFetcher = new ChunkedDataFetcher(DATASET_ALGORITHM);
var computational = new Computational( document.getElementById('mycanvas'));
dataFetcher.drawFunction = function(json) {computational.draw(json);
}