Alexander Deplov

Triangular Mesh

Triangular Mesh

Code

var steps = 10
var colors = ['#003049', '#D62828', '#F77F00', '#FCBF49', '#EAE2B7']
var matrix = []
var s = view.size.width / steps
var width = view.size.width
var height = view.size.height

for(var i = 1; i < steps; i++) {
	var line = []
	for (var j = 1; j < steps; j++) {
		var x = map(i, 0, steps, 0, width) + (j%2 == 0 ? - s/2 : 0) + lerp(-1, 1, Math.random()) * s / 3
		var y = map(j, 0, steps, 0, height) + lerp(-1, 1, Math.random()) * s / 3
		line.push(new Point(x,y))
	}
	matrix.push(line)
}

for (var i = 0; i < steps - 2; i++) {
	for (var j = 0; j < steps - 2; j++) {

		triangle(
        matrix[j][i].x, matrix[j][i].y,
        matrix[j+1][i].x, matrix[j+1][i].y,
        matrix[j+(i%2==0?1:0)][i+1].x, matrix[j+(i%2==0?1:0)][i+1].y
      )

		triangle(
        matrix[j+(i%2==1?1:0)][i].x, matrix[j+(i%2==1?1:0)][i].y,
        matrix[j][i+1].x, matrix[j][i+1].y,
        matrix[j+1][i+1].x, matrix[j+1][i+1].y
      )
	}
}

function lerp (start, end, amt){
  return (1 - amt ) * start + amt * end
}

function triangle(x1, y1, x2, y2, x3, y3){

	var triangle = new Path.Star({
    center: [50, 50],
    points: 1.5,
    radius1: 15,
    radius2: 25,
    fillColor: colors[Math.floor(Math.random() * colors.length)],
		strokeWidth: 2,
		strokeColor: 'white',
		opacity: 1
	})

	var path = new Path.Circle({
		radius: 5,
		fillColor: 'white',
		center: [x1, y1]
	})

	triangle.segments[0].point.x = x1
	triangle.segments[0].point.y = y1
	triangle.segments[1].point.x = x2
	triangle.segments[1].point.y = y2
	triangle.segments[2].point.x = x3
	triangle.segments[2].point.y = y3
}

function map(n, start1, stop1, start2, stop2, withinBounds){
	var newval = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2
	if (!withinBounds) {
		return newval
	}
	if (start2 < stop2) {
		return this.constrain(newval, start2, stop2)
	} else {
		return this.constrain(newval, stop2, start2)
	}

}

function constraints(n, low, high){
	return Math.max(Math.min(n, hign), low)
}