dg.js affine transform - Filip Marić / january, 2016
Try point dragging.
function createArray(length) {
var arr = new Array(length || 0),
i = length;
if (arguments.length > 1) {
var args = Array.prototype.slice.call(arguments, 1);
while(i--) arr[length-1 - i] = createArray.apply(this, args);
}
return arr;
}
var canvas = dg.Canvas("testcanvas", { border: "1px solid #ccc"});
var axes = dg.Axes([canvas.width() / 4, canvas.height() / 1.5]).hide(false);
function affine(A, b, x) {
var y = createArray(2);
y[0] = A[0][0]*x[0] + A[0][1]*x[1] + b[0];
y[1] = A[1][0]*x[0] + A[1][1]*x[1] + b[1];
return y;
}
var N = 4;
var points = createArray(N, N);
for (i = 0; i < N; i++)
for (j = 0; j < N; j++)
points[i][j] = dg.Point([i, j]).label("");
for (i = 0; i < N; i++) {
var s = dg.Segment(points[i][0], points[i][N-1]);
for(var j = 0; j < N; j++)
s.attach(points[i][j]);
}
for (j = 0; j < N; j++) {
var s = dg.Segment(points[0][j], points[N-1][j]);
for(var i = 0; i < N; i++)
s.attach(points[i][j]);
}
points[0][0].free(true);
points[0][N-1].free(true);
points[N-1][0].free(true);
points[N-1][N-1].free(true);
var A = [[Math.random(), Math.random()], [Math.random(), Math.random()]];
var b = [3.5, 2.5];
var new_points = createArray(N, N);
for (i = 0; i < N; i++)
for (j = 0; j < N; j++) {
var x = [points[i][j].x(), points[i][j].y()];
var y = affine(A, b, x);
new_points[i][j] = dg.MapPoint(points[i][j], function(x){return affine(A, b, x);}).label("").color("red");
}
for (i = 0; i < N; i++)
dg.Segment(new_points[i][0], new_points[i][N-1]);
for (j = 0; j < N; j++)
dg.Segment(new_points[0][j], new_points[N-1][j]);