Hi Coders:
I try to trigger events when the camera identifies specific colors in the environment To listen to them from the doom and perform actions on an entity.
is some difficult, some like this:
//var ct = tracking.ColorTracker
tracking.ColorTracker.registerColor('green', function(r, g, b) {
if (r == 0 && g == 250 && b == 0) {
...fire ('event');
}
return false;
});
This is the full code now
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tracking.js - draw something</title>
<link rel="stylesheet" href="assets/demo.css">
<script src="../build/tracking.js"></script>
<script src="assets/splines.min.js"></script>
<script src="assets/stats.min.js"></script>
<style>
#canvas,
#video {
height: 300px;
position: absolute;
width: 400px;
padding-top: 66px;
}
.draw-frame
{
background: url(assets/draw_frame.png);
width: 400px;
height: 414px;
border: 1px solid #ccc;
top: 50%;
left: 50%;
position: absolute;
margin: -207px 0 0 -200px;
}
canvas, video {
-moz-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
filter: FlipH;
transform: scale(-1, 1);
}
</style>
</head>
<body>
<div class="demo-title">
<p><a href="http://trackingjs.com" target="_parent">tracking.js</a>
- use magenta color to draw and cyan to erase</p>
</div>
<div class="demo-frame">
<div class="demo-container">
<div class="draw-frame">
<video id="video" width="400" height="300" preload autoplay loop muted></video>
<canvas id="canvas" width="400" height="300"></canvas>
</div>
</div>
</div>
<script>
window.onload = function() {
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var drawSegments = [[]];
var segment = 0;
var tracker = new tracking.ColorTracker(['magenta', 'cyan']);
tracking.track('#video', tracker, { camera: true });
tracker.on('track', function(event)
{
if (event.data.length === 0 && drawSegments[segment].length > 0) {
segment++;
if (!drawSegments[segment]) {
drawSegments[segment] = [];
}
}
event.data.forEach(function(rect) {
if (rect.color === 'magenta') {
draw(rect);
}
else if (rect.color === 'cyan') {
erase(rect);
}
});
});
function draw(rect) {
drawSegments[segment].push(rect.x + rect.width / 2, rect.y + rect.height / 2);
}
function erase(rect) {
context.clearRect(rect.x, rect.y, rect.width, rect.height);
}
function isInsideRect(x, y, rect) {
return rect.x <= x && x <= rect.x + rect.width &&
rect.y <= y && y <= rect.y + rect.height;
}
(function loop() {
for (var i = 0, len = drawSegments.length; i < len; i++) {
drawSpline(context, drawSegments[i], 0.5, false);
}
drawSegments = [drawSegments[drawSegments.length - 1]];
segment = 0;
requestAnimationFrame(loop);
}());
};
</script>
</body>
</html>