|
var w = 960; |
|
var h = 960; |
|
var b = 20; |
|
|
|
var c = d3.select("#canvasDiv") |
|
.append("canvas") |
|
.attr("width", w) |
|
.attr("height", h); |
|
|
|
var context = c.node().getContext("2d"); |
|
|
|
// initial (largest) triangle |
|
var triangles = [[[w/2, h/2 - (Math.sqrt(3)*w/2 - b)/2], [b, h/2 + (Math.sqrt(3)*w/2 - b)/2], [w-b, h/2 + (Math.sqrt(3)*w/2 - b)/2]]]; |
|
|
|
// draw initial triangle |
|
context.beginPath(); |
|
context.moveTo(triangles[0][0][0], triangles[0][0][1]); |
|
context.lineTo(triangles[0][1][0], triangles[0][1][1]); |
|
context.lineTo(triangles[0][2][0], triangles[0][2][1]); |
|
context.fillStyle="#fff"; |
|
context.fill(); |
|
context.closePath(); |
|
|
|
// set iterations |
|
var iter = 9; |
|
var i = 0; |
|
|
|
setTimeout(function(){ removeTriangles(triangles); }, 1000); |
|
|
|
function removeTriangles(triangles) { |
|
|
|
setTimeout(function() { |
|
var newtriangles = []; |
|
triangles.forEach(function(el, i) { |
|
// "remove" triangle in the middle by painting over it |
|
var nt = [halfway(el[1], el[2]), |
|
halfway(el[2], el[0]), |
|
halfway(el[0], el[1])] |
|
|
|
context.beginPath(); |
|
context.moveTo(nt[0][0], nt[0][1]); |
|
context.lineTo(nt[1][0], nt[1][1]); |
|
context.lineTo(nt[2][0], nt[2][1]); |
|
context.fillStyle="#000"; |
|
context.fill(); |
|
context.closePath(); |
|
|
|
// push new triangles to our array |
|
newtriangles.push([nt[0], nt[1], el[2]], |
|
[nt[0], el[1], nt[2]], |
|
[el[0], nt[1], nt[2]]) |
|
}) |
|
|
|
i++ |
|
if (i < iter) {removeTriangles(newtriangles);} |
|
|
|
}, 750) |
|
} |
|
|
|
function halfway(a,b) { |
|
return [(a[0]+b[0]) / 2, (a[1]+b[1]) / 2] |
|
} |
