Skip to content

Commit

Permalink
A minimally working API
Browse files Browse the repository at this point in the history
  • Loading branch information
@omimo
omimo committed Dec 25, 2016
1 parent 8f98fd1 commit ec5ad5a
Show file tree
Hide file tree
Showing 6 changed files with 233 additions and 12 deletions.
10 changes: 6 additions & 4 deletions dist/MovaViz.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,8 +190,7 @@ var MovaViz =
else if (dm.frames.length == 1) {
console.log('222');
data = data[dm.frames[0]];
selector = self.svgContainer
.append('g')
selector = self.svgContainer.append('g')
.attr('class', 'g-' + dm.dataType)
.selectAll('.' + dm.dataType)
.data(data)
Expand All @@ -203,7 +202,9 @@ var MovaViz =
data = data.filter(function (d, i) {
return i >= dm.frames[0] && i < dm.frames[1] && (i % dm.frameSkip == 0);
});
selector = self.svgContainer.selectAll("g.dataframe")
selector = self.svgContainer.append('g')
.attr('class', 'g-' + dm.dataType)
.selectAll('.' + dm.dataType)
.data(data)
.enter();
dm.fn(selector);
Expand Down Expand Up @@ -275,7 +276,8 @@ var MovaViz =
data = data.filter(function (d, i) {
return i >= frames[0] && i < frames[1] && (i % frameSkip == 0);
});
selector = self.svgContainer.selectAll("g.dataframe")
selector = self.svgContainer.selectAll('g.g-' + dataType)
.selectAll('.' + dataType)
.data(data);
drawFn(selector);
}
Expand Down
2 changes: 1 addition & 1 deletion dist/MovaViz.js.map
View file

Large diffs are not rendered by default.

7 changes: 4 additions & 3 deletions examples/test3.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
var svg = parent.append("svg")
.attr("width", 1500)
.attr("height", 500);
var scale = 2;
var scale = 1;
var gap = 50;
var animFrame = 700;
var startTime = 0;
Expand Down Expand Up @@ -70,7 +70,7 @@
if (startTime==0)
startTime = Date.now();
animFrame = Math.floor((Date.now() - startTime)/1000 / fig.tracks[0].data.frameTime);
animFrame = Math.floor((Date.now() - startTime)/1000 / fr);
// animFrame = Math.floor((Date.now() - startTime)/1000 / fr);

