window.onload = function() { function distance(p1, p2) { return Math.hypot(p1.x-p2.x, p1.y-p2.y); } function createLine(p1, p2) { return { x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y, dx: p2.x - p1.x, dy: p2.y - p1.y }; } function lineLen(line) { return Math.hypot(line.dx, line.dy); } function linesOverlapping(l1, l2) { function angle(line, point) { return line.dx*(point.y - line.y1) - (point.x - line.x1)*line.dy; } function linesIntersecting(l1, l2) { return angle(l1, {x: l2.x1, y: l2.y1}) * angle(l1, {x: l2.x2, y: l2.y2}) < 0; } return linesIntersecting(l1, l2) && linesIntersecting(l2, l1); } function connected(line1, line2) { return (line1.x1==line2.x1 && line1.y1==line2.y1) || (line1.x1==line2.x2 && line1.y1==line2.y2) || (line1.x2==line2.x1 && line1.y2==line2.y1) || (line1.x2==line2.x2 && line1.y2==line2.y2); } function triangle() { this.lines = arguments; var a = lineLen(this.lines[0]); var b = lineLen(this.lines[1]); var c = lineLen(this.lines[2]); var p = (a + b + c)/2; this.area = Math.sqrt(p*(p-a)*(p-b)*(p-c)); } function TriangleAlgorithm(points) { // 1. Connect every 2 points with line var lines = []; var i, j, p1, p2, l1, l2; for(i = 0; i < points.length; i++) for(j = 0; j < points.length; j++) if(i != j) { p1 = points[i]; p2 = points[j]; lines.push(createLine(p1, p2)); } // 2. For every pair of intersecting // lines remove longer line for(i = 0; i < lines.length; i++) for(j = i+1; j < lines.length; j++) { l1 = lines[i]; l2 = lines[j]; if(!l1 || !l2) continue; if(linesOverlapping(l1, l2)) { if(lineLen(l1) < lineLen(l2)) lines.splice(j--, 1); else lines.splice(i--, 1); } } // 3. Make triangles from lines var triangles = [], l3, k; for(i = 0; i < lines.length; i++) { l1 = lines[i]; for(j = i; j < lines.length; j++) { l2 = lines[j]; if(connected(l1, l2)) for(k = 0; k < lines.length; k++) if(i != k && j != k) { l3 = lines[k]; if(connected(l1, l3) && connected(l2, l3)) { triangles.push(new triangle(l1, l2, l3)); break; } } } } return triangles; } var cvs = document.querySelector('canvas'); cvs.width = 2*window.innerWidth; cvs.height = 2*window.innerHeight; var ctx = cvs.getContext('2d'); ctx.fillStyle = 'white'; ctx.strokeStyle = 'black'; var points = []; // create points for(var i = 0; i < 100; i++) { var x = Math.round(Math.random()*cvs.width); var y = Math.round(Math.random()*cvs.height); points.push({x:x, y:y}); } // draw triangles var triangles = TriangleAlgorithm(points); for(var i = 0; i < triangles.length; i++) { var tr = triangles[i]; var a = tr.lines[0]; var b = tr.lines[1]; var c = tr.lines[2]; ctx.beginPath(); ctx.moveTo(a.x1, a.y1); ctx.lineTo(a.x2, a.y2); ctx.lineTo(b.x1, b.y1); ctx.lineTo(b.x2, b.y2); ctx.lineTo(c.x1, c.y1); ctx.lineTo(c.x2, c.y2); var hue = 2*tr.area/cvs.width/cvs.height; // uncomment 127 & 130 to get colored version // hue = 2*Math.PI*(hue/0.05 + 0.6); if(!isNaN(hue)) { ctx.fillStyle = 'rgba(0,0,0,'+hue+')'; // ctx.fillStyle = 'hsl('+hue+'rad, 50%, 50%)'; } ctx.fill(); } }

Triangle algorithm