tracking
Version:
A modern approach for Computer Vision on the web.
151 lines (120 loc) • 4.39 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>tracking.js - color tracking fish tank</title>
<link rel="stylesheet" href="assets/demo.css">
<script src="../build/tracking-min.js"></script>
<script src="../../threejs/build/three.min.js"></script>
<style>
body {
overflow: hidden;
}
#video, #canvas {
bottom: 0;
position: absolute;
z-index: 100;
}
</style>
</head>
<body>
<div class="demo-title">
<p><a href="http://trackingjs.com" target="_parent">tracking.js</a> － use a magenta colored object to control the scene</p>
</div>
<video id="video" width="320" height="240" preload autoplay loop muted></video>
<canvas id="canvas" width="320" height="240"></canvas>
<script>
var container;
var camera, scene, renderer, group, particle;
var mouseX = 0, mouseY = 0;
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
window.onload = function() {
var tracker = new tracking.ColorTracker();
tracker.setMinDimension(5);
tracker.setMinGroupSize(10);
tracking.track('#video', tracker, { camera: true });
tracker.on('track', onColorMove);
};
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 3000);
camera.position.z = 1000;
scene = new THREE.Scene();
var PI2 = Math.PI * 2;
var program = function (context) {
context.beginPath();
context.arc(0, 0, 0.5, 0, PI2, true);
context.fill();
}
group = new THREE.Object3D();
scene.add(group);
for (var i = 0; i < 1000; i++) {
var material = new THREE.SpriteCanvasMaterial({
color: Math.random() * 0x808008 + 0x808080,
program: program
});
particle = new THREE.Sprite(material);
particle.position.x = Math.random() * 2000 - 1000;
particle.position.y = Math.random() * 2000 - 1000;
particle.position.z = Math.random() * 2000 - 1000;
particle.scale.x = particle.scale.y = Math.random() * 20 + 10;
group.add(particle);
}
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onColorMove(event) {
if (event.data.length === 0) {
return;
}
var maxRect;
var maxRectArea = 0;
event.data.forEach(function(rect) {
if (rect.width * rect.height > maxRectArea){
maxRectArea = rect.width * rect.height;
maxRect = rect;
}
});
if (maxRectArea > 0) {
var rectCenterX = maxRect.x + (maxRect.width/2);
var rectCenterY = maxRect.y + (maxRect.height/2);
mouseX = (rectCenterX - 160) * (window.innerWidth/320) * 10;
mouseY = (rectCenterY - 120) * (window.innerHeight/240) * 10;
context.clearRect(0, 0, canvas.width, canvas.height);
context.strokeStyle = maxRect.color;
context.strokeRect(maxRect.x, maxRect.y, maxRect.width, maxRect.height);
context.font = '11px Helvetica';
context.fillStyle = "#fff";
context.fillText('x: ' + maxRect.x + 'px', maxRect.x + maxRect.width + 5, maxRect.y + 11);
context.fillText('y: ' + maxRect.y + 'px', maxRect.x + maxRect.width + 5, maxRect.y + 22);
}
}
function animate() {
window.requestAnimationFrame(animate);
render();
}
function render() {
camera.position.x += (mouseX - camera.position.x) * 0.05;
camera.position.y += (- mouseY - camera.position.y) * 0.05;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
</script>
</body>
</html>