Skip to content

Instantly share code, notes, and snippets.

@omimo

omimo/index.html

Last active February 25, 2017 12:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save omimo/8b889213fb925f82b74658b9a1b89ef6 to your computer and use it in GitHub Desktop.
Save omimo/8b889213fb925f82b74658b9a1b89ef6 to your computer and use it in GitHub Desktop.
Download ZIP
A sketch of motion capture frames
Raw
index.html
<html>
<head>
<title>
Movement Data Visualization
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
* {
box-sizing: border-box
}
body {
margin: 0px;
}
svg {
position: relative;
display: block;
margin: 0 auto;
transform: scale(1.4);
}
#c1 {
position: relative;
top: calc( 40% - 100px )
}
</style>
</head>
<body>
<div id="c1">
</div>
<script src="sketch.js"></script>
</body>
</html>
Raw
sketch.js
// Variables
var connectivityMatrix;
var positions;
var figureScale = 2.2;
var h = 270;
var w = 1000;
var gap = 0.6;
var skip = 2;
var svg;
function draw() {
// Prep the environment
var parent = d3.select("body").select("#c1");
svg = parent.append("svg")
.attr("width", w)
.attr("height", h)
.attr("overflow", "scroll");
// Scale the data
index = 30;
positions.splice(0, 160);
positions.splice(positions.length - 490, 490);
frames = positions.map(function (ff, j) {
return ff.map(function (d, i) {
return {
x: (d.x + 70) * figureScale,
y: -1 * d.y * figureScale + h - 10,
z: d.z * figureScale
};
});
});
// Joints
headJoint = 7;
svg.selectAll("g.joints")
.data(frames.filter(function (d, i) {
return i % skip == 0;
}))
.enter()
.append("g")
.attr("transform", function (d, i) {
return "translate(" + (i * gap) + ",0)";
})
.selectAll("circle.f" + index)
.data(function (d, i) {
return d
})
.enter()
.append("circle")
.attr("cx", function (d) {
return d.x;
}).attr("cy", function (d) {
return d.y;
}).attr("r", function (d, i) {
if (i == headJoint || i == 28 || i == 21 || i == 13 || i == 33)
return 1;
else
return 0;
}).attr("fill", function (d, i, k) {
if (k > 0 && i == 7) {
spx = Math.abs(frames[k * skip][i].x - frames[(k - 1) * skip][i].x);
spy = Math.abs(frames[k * skip][i].y - frames[(k - 1) * skip][i].y);
spz = Math.abs(frames[k * skip][i].z - frames[(k - 1) * skip][i].z);
sp = Math.sqrt(Math.pow(spx, 2) + Math.pow(spy, 2) + Math.pow(spz, 2));
return d3.hsl(190, 1, 1 - Math.min(1, sp / 3));
} else if (k > 0 && i == 28) {
spx = Math.abs(frames[k * skip][i].x - frames[(k - 1) * skip][i].x);
spy = Math.abs(frames[k * skip][i].y - frames[(k - 1) * skip][i].y);
spz = Math.abs(frames[k * skip][i].z - frames[(k - 1) * skip][i].z);
sp = Math.sqrt(Math.pow(spx, 2) + Math.pow(spy, 2) + Math.pow(spz, 2));
return d3.hsl(210, 1, 1 - Math.min(1, sp / 2));
} else if (k > 0 && i == 21) {
spx = Math.abs(frames[k * skip][i].x - frames[(k - 1) * skip][i].x);
spy = Math.abs(frames[k * skip][i].y - frames[(k - 1) * skip][i].y);
spz = Math.abs(frames[k * skip][i].z - frames[(k - 1) * skip][i].z);
sp = Math.sqrt(Math.pow(spx, 2) + Math.pow(spy, 2) + Math.pow(spz, 2));
return d3.hsl(339, 1, 1 - Math.min(1, sp / 3));
} else if (k > 0 && i == 13) {
spx = Math.abs(frames[k * skip][i].x - frames[(k - 1) * skip][i].x);
spy = Math.abs(frames[k * skip][i].y - frames[(k - 1) * skip][i].y);
spz = Math.abs(frames[k * skip][i].z - frames[(k - 1) * skip][i].z);
sp = Math.sqrt(Math.pow(spx, 2) + Math.pow(spy, 2) + Math.pow(spz, 2));
return d3.hsl(210, 1, 1 - Math.min(1, sp / 3));
} else if (k > 0 && i == 33) {
spx = Math.abs(frames[k * skip][i].x - frames[(k - 1) * skip][i].x);
spy = Math.abs(frames[k * skip][i].y - frames[(k - 1) * skip][i].y);
spz = Math.abs(frames[k * skip][i].z - frames[(k - 1) * skip][i].z);
sp = Math.sqrt(Math.pow(spx, 2) + Math.pow(spy, 2) + Math.pow(spz, 2));
return d3.hsl(339, 1, 1 - Math.min(1, sp * 2));
} else
return "grey";
})
.attr("fill-opacity", function (d, i, k) {
if ((k * skip) < (frames.length / 2))
coef = (k * skip) / frames.length;
else
coef = (frames.length - (k * skip)) / frames.length;
return coef;
});
// Bones
svg.selectAll("g.bones")
.data(frames.filter(function (d, i) {
return i % skip == 0;
}))
.enter()
.append("g")
.attr("transform", function (d, i) {
return "translate(" + (i * gap) + ",0)";
})
.selectAll("line.f" + index)
.data(connectivityMatrix)
.enter()
.append("line")
.attr("stroke", "grey")
.attr("stroke-opacity", function (d, j, k) {
if ((k * skip) < (frames.length / 2))
coef = (k * skip) / frames.length;
else
coef = (frames.length - (k * skip)) / frames.length;
return Math.min(0.17, coef);
})
.attr("stroke-width", 1.4)
.attr("x1", 0).attr("x2", 0)
.attr("x1", function (d, j, k) {
return frames[k * skip][d[0]].x;
})
.attr("x2", function (d, j, k) {
return frames[k * skip][d[1]].x;
})
.attr("y1", function (d, j, k) {
return frames[k * skip][d[0]].y;
})
.attr("y2", function (d, j, k) {
return frames[k * skip][d[1]].y;
});
window.parent.loaded();
}
// Read the files
$.getJSON("https://omid.al/moveviz/data/Skeleton_BEA.json", function (json) {
connectivityMatrix = json;
$.getJSON("https://omid.al/moveviz/data/BEA.json", function (json) {
positions = json;
draw();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment