Projective transformation matrix - Revision history

A WASSERMANN at 10:19, 22 July 2020

2020-07-22T10:19:59Z

← Older revision		Revision as of 10:19, 22 July 2020
Line 8:		Line 8:
	// Compute a projective transformation which maps the polygon p1 to the polygon p2.		// Compute a projective transformation which maps the polygon p1 to the polygon p2.
	var p1 = board.create('polygon', [[-5,0], [0,0], [0,7], [-5,7]], {fillColor: 'yellow'});		var p1 = board.create('polygon', [[-5,0], [0,0], [0,7], [-5,7]], {fillColor: 'yellow'});
	var p2 = board.create('polygon', [[2,-3], [7,-4], [5,3], [4,4]], {fillColor: 'yellow'~~, visible: false~~});		var p2 = board.create('polygon', [[2,-3], [7,-4], [5,3], [4,4]], {fillColor: 'yellow'});

	// Two global variables containing the transformation matrix (in vector and in matrix form)		// Two global variables containing the transformation matrix (in vector and in matrix form)

A WASSERMANN at 10:19, 22 July 2020

2020-07-22T10:19:41Z

@@ Line 53: / Line 53: @@
+         }
-         //try {
+         // Output of the transformation matrix
-            var txt = '';
+        var txt = '';
-            for (i = 0; i < 3; i++) {
+        for (i = 0; i < 3; i++) {
-                txt += '<tr><td>' + mat_global[i].join('</td><td>') + '</td></tr>\n';
+            txt += '<tr><td>' + mat_global[i].join('</td><td>') + '</td></tr>\n';
+        }
-            document.getElementById('jxg_output').innerHTML = txt;
+        document.getElementById('jxg_output').innerHTML = txt;
      };
@@ Line 85: / Line 82: @@
 ===The underlying JavaScript code===
 <source lang="javascript">
 </source>
 [[Category:Examples]]
 [[Category:Geometry]]

A WASSERMANN at 10:17, 22 July 2020

2020-07-22T10:17:58Z

← Older revision		Revision as of 10:17, 22 July 2020
Line 1:		Line 1:
	<html>		<html>
	<h1 id="jxg_output"></h1>		<table id="jxg_output"></table>
	</html>		</html>

Line 56:		Line 56:
	var txt = '';		var txt = '';
	for (i = 0; i < 3; i++) {		for (i = 0; i < 3; i++) {
	txt += mat_global[i].join(' ') + '<br>\n';		txt += '<tr><td>' + mat_global[i].join('</td><td>') + '</td></tr>\n';
	}		}
	document.getElementById('jxg_output').innerHTML = txt;		document.getElementById('jxg_output').innerHTML = txt;

A WASSERMANN at 10:16, 22 July 2020

2020-07-22T10:16:44Z

← Older revision		Revision as of 10:16, 22 July 2020
Line 1:		Line 1:
	<html>		<html>
	<~~pre~~ id="jxg_output~~" cols="50" rows="20~~"></~~pre~~>		<h1 id="jxg_output"></h1>
	</html>		</html>

Line 56:		Line 56:
	var txt = '';		var txt = '';
	for (i = 0; i < 3; i++) {		for (i = 0; i < 3; i++) {
	txt += mat_global[i].join(' ') + '\n';		txt += mat_global[i].join(' ') + '<br>\n';
	}		}
	document.getElementById('jxg_output').~~value~~ = txt;		document.getElementById('jxg_output').innerHTML = txt;
			console.log(txt);
	//} catch (err) {};		//} catch (err) {};

A WASSERMANN at 10:15, 22 July 2020

2020-07-22T10:15:17Z

← Older revision		Revision as of 10:15, 22 July 2020
Line 53:		Line 53:
	}		}

	try {		//try {
	var txt = '';		var txt = '';
	for (i = 0; i < 3; i++) {		for (i = 0; i < 3; i++) {
Line 59:		Line 59:
	}		}
	document.getElementById('jxg_output').value = txt;		document.getElementById('jxg_output').value = txt;
	} catch (err) {};		//} catch (err) {};

	};		};

A WASSERMANN at 10:14, 22 July 2020

2020-07-22T10:14:53Z

← Older revision		Revision as of 10:14, 22 July 2020
Line 1:		Line 1:
			<html>
			<pre id="jxg_output" cols="50" rows="20"></pre>
			</html>

	<jsxgraph width="600" height="600">		<jsxgraph width="600" height="600">
	var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 10, 10, -10]});		var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 10, 10, -10]});
Line 77:		Line 81:
	}		}
	</jsxgraph>		</jsxgraph>
	~~<html>~~
	~~<pre id="jxg_output" cols="50" rows="20"></pre>~~
	~~</html>~~

	===The underlying JavaScript code===		===The underlying JavaScript code===

