dg.js affine transform - Filip Marić / january, 2016

Try point dragging.

dg.js example code

    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]);

					
					
copyright 2016, Djordje Rakonjac