Skip to content

Instantly share code, notes, and snippets.

@omimo
Last active October 18, 2018 01:06
Show Gist options
  • Save omimo/1cb780f7c578dcb7239ef6074f270649 to your computer and use it in GitHub Desktop.
Save omimo/1cb780f7c578dcb7239ef6074f270649 to your computer and use it in GitHub Desktop.
<html>
<head>
<title>
[Visualizing Movement Data with D3.js]
</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://omid.al/Mova-Viz/MovaViz-v0.1.2.js"></script>
<style>
* {
box-sizing: border-box
}
body {
margin: 0px;
}
svg {
position: relative;
left: calc(50% - 350px);
}
#cont{
position: relative;
top: calc( 50% - 400px);
}
</style>
</head>
<body>
<div id="cont"></div>
<script src="mviz.js"></script>
<script>run()</script>
</body>
</html>
// Created by Omid Alemi - 2016
// Parameters
var scale = 18;
var animFrame = 1;
var startTime = 0;
var randScale = 20;
var fig = {};
var ftop = 600;
var fleft = 300;
var traillength = 10;
var CMUDeletedBones = [0, 5,6,11,15,16,17,18,20,24,25,27,28,29,33,36];
// Create the SVG container
var svg = d3.select("body")
.select("#cont")
.append("svg")
.attr("width", 800)
.attr("height", 800);
// Mova Draw Functions
var lineBoneFcn = function(j) {
var c = j;
// if it is the first time this function is called, it should append the elements
if (j._exit === undefined)
c = j.append('line').attr('class','bone-line').attr("stroke", "#666666");
c.attr("stroke-width", function (d,i, k,p) {
return Math.random() + Math.random() * 3;
})
// .attr('id', function(d,i){return i})
.attr("x1", function (d, j) {
return d.x1 * scale + fleft + Math.random() * randScale;
})
.attr("x2", function (d, j) {
return d.x2 * scale + fleft + Math.random() * randScale;
})
.attr("y1", function (d, j) {
return d.y1 * scale + ftop + Math.random() * randScale;
})
.attr("y2", function (d, j) {
return d.y2 * scale + ftop + Math.random() * randScale;
});
};
var multiBonesFcn = function(j) {
c = j;
// if it is the first time this function is called, it should append the g element
if (j._exit === undefined) {
c = j.append('g')
.attr('class','bone-positions')
.attr("opacity", function (d,i, k) {
return 0.1 + 0.3 * i/5;
})
.selectAll('line.bone-line')
.data(function(d,i) {
return d;
})
.enter();
} else {
c = c.selectAll('line.bone-line')
.data(function(d,i) {
return d;
});
}
lineBoneFcn(c);
};
var anim = function () {
if (fig._dataReady) {
if (startTime === 0)
startTime = Date.now();
animFrame = Math.floor((Date.now() - startTime)/1000 / fig.tracks[0].parserObject.frameTime);
animFrame = Math.max(1, animFrame);
if (animFrame >= fig.tracks[0].parserObject.frameCount) {
startTime=Date.now();
animFrame = 1;
}
fig.updateDraw(multiBonesFcn, 'bone-positions', [animFrame,animFrame+traillength], 1);
animFrame++;
}
// window.requestAnimationFrame(anim);
};
var dataLoaded = function() {
if (window.parent && window.parent.loaded)
window.parent.loaded();
// Let's first let go of the stuff we don't want to keep in mem
fig.tracks[0].data['joint-positions'] = [];
fig.tracks[0].data['joint-rotations'] = [];
// Now let's remove the bones that are too short to be drawn.
// Otherwise a lot of extra DOM has to be created
fig.tracks[0].data['bone-positions'] = fig.tracks[0].data['bone-positions'].map(function(d,j){
return d.filter(function(p,i) {
return (CMUDeletedBones.indexOf(i) == -1);
});
});
// Now add let the Mova know that we have a drawing function that uses bone-positions
fig.addDrawMethod(multiBonesFcn, // the function to call drawing elements
'bone-positions', // use bone positons
[1,1+traillength], // use this subset of frames
1); // use every 1 frame
window.setInterval(anim,fig.tracks[0].parserObject.frameTime*1000);
// anim();
};
function run() {
fig = MovaViz('Sketchy')
.debug(true) // print out the debug messages
.data('https://www.sfu.ca/~oalemi/data/05/05_07.bvh','bvh', dataLoaded)
.container(svg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment