Create a gist now

Instantly share code, notes, and snippets.

@omimo /index.html
Last active Nov 10, 2016

What would you like to do?
A test for mviz
<html>
<head>
<title>
Movement Data Visualization
</title>
<!--<script src="https://d3js.org/d3.v4.min.js"></script>-->
<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;
}
#c1 {
position: relative;
top: calc( 40% - 100px )
}
</style>
</head>
<body>
<div id="c1">
</div>
<script src="sketch.js"></script>
</body>
</html>
title: 'Sketching - Basic - BEA'
description: |
A basic sketching of frames
Applied to a segment of the motion capture data from a mover performing LMA Basic Effort Actions
// Variables
var connectivityMatrix;
var positions;
var figureScale = 2;
var h = 200;
var w = 1200;
var gap = 20;
var skip = 20;
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;
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
};
});
});
currentFrame = frames[index];
// Joints
headJoint = 7;
// Joints
svg.selectAll("g")
.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.joints")
.data(function (d, i) {
return d
})
.enter()
.append("circle")
.attr("fill-opacity", "0.95")
.attr("cx", function (d) {
return d.x;
}).attr("cy", function (d) {
return d.y;
}).attr("r", function (d, i) {
if (i == headJoint)
return 4;
else
return 2;
}).attr("fill", function (d, i) {
return '#555555';
});
// Bones
svg.selectAll("g2")
.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.bones")
.data(skeleton)
.enter()
.append("line")
.attr("stroke-opacity", "0.95")
.attr("stroke", "grey")
.attr("stroke-width", 1)
.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) {
skeleton = json;
$.getJSON("https://omid.al/moveviz/data/BEA1.json", function (json) {
positions = json;
draw();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment