# Recursive Squares

HTML
<canvas id="canvas"></canvas>
CSS
body{ background: black; } canvas{ display: block; background: black; margin: 0 auto; }
JAVASCRIPT
var canvas = document.getElementById('canvas'); console.log(window.innerHeight); canvas.width = Math.min(Math.max(500, window.innerHeight-80), window.innerWidth-40); canvas.height = canvas.width; var ctx = canvas.getContext('2d'); let c_width = canvas.width; let c_height = canvas.height; loop(10, true); function loop(x, up){ drawRecursiveSquares(x); setTimeout(function(){ if (up && x <= 98) { loop(x+1, true); } else if (up) { loop(x-1, false); } else if (!up && x >= 2) { loop(x-1, false); } else { loop(x+1, true); } }, 40) } function drawRecursiveSquares(separationPercentage){ ctx.clearRect(0, 0, canvas.width, canvas.height); let separation = separationPercentage / 100; let a = c_width * separation; let b = c_width * (1 - separation); let d = Math.sqrt(a*a + b*b); let angle = 0; let angle_change = Math.atan(b/a); let color = "white"; function drawRect(d, angle, color) { ctx.strokeStyle = color; ctx.translate(c_width/2, c_height/2); ctx.rotate(angle); ctx.translate(-1 * (c_width/2), -1 * (c_height/2)); ctx.strokeRect(.5 * (c_width-d), .5 * (c_width-d), d, d); ctx.translate(c_width/2, c_height/2); ctx.rotate(-1 * angle); ctx.translate(-1 * (c_width/2), -1 * (c_height/2)); } function tunnel(d, angle, color) { let a = d * separation; let b = d * (1 - separation); let next_step = Math.sqrt(a*a + b*b); if (d > 10) { drawRect(d, angle, color); tunnel(next_step, angle + angle_change, color); } } tunnel(c_width-10, angle, color); }