Skip to content

Commit db60392

Browse files
eduardolundgreneduardolundgren
committed
Support multiple markers
1 parent 0965123 commit db60392

5 files changed

Lines changed: 181 additions & 261 deletions

File tree

‎examples/move_plot.html‎

Lines changed: 14 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@
55
<title></title>
66

77
<script type="text/javascript" src="../src/tracking.js"></script>
8+
<script type="text/javascript" src="../src/tracker/color.js"></script>
89
<script type="text/javascript" src="js/splines.js"></script>
910

1011
<style type="text/css">
1112
#videoContainer {
1213
display: none;
1314
}
1415

15-
.flip-horizontally {
16+
canvas {
1617
-moz-transform: scale(-1, 1);
1718
-o-transform: scale(-1, 1);
1819
-webkit-transform: scale(-1, 1);
@@ -29,125 +30,23 @@
2930
<br/>
3031

3132
<script>
32-
var videoCamera = new tracking.VideoCamera({
33-
audio: true
34-
}),
33+
var videoCamera = new tracking.VideoCamera().render('#videoContainer');
3534

36-
canvas = videoCamera.canvas,
37-
canvasContext = canvas.context;
35+
videoCamera.renderVideoCanvas('#canvasContainer');
3836

39-
canvas.domElement.classList.add('flip-horizontally');
37+
var plotCanvas = new tracking.Canvas().render(),
38+
drawPoints = [];
4039

41-
videoCamera.render('#videoContainer');
42-
videoCamera.renderVideoCanvas('#canvasContainer');
43-
44-
var plotCanvas = new tracking.Canvas(),
45-
drawPoints = [];
46-
47-
plotCanvas.domElement.classList.add('flip-horizontally');
48-
plotCanvas.render();
49-
50-
var threshold = 50;
51-
52-
function render() {
53-
var imageData = videoCamera.getVideoCanvasImageData(),
54-
cpx,
55-
cpy,
56-
cpz,
57-
distance,
58-
dx = 0,
59-
dy = 0,
60-
m,
61-
maxx = -1,
62-
maxy = -1,
63-
minx = Infinity,
64-
miny = Infinity,
65-
n,
66-
pixels = [],
67-
total,
68-
totalInliers = 0,
69-
x,
70-
y,
71-
diff1,
72-
diff2;
73-
74-
canvas.forEach(imageData, function(r, g, b, a, w, i, j) {
75-
diff1 = r - g;
76-
diff2 = b - g;
77-
78-
if (diff1 >= threshold && diff2 >= threshold) {
79-
pixels.push(j, i);
80-
}
81-
});
82-
83-
total = pixels.length;
84-
85-
if (total < 30) {
86-
drawPoints = [];
87-
return;
88-
}
89-
90-
// Flag outliers
91-
for (m = 0; m < total; m+=2) {
92-
distance = 0;
93-
94-
for (n = 2; n < total; n+=2) {
95-
distance += tracking.math.distance(pixels[m], pixels[m+1], pixels[n], pixels[n+1]);
96-
}
97-
98-
if (distance/total > 20) {
99-
pixels[m] = -1;
100-
pixels[m+1] = -1;
101-
}
40+
videoCamera.track(
41+
{
42+
type: 'color',
43+
color: 'cyan',
44+
callback: function(tracking) {
45+
drawPoints.push(tracking.x, tracking.y);
46+
drawSpline(videoCamera.canvas.context, drawPoints, 0.5, false);
10247
}
103-
104-
for (m = 0; m < total; m+=2) {
105-
x = pixels[m];
106-
y = pixels[m+1];
107-
108-
if (x > -1 && y > -1) {
109-
dx += x;
110-
dy += y;
111-
totalInliers++;
112-
113-
if (x < minx) {
114-
minx = x;
115-
}
116-
117-
if (x > maxx) {
118-
maxx = x;
119-
}
120-
121-
if (y < miny) {
122-
miny = y;
123-
}
124-
125-
if (y > maxy) {
126-
maxy = y;
127-
}
128-
129-
canvasContext.fillStyle = "rgb(255,0,0)";
130-
canvasContext.fillRect (x, y, 3, 3);
131-
}
132-
}
133-
134-
cpy = dy/totalInliers;
135-
cpx = dx/totalInliers;
136-
cpz = 60 - ((maxx - minx) + (maxy - miny))/2;
137-
138-
// plotCanvas.context.fillStyle = "rgb(0, 0,0)";
139-
// plotCanvas.context.fillRect (cpx, cpy, 3, 3);
140-
drawPoints.push(cpx, cpy);
141-
// plotCanvas.context.clearRect(0,0,320,240);
142-
drawSpline(canvasContext,drawPoints,0.5,false);
14348
}
144-
145-
146-
147-
(function loop() {
148-
requestAnimationFrame(loop);
149-
render();
150-
}());
49+
);
15150
</script>
15251

15352
</body>

‎examples/move_using_api.html‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -41,33 +41,34 @@
4141
videoCamera.render('#videoContainer');
4242
videoCamera.renderVideoCanvas('#canvasContainer');
4343

44-
var t1 = videoCamera.track({
45-
type: tracking.type.COLOR,
46-
color: 'magenta',
44+
var t1 = videoCamera.track(
45+
{
46+
type: 'color',
47+
color: 'magenta',
48+
callback: function(tracking) {
49+
console.log('magenta', tracking.x, tracking.y, tracking.z);
50+
51+
var size = 60 - tracking.z;
52+
53+
canvasContext.strokeStyle = "rgb(255,0,255)";
54+
canvasContext.lineWidth = 3;
55+
canvasContext.strokeRect(tracking.x - size*0.5, tracking.y - size*0.5, size, size);
56+
}
57+
});
58+
59+
var t2 = videoCamera.track({
60+
type: 'color',
61+
color: 'cyan',
4762
callback: function(tracking) {
48-
console.log('magenta', tracking.x, tracking.y, tracking.z);
63+
console.log('cyan', tracking.x, tracking.y, tracking.z);
4964

5065
var size = 60 - tracking.z;
5166

52-
canvasContext.strokeStyle = "rgb(255,0,255)";
67+
canvasContext.strokeStyle = "rgb(0,255,255)";
5368
canvasContext.lineWidth = 3;
5469
canvasContext.strokeRect(tracking.x - size*0.5, tracking.y - size*0.5, size, size);
5570
}
5671
});
57-
58-
// var t2 = videoCamera.track({
59-
// type: tracking.type.COLOR,
60-
// color: 'cyan',
61-
// callback: function(tracking) {
62-
// console.log('cyan', tracking.x, tracking.y, tracking.z);
63-
64-
// var size = 60 - tracking.z;
65-
66-
// canvasContext.strokeStyle = "rgb(0,255,255)";
67-
// canvasContext.lineWidth = 3;
68-
// canvasContext.strokeRect(tracking.x - size*0.5, tracking.y - size*0.5, size, size);
69-
// }
70-
// });
7172
</script>
7273

7374
</body>

‎examples/videocamera_snapshot.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
var picture = tracking.one('#picture');
2525
picture.width = c1.get('width');
2626
picture.height = c1.get('height');
27-
picture.src = c1.toDataURL('image/png');
27+
picture.src = c1.toDataURL();
2828
};
2929
</script>
3030

0 commit comments

Comments
 (0)