Seeking to determine the 2D transformation matrix for converting one triangle into another.
The coordinates of both triangles' points are known.
Although I typically utilize Paper.js for manipulating matrices, this particular scenario is outside its scope.
Nevertheless, I have employed it to demonstrate my issue in this
I believe I've come across the theoretical solution here, but implementing it in JavaScript proves challenging due to my limited knowledge in matrix mathematics.
Is there a JavaScript library capable of resolving such problems?
Alternatively, does anyone know how to tackle this in JavaScript?
Below is the code used to illustrate the issue:
// Known input points
const p1A = new Point(0, 0);
const p2A = new Point(25, 0);
const p3A = new Point(0, 15);
// Matrix to be calculated
const matrix = new Matrix();
matrix.translate(40, 0);
matrix.rotate(30);
matrix.scale(1.2, -0.2);
matrix.rotate(-70);
// Transformed points
const p1B = p1A.transform(matrix);
const p2B = p2A.transform(matrix);
const p3B = p3A.transform(matrix);
// Display elements for visual aid
drawPoint(p1A, 'p1A', 'red');
drawPoint(p2A, 'p2A', 'cyan');
drawPoint(p3A, 'p3A', 'lime');
drawPoint(p1B, 'p1B', 'red');
drawPoint(p2B, 'p2B', 'cyan');
drawPoint(p3B, 'p3B', 'lime');
drawPolygon([p1A, p2A, p3A], 'A');
drawPolygon([p1B, p2B, p3B], 'B');
// Fit to view for better visibility
project.activeLayer.fitBounds(view.bounds.scale(0.8));
//
// METHODS
//
function drawPoint(point, name, color) {
new Path.Circle({
center: point,
radius: 1,
fillColor: color
});
new PointText({
content: name,
point: point - [0, 1.5],
justification: 'center',
fontSize: 1
});
}
function drawPolygon(points, name) {
const path = new Path({
segments: points,
strokeColor: 'grey',
closed: true
});
new PointText({
content: name,
point: path.bounds.center,
justification: 'center',
fontSize: 2
});
}