First
This commit is contained in:
Martijn de Boer
commit
5cb9f71e02
8 changed files with 2562 additions and 0 deletions
BIN
img/full.png
Normal file
BIN
img/full.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 MiB |
BIN
img/fullside.png
Normal file
BIN
img/fullside.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 MiB |
BIN
img/overlay.png
Normal file
BIN
img/overlay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
img/source.png
Normal file
BIN
img/source.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 672 KiB |
36
index.html
Normal file
36
index.html
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Tracking</title>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
<script src="tracking.js"></script>
|
||||||
|
<style>
|
||||||
|
img {
|
||||||
|
width: 24%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img,canvas {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body onload="setup();">
|
||||||
|
<button id="start">Start</button>
|
||||||
|
<h1>Sources</h1>
|
||||||
|
<div>
|
||||||
|
<img id="source" src="img/source.png" />
|
||||||
|
<img id="overlay" src="img/overlay.png" />
|
||||||
|
<img id="full" src="img/full.png" />
|
||||||
|
<img id="fullside" src="img/fullside.png" />
|
||||||
|
</div>
|
||||||
|
<h1>Targets</h1>
|
||||||
|
<div>
|
||||||
|
<canvas id="cfull" width="397" height="226"></canvas>
|
||||||
|
<canvas id="cfullside" width="397" height="226"></canvas>
|
||||||
|
</div>
|
||||||
|
<h1>Source canvas</h1>
|
||||||
|
<div>
|
||||||
|
<canvas id="csource" width="684" height="379"></canvas>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
73
script.js
Normal file
73
script.js
Normal file
|
|
@ -0,0 +1,73 @@
|
||||||
|
function setup() {
|
||||||
|
document.getElementById('start').addEventListener( 'click', detectImage );
|
||||||
|
}
|
||||||
|
|
||||||
|
function detectImage( ev ) {
|
||||||
|
if ( ev && ev.preventDefault ) {
|
||||||
|
ev.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
var sourceImage = document.getElementById( 'source' );
|
||||||
|
var sourceCanvas = document.getElementById( 'csource' );
|
||||||
|
var sourceContext = sourceCanvas.getContext( '2d' );
|
||||||
|
sourceContext.drawImage( sourceImage, sourceCanvas.width * 0.25, sourceCanvas.height * 0.25, sourceCanvas.width * 0.5, sourceCanvas.height * 0.5 );
|
||||||
|
|
||||||
|
doImage( 'full' );
|
||||||
|
doImage( 'fullside' );
|
||||||
|
}
|
||||||
|
|
||||||
|
function doImage( name ) {
|
||||||
|
var canvas = document.getElementById( 'c' + name );
|
||||||
|
var context = canvas.getContext( '2d' );
|
||||||
|
var image = document.getElementById( name );
|
||||||
|
|
||||||
|
var sourceCanvas = document.getElementById( 'csource' );
|
||||||
|
var sourceContext = sourceCanvas.getContext( '2d' );
|
||||||
|
|
||||||
|
context.drawImage( image, 0, 0, canvas.width, canvas.height );
|
||||||
|
|
||||||
|
var imageDataTarget = context.getImageData( 0, 0, canvas.width, canvas.height );
|
||||||
|
var imageDataSource = sourceContext.getImageData( 0, 0, sourceCanvas.width, sourceCanvas.height );
|
||||||
|
|
||||||
|
var grayTarget = tracking.Image.grayscale(
|
||||||
|
tracking.Image.blur( imageDataTarget.data, canvas.width, canvas.height, 3 ),
|
||||||
|
canvas.width, canvas.height
|
||||||
|
);
|
||||||
|
|
||||||
|
var graySource = tracking.Image.grayscale(
|
||||||
|
tracking.Image.blur( imageDataSource.data, sourceCanvas.width, sourceCanvas.height, 3 ),
|
||||||
|
sourceCanvas.width, sourceCanvas.height
|
||||||
|
);
|
||||||
|
|
||||||
|
var cornersTarget = tracking.Fast.findCorners( grayTarget, canvas.width, canvas.height );
|
||||||
|
var cornersSource = tracking.Fast.findCorners( graySource, sourceCanvas.width, sourceCanvas.height );
|
||||||
|
|
||||||
|
var descriptorsTarget = tracking.Brief.getDescriptors( grayTarget, canvas.width, cornersTarget );
|
||||||
|
var descriptorsSource = tracking.Brief.getDescriptors( graySource, sourceCanvas.height, cornersSource );
|
||||||
|
|
||||||
|
//var matches = tracking.Brief.reciprocalMatch( cornersSource, descriptorsSource, cornersTarget, descriptorsTarget );
|
||||||
|
var matches = tracking.Brief.reciprocalMatch( cornersTarget, descriptorsTarget, cornersSource, descriptorsSource );
|
||||||
|
|
||||||
|
matches.sort( function(a, b) {
|
||||||
|
return b.confidence - a.confidence
|
||||||
|
});
|
||||||
|
|
||||||
|
for (var i = 0; i < matches.length; i++) {
|
||||||
|
console.log(name,matches[i].confidence);
|
||||||
|
var color = '#' + Math.floor(Math.random()*16777215).toString(16);
|
||||||
|
//var color = '#ff0000';
|
||||||
|
context.fillStyle = color;
|
||||||
|
context.strokeStyle = color;
|
||||||
|
context.fillRect(normalizePoint(matches[i].keypoint1[0]), normalizePoint(matches[i].keypoint1[1]), 4, 4);
|
||||||
|
context.fillRect(normalizePoint(matches[i].keypoint2[0])/* + canvas.width*/, normalizePoint(matches[i].keypoint2[1]), 4, 4);
|
||||||
|
|
||||||
|
context.beginPath();
|
||||||
|
context.moveTo(normalizePoint(matches[i].keypoint1[0]), normalizePoint(matches[i].keypoint1[1]));
|
||||||
|
context.lineTo(normalizePoint(matches[i].keypoint2[0])/* + canvas.width*/, normalizePoint(matches[i].keypoint2[1]));
|
||||||
|
context.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizePoint( x ) {
|
||||||
|
return x;
|
||||||
|
}
|
||||||
8
tracking-min.js
vendored
Executable file
8
tracking-min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
2445
tracking.js
Executable file
2445
tracking.js
Executable file
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue