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);
}
