forked from protonphoton/LJ
Missing files
This commit is contained in:
parent
0cb5d947a6
commit
42f31b2d4a
25 changed files with 5806 additions and 46 deletions
209
www/trckr/modelviewer_pca.html
Normal file
209
www/trckr/modelviewer_pca.html
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>PDM Modelviewer</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
||||
<style>
|
||||
@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);
|
||||
|
||||
body {
|
||||
font-family: 'Lato';
|
||||
background-color: #f0f0f0;
|
||||
margin: 0px auto;
|
||||
max-width: 1150px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight : 400;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../models/model_pca_20_svm.js"></script>
|
||||
<script src="./js/libs/dat.gui.min.js"></script>
|
||||
<h2>Modelviewer</h2>
|
||||
<canvas id="compare" width="600" height="550"></canvas>
|
||||
<p>Load a model from a file:</p>
|
||||
<input type="file" value="load a model" id="loadjs"/>
|
||||
|
||||
<script>
|
||||
function loadjs(file) {
|
||||
var reader = new FileReader();
|
||||
var str;
|
||||
reader.onload = function(theFile) {
|
||||
str = theFile.target.result;
|
||||
debugger;
|
||||
(function() { eval.apply(this, arguments); }(str));
|
||||
rebuild();
|
||||
}
|
||||
reader.onerror = function() {alert("error reading file")};
|
||||
reader.readAsText(file.target.files[0]);
|
||||
}
|
||||
document.getElementById('loadjs').addEventListener('change', loadjs, false);
|
||||
|
||||
function rebuild() {
|
||||
// check how many parameters
|
||||
pnums = pModel.shapeModel.eigenValues.length;
|
||||
|
||||
ph = new parameterHolder();
|
||||
gui.destroy();
|
||||
gui = new dat.GUI();
|
||||
|
||||
control = {};
|
||||
eig = 0;
|
||||
for (var i = 0;i < pnums;i++) {
|
||||
eig = Math.sqrt(pModel.shapeModel.eigenValues[i])*3
|
||||
control['c'+(i+1)] = gui.add(ph, 'component '+(i+1), -eig, eig);
|
||||
}
|
||||
|
||||
for (var i = 0;i < pnums;i++) {
|
||||
control['c'+(i+1)].onChange(drawNew);
|
||||
}
|
||||
|
||||
params = [];
|
||||
for (var i = 0;i < pnums;i++) {
|
||||
params.push(ph['component '+(i+1)]);
|
||||
}
|
||||
|
||||
drawNew();
|
||||
}
|
||||
|
||||
var canvasInput = document.getElementById('compare');
|
||||
var cc = canvasInput.getContext('2d');
|
||||
cc.fillStyle = "rgb(200,0,0)";
|
||||
|
||||
// check how many parameters
|
||||
var pnums = pModel.shapeModel.eigenValues.length;
|
||||
|
||||
var parameterHolder = function() {
|
||||
for (var i = 0;i < pnums;i++) {
|
||||
this['component '+(i+1)] = 0;
|
||||
}
|
||||
};
|
||||
|
||||
var ph = new parameterHolder();
|
||||
var gui = new dat.GUI();
|
||||
|
||||
var control = {};
|
||||
var eig = 0;
|
||||
for (var i = 0;i < pnums;i++) {
|
||||
eig = Math.sqrt(pModel.shapeModel.eigenValues[i])*3
|
||||
control['c'+(i+1)] = gui.add(ph, 'component '+(i+1), -eig, eig);
|
||||
}
|
||||
|
||||
var params;
|
||||
var drawNew = function(value) {
|
||||
cc.clearRect(0,0,600,600);
|
||||
params = [];
|
||||
for (var i = 0;i < pnums;i++) {
|
||||
params.push(ph['component '+(i+1)]);
|
||||
}
|
||||
draw(document.getElementById('compare'), similarityTransforms.concat(params));
|
||||
}
|
||||
|
||||
for (var i = 0;i < pnums;i++) {
|
||||
control['c'+(i+1)].onChange(drawNew);
|
||||
}
|
||||
|
||||
params = [];
|
||||
for (var i = 0;i < pnums;i++) {
|
||||
params.push(ph['component '+(i+1)]);
|
||||
}
|
||||
|
||||
var similarityTransforms = [4,0,0,0];
|
||||
//var similarityTransforms = [1, 0, -250, -450];
|
||||
//var similarityTransforms = [1, 0, 200, 200];
|
||||
var paramslength = params.length;
|
||||
var num_points = pModel.shapeModel.numPtsPerSample;
|
||||
|
||||
var x,y;
|
||||
|
||||
var i, path;
|
||||
|
||||
var drawPath = function(canvasContext, path, dp) {
|
||||
canvasContext.beginPath();
|
||||
var i, x, y;
|
||||
for (var p = 0;p < path.length;p++) {
|
||||
i = path[p]*2;
|
||||
x = pModel.shapeModel.meanShape[i/2][0];
|
||||
y = pModel.shapeModel.meanShape[i/2][1];
|
||||
for (var j = 0;j < pModel.shapeModel.numEvalues;j++) {
|
||||
x += pModel.shapeModel.eigenVectors[i][j]*dp[j+4];
|
||||
y += pModel.shapeModel.eigenVectors[i+1][j]*dp[j+4];
|
||||
}
|
||||
a = dp[0]*x - dp[1]*y + dp[2];
|
||||
b = dp[0]*y + dp[1]*x + dp[3];
|
||||
x += a;
|
||||
y += b;
|
||||
|
||||
if (i == 0) {
|
||||
canvasContext.moveTo(x,y);
|
||||
} else {
|
||||
canvasContext.lineTo(x,y);
|
||||
}
|
||||
}
|
||||
canvasContext.moveTo(0,0);
|
||||
canvasContext.closePath();
|
||||
canvasContext.stroke();
|
||||
}
|
||||
|
||||
function drawPoint(canvasContext, point, dp) {
|
||||
var i, x, y;
|
||||
i = point*2;
|
||||
x = pModel.shapeModel.meanShape[i/2][0];
|
||||
y = pModel.shapeModel.meanShape[i/2][1];
|
||||
for (var j = 0;j < pModel.shapeModel.numEvalues;j++) {
|
||||
x += pModel.shapeModel.eigenVectors[i][j]*dp[j+4];
|
||||
y += pModel.shapeModel.eigenVectors[i+1][j]*dp[j+4];
|
||||
}
|
||||
a = dp[0]*x - dp[1]*y + dp[2];
|
||||
b = dp[0]*y + dp[1]*x + dp[3];
|
||||
x += a;
|
||||
y += b;
|
||||
canvasContext.beginPath();
|
||||
canvasContext.arc(x, y, 2, 0, Math.PI*2, true);
|
||||
canvasContext.closePath();
|
||||
canvasContext.fill();
|
||||
}
|
||||
|
||||
var draw = function(canvas, pv) {
|
||||
// if no previous points, just draw in the middle of canvas
|
||||
|
||||
var params;
|
||||
if (pv === undefined) {
|
||||
params = currentParameters.slice(0);
|
||||
} else {
|
||||
params = pv.slice(0);
|
||||
}
|
||||
|
||||
var cc = canvas.getContext('2d');
|
||||
cc.fillStyle = "rgb(0,0,0)";
|
||||
cc.strokeStyle = "rgb(0,0,0)";
|
||||
//cc.lineWidth = 1;
|
||||
cc.save();
|
||||
|
||||
var paths = pModel.path.normal;
|
||||
for (var i = 0;i < paths.length;i++) {
|
||||
if (typeof(paths[i]) == 'number') {
|
||||
drawPoint(cc, paths[i], params);
|
||||
} else {
|
||||
drawPath(cc, paths[i], params);
|
||||
}
|
||||
}
|
||||
|
||||
cc.restore()
|
||||
}
|
||||
draw(document.getElementById('compare'), similarityTransforms.concat(params))
|
||||
/*
|
||||
var eigenVectors = new goog.math.Matrix(num_points*2, 7);
|
||||
for (var i = 0;i < num_points*2;i++) {
|
||||
for (var j = 0;j < 7;j++) {
|
||||
eigenVectors.setValueAt(i, j, pModel.shapeModel.eVectors[(i*num_points*2)+j]);
|
||||
}
|
||||
}*/
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue