Skip to content

Commit 55b67bb

Browse files
zenorochazenorocha
committed
uniforming demo's source code
1 parent 03fe156 commit 55b67bb

8 files changed

Lines changed: 686 additions & 685 deletions

‎examples/canvas_splines.html‎

Lines changed: 267 additions & 265 deletions
Large diffs are not rendered by default.

‎examples/move_controller_multiple.html‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<!doctype html>
2-
32
<html>
43
<head>
5-
<title></title>
4+
5+
<title>tracking.js - multiple controllers</title>
66

77
<meta charset="utf-8">
88

9-
<script type="text/javascript" src="../src/tracking.js"></script>
10-
<script type="text/javascript" src="../src/tracker/color.js"></script>
9+
<script src="../src/tracking.js"></script>
10+
<script src="../src/tracker/color.js"></script>
1111

12-
<style type="text/css">
12+
<style>
1313
* {
1414
margin: 0;
1515
padding: 0;
@@ -22,6 +22,7 @@
2222
transform: scale(-1, 1);
2323
}
2424
</style>
25+
2526
</head>
2627
<body>
2728

‎examples/move_controller_single_pixels.html‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<!doctype html>
2-
32
<html>
43
<head>
5-
<title></title>
4+
5+
<title>tracking.js - single controller</title>
66

77
<meta charset="utf-8">
88

9-
<script type="text/javascript" src="../src/tracking.js"></script>
10-
<script type="text/javascript" src="../src/tracker/color.js"></script>
9+
<script src="../src/tracking.js"></script>
10+
<script src="../src/tracker/color.js"></script>
1111

12-
<style type="text/css">
12+
<style>
1313
* {
1414
margin: 0;
1515
padding: 0;
@@ -22,32 +22,33 @@
2222
transform: scale(-1, 1);
2323
}
2424
</style>
25+
2526
</head>
2627
<body>
2728

28-
<script>
29-
var videoCamera = new tracking.VideoCamera().hide().render().renderVideoCanvas();
30-
31-
var t1 = videoCamera.track(
32-
{
33-
type: 'color',
34-
color: 'magenta',
35-
onFound: function(track) {
36-
var pixels = track.pixels;
37-
38-
for (var i = 0, len = pixels.length; i < len; i += 2) {
39-
videoCamera.canvas.context.fillStyle = "rgb(255,0,255)";
40-
videoCamera.canvas.context.fillRect(pixels[i], pixels[i+1], 2, 2);
29+
<script>
30+
var videoCamera = new tracking.VideoCamera().hide().render().renderVideoCanvas();
31+
32+
var t1 = videoCamera.track(
33+
{
34+
type: 'color',
35+
color: 'magenta',
36+
onFound: function(track) {
37+
var pixels = track.pixels;
38+
39+
for (var i = 0, len = pixels.length; i < len; i += 2) {
40+
videoCamera.canvas.context.fillStyle = "rgb(255,0,255)";
41+
videoCamera.canvas.context.fillRect(pixels[i], pixels[i+1], 2, 2);
42+
}
43+
44+
videoCamera.canvas.context.fillStyle = "rgb(0,0,0)";
45+
videoCamera.canvas.context.fillRect(track.x, track.y, 5, 5);
46+
},
47+
onNotFound: function() {
4148
}
42-
43-
videoCamera.canvas.context.fillStyle = "rgb(0,0,0)";
44-
videoCamera.canvas.context.fillRect(track.x, track.y, 5, 5);
45-
},
46-
onNotFound: function() {
4749
}
48-
}
49-
);
50-
</script>
50+
);
51+
</script>
5152

5253
</body>
5354
</html>

‎examples/move_draw_something.html‎

Lines changed: 118 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,127 @@
11
<!doctype html>
2-
32
<html>
43
<head>
5-
<title>Draw Something</title>
6-
7-
<meta charset="utf-8">
8-
9-
<script type="text/javascript" src="../src/tracking.js"></script>
10-
<script type="text/javascript" src="../src/tracker/color.js"></script>
11-
<script type="text/javascript" src="js/splines.js"></script>
12-
13-
<style type="text/css">
14-
canvas {
15-
-moz-transform: scale(-1, 1);
16-
-o-transform: scale(-1, 1);
17-
-webkit-transform: scale(-1, 1);
18-
filter: FlipH;
19-
transform: scale(-1, 1);
20-
position: absolute;
21-
top: 305px;
22-
left: 54px;
23-
}
24-
#iphoneContainer {
25-
width: 425px;
26-
height: 757px;
27-
margin: 0 auto;
28-
position: relative;
29-
background: url(img/iphone.png);
30-
}
31-
#selected {
32-
width: 30px;
33-
height: 30px;
34-
border: 3px solid #000;
35-
border-radius: 7px;
36-
position: absolute;
37-
display: none;
38-
}
39-
#selected.pencil {
40-
bottom: 153px;
41-
display: block;
42-
left: 73px;
43-
}
44-
#selected.erase {
45-
bottom: 153px;
46-
display: block;
47-
left: 128px;
48-
}
49-
</style>
50-
</head>
51-
<body>
524