if (animFrame > fig.tracks[0].data.frameCount) {
startTime=Date.now();
Expand All @@ -86,8 +86,9 @@

var fig = MovaViz('FirstOne')
.debug(true)
.data('http://www.sfu.ca/~oalemi/data/Slash_x4_0001KAREN.bvh','bvh', anim)
// .data('http://www.sfu.ca/~oalemi/data/Slash_x4_0001KAREN.bvh','bvh', anim)
// .data('http://www.sfu.ca/~oalemi/data/Gemma_sync.bvh','bvh', anim)
.data('http://www.sfu.ca/~oalemi/data/2015-11-27_12-07-39-anotnio-improv-fl.bvh','bvh', anim)
.container(svg);


Expand Down
105 changes: 105 additions & 0 deletions examples/test4.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<html>
<head>
<script src="../dist/MovaViz.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
<div id="cont">
</div>

<script>
var parent = d3.select("body").select("#cont");

var svg = parent.append("svg")
.attr("width", 1500)
.attr("height", 800);
var scale = 4;
var gap = 50;
var animFrame = 700;
var startTime = 0;
var fr = 1/120;

var circleJointEnterFcn = function(j) {
c = j;

if (j._exit === undefined)
c = j.append('circle').attr('class','joint-positions');

c.attr("cx", function (d) {
return d.x * scale + 300;
})
.attr("cy", function (d) {
return d.y * scale + 400;
})
.attr("r", function (d, i) {
return 6;
})
.attr("fill", function (d, i) {
return '#665566';
})
.attr("opacity", 0.6);
};

var boneFunction = function(d, k) {
bf = d3.line()
.x(function(d) { return d.x1 * scale + 300; })
.y(function(d) { return d.y1 * scale + 400; })
.curve(d3.curveBasis);
return (bf(d));
};

lineBoneAddFcn = function(j) {
c = j;

if (j._exit === undefined) {
c = j.append("path")
.attr("class","bone-positions")
.attr("stroke", "#666666")
.attr("stroke-opacity", .9)
.attr("stroke-width", 1)
.attr("fill", "transparent");
}


c.attr("d", function(d,i) {
return boneFunction(d)
})
}


var anim = function () {
if (startTime==0)
startTime = Date.now();

animFrame = Math.floor((Date.now() - startTime)/1000 / fig.tracks[0].data.frameTime);

if (animFrame >= fig.tracks[0].data.frameCount) {
startTime=Date.now();
animFrame = 0;
}

fig.updateDraw(lineBoneAddFcn, 'bone-positions', [animFrame,animFrame+1]);
fig.updateDraw(circleJointEnterFcn, 'joint-positions', [animFrame]);
animFrame++;

window.requestAnimationFrame(anim);
}

var fig = MovaViz('FirstOne')
.debug(true)
.data('http://www.sfu.ca/~oalemi/data/MS2_8Walk_M_nopos.bvh','bvh', anim)
// .data('http://www.sfu.ca/~oalemi/data/Gemma_sync.bvh','bvh', anim)
// .data('http://www.sfu.ca/~oalemi/data/2015-11-27_12-07-39-anotnio-improv-fl.bvh','bvh', anim)
.container(svg);


fig.addDrawMethod(circleJointEnterFcn, 'joint-positions', [0]);
fig.addDrawMethod(lineBoneAddFcn, 'bone-positions', [0,1]);




</script>
</body>
</html>
111 changes: 111 additions & 0 deletions examples/test5.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<html>
<head>
<script src="../dist/MovaViz.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
<div id="cont">
</div>

<script>
var parent = d3.select("body").select("#cont");

var svg = parent.append("svg")
.attr("width", 1500)
.attr("height", 800);
var scale = 4;
var gap = 50;
var animFrame = 700;
var startTime = 0;
var fr = 1/120;
var randScale = 100;

var circleJointEnterFcn = function(j) {
c = j;

if (j._exit === undefined)
c = j.append('circle').attr('class','joint-positions');

c.attr("cx", function (d) {
return d.x * scale + 300 + Math.random() * randScale;
})
.attr("cy", function (d) {
return d.y * scale + 400 + Math.random() * randScale;
})
.attr("r", function (d, i) {
return 6;
})
.attr("fill", function (d, i) {
return '#665566';
})
.attr("opacity", 0.6);
};

var boneFunction = function(d, k) {
bf = d3.line()
.x(function(d) { return d.x1 * scale + 300 + Math.random() * randScale;; })
.y(function(d) { return d.y1 * scale + 400 + Math.random() * randScale;; })
.curve(d3.curveBasis);
return (bf(d));
};

lineBoneAddFcn = function(j) {
c = j;

if (j._exit === undefined) {
c = j.append("path")
.attr("class","bone-positions")
.attr("stroke", "#666666")
.attr("stroke-opacity", .9)
.attr("stroke-width", 1)
.attr("fill", "transparent");
}


c.attr("d", function(d,i) {
return boneFunction(d)
})
}


var anim = function () {
if (startTime==0)
startTime = Date.now();

randScale -= 0.1;

if (randScale < 0)
randScale = 0;

animFrame = Math.floor((Date.now() - startTime)/1000 / fig.tracks[0].data.frameTime);

if (animFrame >= fig.tracks[0].data.frameCount) {
startTime=Date.now();
animFrame = 0;
}

fig.updateDraw(lineBoneAddFcn, 'bone-positions', [animFrame,animFrame+1]);
fig.updateDraw(circleJointEnterFcn, 'joint-positions', [animFrame]);
animFrame++;

window.requestAnimationFrame(anim);
}

var fig = MovaViz('FirstOne')
.debug(true)
.data('http://www.sfu.ca/~oalemi/data/MS2_8Walk_M_nopos.bvh','bvh', anim)
// .data('http://www.sfu.ca/~oalemi/data/Gemma_sync.bvh','bvh', anim)
// .data('http://www.sfu.ca/~oalemi/data/2015-11-27_12-07-39-anotnio-improv-fl.bvh','bvh', anim)
.container(svg);


fig.addDrawMethod(circleJointEnterFcn, 'joint-positions', [0]);
fig.addDrawMethod(lineBoneAddFcn, 'bone-positions', [200,201]);




</script>
</body>
</html>
10 changes: 6 additions & 4 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,8 +156,7 @@ export default class MovaViz {
} else if (dm.frames.length == 1) {
console.log('222');
data = data[dm.frames[0]];
selector = self.svgContainer
.append('g')
selector = self.svgContainer.append('g')
.attr('class', 'g-'+dm.dataType)
.selectAll('.'+dm.dataType)
.data(data)
Expand All @@ -169,7 +168,9 @@ export default class MovaViz {
data = data.filter(function(d: number, i:number){
return i>=dm.frames[0] && i<dm.frames[1] && (i % dm.frameSkip == 0);
});
selector = self.svgContainer.selectAll("g.dataframe")
selector = self.svgContainer.append('g')
.attr('class', 'g-'+dm.dataType)
.selectAll('.'+dm.dataType)
.data(data)
.enter();

Expand Down Expand Up @@ -253,7 +254,8 @@ export default class MovaViz {
data = data.filter(function(d: number, i:number){
return i>=frames[0] && i<frames[1] && (i % frameSkip == 0);
});
selector = self.svgContainer.selectAll("g.dataframe")
selector = self.svgContainer.selectAll('g.g-'+dataType)
.selectAll('.'+dataType)
.data(data);

drawFn(selector);
Expand Down

0 comments on commit ec5ad5a

Please sign in to comment.