var n = 10;
var T = []; // zeros((2*n*n,3))
var X = []; // zeros(((n+1)*(n+1),3))

// GENERATE MESH HERE

// vertices
// X[0] = [0, 0, 0], X[(n+1)(n+1) - 1] = [1, 1, 0]
for (var r = 0; r < n+1; r++) {
    for (var c = 0; c < n+1; c++) {
        var i = r*(n+1) + c;
        X[i] = [50 + 300*c/n, 50 + 300*r/n, 0];
    }
}

// triangles
// T[0] and T[1] are square at (0, 0, 0)
// T[2*n*n - 1], T[2*n*n - 2] are square at (1, 1, 0)
for (var r = 0; r < n; r++) {
    for (var c = 0; c < n; c++) {
        // lower left, lower right, upper left, upper right
        var ll = r*(n+1) + c;
        var lr = r*(n+1) + c+1;
        var ul = (r+1)*(n+1) + c;
        var ur = (r+1)*(n+1) + c+1;
        
        T[r*2*n + 2*c] =   [ll, ul, lr];
        T[r*2*n + 2*c+1] = [ur, lr, ul];
    }
}

// COMPUTE GEODESIC DISTANCE FROM CORNER HERE
var distances = [];
var maxD = 0;
for (var i = 0; i < X.length; i++) {
    var d = dist(0, 0, X[i][0], X[i][1]);
    distances[i] = d;
    
    if (d > maxD) {
        maxD = d;
    }
}

// PLOT HERE
background(189, 189, 189);
colorMode(HSB);
strokeWeight(1);
for (var t = 0; t < T.length; t++) {
    var p0 = X[T[t][0]];
    var p1 = X[T[t][1]];
    var p2 = X[T[t][2]];
    var c0 = map(distances[T[t][0]], 0, maxD, 0, 200);
    var c1 = map(distances[T[t][1]], 0, maxD, 0, 200);
    var c2 = map(distances[T[t][2]], 0, maxD, 0, 200);
    
    strokeWeight(1);
    stroke(255, 0, 0);
    triangle(p0[0], p0[1], p1[0], p1[1], p2[0], p2[1]);
    
    strokeWeight(5);
    stroke(c0, 255, 255);
    point(p0[0], p0[1]);
    
    stroke(c1, 255, 255);
    point(p1[0], p1[1]);
    
    stroke(c2, 255, 255);
    point(p2[0], p2[1]);
}