53-
<div id="iphoneContainer">
54-
<div id="selected"></div>
55-
</div>
56-
57-
<script>
58-
var videoCamera = new tracking.VideoCamera().hide().render().renderVideoCanvas('#iphoneContainer');
59-
60-
var plotCanvas = new tracking.Canvas().render(),
61-
drawSegments = [],
62-
eraseFound = false,
63-
pencilFound = false,
64-
segment = 0,
65-
selectedElement = document.getElementById('selected');
66-
67-
videoCamera.track(
68-
{
69-
type: 'color',
70-
color: 'magenta',
71-
onFound: function(track) {
72-
if (!drawSegments[segment]) {
73-
drawSegments[segment]= [];
74-
}
75-
76-
drawSegments[segment].push(track.x, track.y);
77-
78-
if (!pencilFound) {
79-
selectedElement.className = 'pencil';
80-
}
81-
82-
pencilFound = true;
83-
},
84-
onNotFound: function() {
85-
if (pencilFound) {
86-
segment++;
87-
pencilFound = false;
88-
selectedElement.className = '';
89-
}
5+
<title>tracking.js - draw something</title>
6+
7+
<meta charset="utf-8">
8+
9+
<script src="../src/tracking.js"></script>
10+
<script src="../src/tracker/color.js"></script>
11+
<script src="js/splines.js"></script>
12+
13+
<style>
14+
canvas {
15+
-moz-transform: scale(-1, 1);
16+
-o-transform: scale(-1, 1);
17+
-webkit-transform: scale(-1, 1);
18+
filter: FlipH;
19+
transform: scale(-1, 1);
20+
position: absolute;
21+
top: 305px;
22+
left: 54px;
23+
}
24+
#iphoneContainer {
25+
width: 425px;
26+
height: 757px;
27+
margin: 0 auto;
28+
position: relative;
29+
background: url(img/iphone.png);
9030
}
91-
}
92-
);
93-
94-
videoCamera.track(
95-
{
96-
type: 'color',
97-
color: 'cyan',
98-
onFound: function(track) {
99-
segment = 0;
100-
drawSegments = [];
101-
102-
if (!eraseFound) {
103-
selectedElement.className = 'erase';
104-
}
105-
106-
eraseFound = true;
107-
},
108-
onNotFound: function() {
109-
if (eraseFound) {
110-
eraseFound = false;
111-
selectedElement.className = '';
112-
}
31+
#selected {
32+
width: 30px;
33+
height: 30px;
34+
border: 3px solid #000;
35+
border-radius: 7px;
36+
position: absolute;
37+
display: none;
11338
}
114-
}
115-
);
116-
117-
(function loop() {
118-
for (var i = 0, len = drawSegments.length; i < len; i++) {
119-
drawSpline(videoCamera.canvas.context, drawSegments[i], 0.5, false);
120-
}
121-
requestAnimationFrame(loop);
122-
}());
123-
</script>
39+
#selected.pencil {
40+
bottom: 153px;
41+
display: block;
42+
left: 73px;
43+
}
44+
#selected.erase {
45+
bottom: 153px;
46+
display: block;
47+
left: 128px;
48+
}
49+
</style>
50+
51+
</head>
52+
<body>
53+
54+
<div id="iphoneContainer">
55+
<div id="selected"></div>
56+
</div>
57+
58+
<script>
59+
var videoCamera = new tracking.VideoCamera().hide().render().renderVideoCanvas('#iphoneContainer');
60+
61+
var plotCanvas = new tracking.Canvas().render(),
62+
drawSegments = [],
63+
eraseFound = false,
64+
pencilFound = false,
65+
segment = 0,
66+
selectedElement = document.getElementById('selected');
67+
68+
videoCamera.track(
69+
{
70+
type: 'color',
71+
color: 'magenta',
72+
onFound: function(track) {
73+
if (!drawSegments[segment]) {
74+
drawSegments[segment]= [];
75+
}
76+
77+
drawSegments[segment].push(track.x, track.y);
78+
79+
if (!pencilFound) {
80+
selectedElement.className = 'pencil';
81+
}
82+
83+
pencilFound = true;
84+
},
85+
onNotFound: function() {
86+
if (pencilFound) {
87+
segment++;
88+
pencilFound = false;
89+
selectedElement.className = '';
90+
}
91+
}
92+
}
93+
);
94+
95+
videoCamera.track(
96+
{
97+
type: 'color',
98+
color: 'cyan',
99+
onFound: function(track) {
100+
segment = 0;
101+
drawSegments = [];
102+
103+
if (!eraseFound) {
104+
selectedElement.className = 'erase';
105+
}
106+
107+
eraseFound = true;
108+
},
109+
onNotFound: function() {
110+
if (eraseFound) {
111+
eraseFound = false;
112+
selectedElement.className = '';
113+
}
114+
}
115+
}
116+
);
117+
118+
(function loop() {
119+
for (var i = 0, len = drawSegments.length; i < len; i++) {
120+
drawSpline(videoCamera.canvas.context, drawSegments[i], 0.5, false);
121+
}
122+
requestAnimationFrame(loop);
123+
}());
124+
</script>
124125

125126
</body>
126127
</html>

0 commit comments

Comments
 (0)