d3-mocap-demo/guide2.html at master · omimo/d3-mocap-demo · GitHub

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!--
    (c) Omid Alemi - 2016
    More info at: http://omid.al/posts/2016-08-23-MocapVis-D3.html
-->
<html>
    <head>
        <title>
            Visualizing Motion Capture Data with D3.js
        </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>
    </head>
    <body>
        <div id="container">

        </div>

        <script>
            // Variables
            var skeleton; // Storing the skeleton data
            var positions;  // Storing the joint positions
            var positions_scaled;  // Storing the scaled joint positions
            var figureScale = 2;  // The scaling factor for our visualizations
            var h = 200;  // The height of the visualization
            var w = 3000;  // The width of the visualization
            var gap = 20;
            var skip = 20;

            function draw() {
                var parent = d3.select("body").select("#container");

                var svg = parent.append("svg")
                    .attr("width", w)
                    .attr("height", h)
                    .attr("overflow","scroll")
                    .style("display","inline-block");

                // Scale the data
                positions_scaled = positions.map(function(f, j) {
                    return f.map(function(d, i) {
                    return {
                        x: (d.x + 50) * figureScale,
                        y: -1 * d.y * figureScale + h - 10,
                        z: d.z * figureScale
                    };
                    });
                });

                headJoint = 7;

                // Joints
               svg.selectAll("g")
                    .data(positions_scaled.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(positions_scaled.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 positions_scaled[k * skip][d[0]].x;
                    })
                    .attr("x2", function(d, j, k) {
                    return positions_scaled[k * skip][d[1]].x;
                    })
                    .attr("y1", function(d, j, k) {
                    return positions_scaled[k * skip][d[0]].y;
                    })
                    .attr("y2", function(d, j, k) {
                    return positions_scaled[k * skip][d[1]].y;
                    });

            }

            // Read the files
            $.getJSON("Skeleton_BEA.json", function(json1) {
                skeleton = json1;
                $.getJSON("BEA1.json", function(json2) {
                    positions = json2;
                    draw();
                });
            });
        </script>
    </body>
</html>