-
Notifications
You must be signed in to change notification settings - Fork 9
/
recorder-visualizer.html
43 lines (39 loc) · 1.09 KB
/
recorder-visualizer.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!doctype html>
<meta charset="utf-8">
<canvas id="visualizer" width=200 height=200></canvas>
<script src="js/lib/d3.v3.js"></script>
<script>
d3.json("data/gestures/frolic-1.json", function(error, data) {
if (error) {
alert(error.statusText);
return
}
window.data = data;
var last = data.length-1;
var i = 0;
var duration = (data[last].timestamp - data[0].timestamp)/1000;
var step = duration/data.length;
function run() {
if (i == last) return;
renderPointables(data[i]);
i++;
setTimeout(run, step);
};
run();
});
var canvas = document.getElementById("visualizer");
var ctx = canvas.getContext("2d");
var x = d3.scale.linear().range([0,canvas.width]).domain([-200,200]);
var y = d3.scale.linear().range([canvas.height,0]).domain([0,400]);
function renderPointables(obj) {
ctx.fillStyle = "rgba(255,255,255,0.4)";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = "#111";
if ("pointables" in obj) {
obj.pointables.forEach(function(p) {
var pos = p.tipPosition;
ctx.fillRect(x(pos[0]), y(pos[1]), 3, 3);
});
}
};
</script>