A WASSERMANN at 10:13, 22 July 2020

2020-07-22T10:13:29Z

← Older revision		Revision as of 10:13, 22 July 2020
Line 49:		Line 49:
	}		}

	var txt = '';		try {
	for (i = 0; i < 3; i++) {		var txt = '';
	txt += mat_global[i].join(' ') + '\n';		for (i = 0; i < 3; i++) {
	}		txt += mat_global[i].join(' ') + '\n';
	document.getElementById('jxg_output').value = txt;		}
			document.getElementById('jxg_output').value = txt;
			} catch (err) {};

	};		};

A WASSERMANN at 10:12, 22 July 2020

2020-07-22T10:12:10Z

← Older revision		Revision as of 10:12, 22 July 2020
Line 45:		Line 45:
	for (i = 0; i < 3; i++) {		for (i = 0; i < 3; i++) {
	for (j = 0; j < 3; j++) {		for (j = 0; j < 3; j++) {
	mat_global[i][j] = x_global[i * 3 + j];		mat_global[i][j] = x_global[i * 3 + j].toFixed(3);
	}		}
	}		}

	/*		var txt = '';
	for (i = 0; i < 13; i++) {		for (i = 0; i < 3; i++) {
	~~console.log(M~~[i].join(' '));		txt += mat_global[i].join(' ') + '\n';
	}		}
	~~console~~.~~log~~(~~"solution", x_global~~);		document.getElementById('jxg_output').value = txt;
	*/
	};		};

Line 75:		Line 75:
	}		}
	</jsxgraph>		</jsxgraph>
			<html>
			<pre id="jxg_output" cols="50" rows="20"></pre>
			</html>

	===The underlying JavaScript code===		===The underlying JavaScript code===

A WASSERMANN: Created page with " var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 10, 10, -10]}); // Compute a projective transformation which maps..."

2020-07-22T10:08:17Z

Created page with "<jsxgraph width="600" height="600"> var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 10, 10, -10]}); // Compute a projective transformation which maps..."

New page

<jsxgraph width="600" height="600">
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 10, 10, -10]});

// Compute a projective transformation which maps the polygon p1 to the polygon p2.
var p1 = board.create('polygon', [[-5,0], [0,0], [0,7], [-5,7]], {fillColor: 'yellow'});
var p2 = board.create('polygon', [[2,-3], [7,-4], [5,3], [4,4]], {fillColor: 'yellow', visible: false});

// Two global variables containing the transformation matrix (in vector and in matrix form)
var x_global = [];
var mat_global = [[0,0,0], [0,0,0], [0,0,0]];

// This function computes the transformation matrix
var updateTransformationMatrix = function() {
var i, j, k, M = [];

// Initialise a 13x13 matrix to zero.
for (i = 0; i < 13; i++) {
M.push([0,0,0,0,0, 0,0,0,0,0, 0,0,0]);
}

// 12 equations and 13 unknowns for the transformation matrix mat_global such that
// mat_global * p1 - p2 * (i, j, k, l)^T = 0
for (i = 0; i < 3; i++) {
for (j = 0; j < 3; j++) {
for (k = 0; k < 4; k++) {
M[i * 4 + k][i * 3 + j] = p1.vertices[k].coords.usrCoords[j];
}
}
}
for (i = 0; i < 3; i++) {
for (k = 0; k < 4; k++) {
M[i * 4 + k][9 + k] = -p2.vertices[k].coords.usrCoords[i];
}
}
// Equation 13: set mat_global[0][0] = 1.
// Remember that in JSXGraph the coordinates are ordered by (z, x, y)
M[12][0] = 1;

// RHS vector
var b = [0,0,0,0,0, 0,0,0,0,0, 0,0,1];
// Solve the system
x_global = JXG.Math.Numerics.Gauss(M, b);

// Convert the solution vector into matrix form
for (i = 0; i < 3; i++) {
for (j = 0; j < 3; j++) {
mat_global[i][j] = x_global[i * 3 + j];
}
}

/*
for (i = 0; i < 13; i++) {
console.log(M[i].join(' '));
}
console.log("solution", x_global);
*/
};

updateTransformationMatrix();

// Functions which return the coordinates of x_global
var x_fcts = [];
for (let i = 0; i < 9; i++) {
x_fcts[i] = () => x_global[i];
}

var transform = board.create('transform', x_fcts, {type: 'generic'});
var p3 = board.create('polygon', [p1, transform]);

// Whenever a point of p1 is dragged, the transfomation matrix will be updated.
for (let i = 0; i < 4; i++) {
p1.vertices[i].on('drag', function() {
updateTransformationMatrix();
});
}
</jsxgraph>

===The underlying JavaScript code===
<source lang="javascript">
</source>

[[Category:Examples]]
[[Category:Geometry]]